/* ============================================================
  DIRECTV ARGENTINA — MOBILE RESPONSIVE v2
  Breakpoints:
    ≤ 1024px  → tablet / nav mobile
    ≤  768px  → mobile-lg
    ≤  480px  → mobile-sm
    ≤  380px  → mobile-xs
============================================================ */

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

/* ============================================================
  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,
  .llamame__copy,
  .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.5rem, 6vw, 2.8rem) !important;
    line-height: 1.1 !important;
  }

  h2,
  .sec-title,
  .prime__text h2,
  .cta-strip__copy,
  .llamame__copy {
    font-size: clamp(1.5rem, 4.5vw, 2.4rem) !important;
    line-height: 1.15 !important;
  }

  .sec-eyebrow,
  .hero__eyebrow,
  .hero__form-label,
  .plan-card__feat-title,
  .plan-card__period-label,
  .footer__col-title,
  .s3__pack,
  .s3__free-label,
  .s3__includes-label,
  .inet-card__popular,
  .cta-strip__label,
  .ch__lbl {
    font-size: 11px !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 — hamburguesa + teléfono/CTA dentro del drawer
============================================================ */
@media (max-width: 1024px) {

  .nav {
    padding: 0 var(--pad-x);
    height: var(--nav-h);
  }

  .nav__links  { display: none !important; }
  .nav__cta    { display: none !important; }
  .nav__tel-sm { display: none !important; }

  .nav__burger {
    display: flex !important;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    z-index: 10001;
  }
  .nav__burger span {
    display: block;
    width: 24px; height: 2px;
    background: var(--dtv-white);
    border-radius: 2px;
    transition: transform .3s ease, opacity .3s ease;
  }

  .nav__logo img { height: 45px; }

  .nav__drawer {
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    background: rgba(8, 18, 32, 0.99);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 28px var(--pad-x) 36px;
    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);
  }

  .nav__drawer a {
    font-family: var(--font-dtv) !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,.75) !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid rgba(1,115,174,.12) !important;
    display: block !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; }

  .nav__drawer .nav__tel-sm {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 24px !important;
    padding: 18px var(--pad-x) !important;
    background: var(--dtv-yellow) !important;
    border-radius: 10px !important;
    color: var(--dtv-black) !important;
    gap: 4px !important;
    text-decoration: none;
  }
  .nav__drawer .nav__tel-sm strong {
    color: var(--dtv-black) !important;
    font-family: var(--font-dtv) !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }
  .nav__drawer .nav__tel-sm span {
    font-size: 11px !important;
    color: rgba(0,0,0,.6) !important;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-family: var(--font-inter) !important;
    line-height: 1 !important;
  }
}

@media (max-width: 480px) {
  .nav { padding: 0 var(--pad-x); }
  .nav__logo img { height: 45px; }
  .nav__drawer { padding: 24px var(--pad-x) 32px; }
  .nav__drawer a { font-size: 1.15rem !important; padding: 12px 0 !important; }
}

@media (max-width: 380px) {
  .nav__logo img { height: 45px; }
  .nav__drawer a { font-size: 1rem !important; }
}

/* ============================================================
  HERO — pantalla completa en mobile, slider horizontal intacto

  • height: 100svh  → ocupa toda la pantalla del dispositivo
  • min-height: 580px → piso razonable en dispositivos pequeños
  • El track y los slides mantienen la lógica horizontal (JS ok)
  • background-size: cover + background-position ajustado por slide
    para que el área importante de cada imagen quede visible
============================================================ */
@media (max-width: 1024px) {

  /* ── Contenedor principal ── */
  .hero {
    height: 100svh !important;
    min-height: 580px !important;
    max-height: 900px !important; /* evita exceso en tablets landscape */
    padding-top: 0 !important;
    overflow: hidden !important;
  }

  /* ── Viewport: mismo alto que el hero ── */
  .hero__viewport {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  /* ── Track: HORIZONTAL — no tocar, el JS depende de esto ── */
  .hero__track {
    display: flex !important;
    flex-direction: row !important;
    width: 400% !important;
    height: 100% !important;
  }

  /* ── Slides: 25% del track = 100vw cada uno ── */
  .hero__slide {
    position: relative !important;
    width: 25% !important;
    height: 100% !important;
    min-height: unset !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
  }

  /* ── Fondo: cover siempre ── */
  .hero__bg {
    position: absolute !important;
    inset: 0 !important;
    background-attachment: scroll !important;
    background-size: cover !important;
  }

  /*
    ── background-position por slide ──
    Las imágenes desktop son anchas. En mobile (viewport angosto y alto),
    "cover" recorta los costados. Ajustamos el eje X para centrar el sujeto
    y el eje Y para mostrar la parte importante (generalmente arriba).

    Valores: X% Y%
      X: 50% = centro horizontal | >50% = más a la derecha | <50% = más a la izquierda
      Y: 0%  = borde superior    | 50%  = centro           | 100% = borde inferior

    Ajustar según dónde esté el sujeto principal de cada imagen.
  */
  .slide-1 { background-position: 65% 20% !important; } /* fútbol/mundial: sujeto a la derecha, arriba */
  .slide-2 { background-position: 60% 15% !important; } /* TV smart: pantalla centrada, arriba */
  .slide-3 { background-position: 55% 20% !important; } /* superlite: estadio, zona central-alta */
  .slide-4 { background-position: 50% 25% !important; } /* fibra óptica: composición centrada */

  /* ── Overlay: oscuro arriba (texto), claro abajo (dibujo) ── */
  .hero__bg::after {
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,.72) 0%,
      rgba(0,0,0,.40) 45%,
      rgba(0,0,0,.10) 100%
    ) !important;
  }

  /* ── Contenido: parte superior del slide ── */
  .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) var(--pad-x) 0 !important;
    z-index: 2;
  }

  /* ── Flechas: compactas ── */
  .hero__nav    { display: block !important; }
  .hero__arrow  { width: 36px !important; height: 36px !important; font-size: 12px !important; }
  .hero__arrow--prev { left: 10px !important; }
  .hero__arrow--next { right: 10px !important; }

  /* ── Scroll hint: oculto ── */
  .hero__scroll { display: none !important; }

  /* ── Contenido: ancho completo ── */
  .hero__left,
  .hero__left--narrow {
    max-width: 100% !important;
    width: 100% !important;
  }

  .hero__eyebrow { margin-bottom: 8px !important; }
  .hero__sub     { max-width: 100% !important; margin-bottom: 14px !important; }
}

/* Ajuste fino para mobile pequeño */
@media (max-width: 480px) {
  .hero {
    min-height: 540px !important;
  }
  .hero__content {
    padding: calc(var(--nav-h) + 18px) var(--pad-x) 0 !important;
  }
  /* En pantallas angostas el sujeto puede quedar más a un lado */
  .slide-1 { background-position: 72% 18% !important; }
  .slide-2 { background-position: 68% 12% !important; }
  .slide-3 { background-position: 60% 18% !important; }
  .slide-4 { background-position: 52% 22% !important; }
}

@media (max-width: 380px) {
  .hero {
    min-height: 520px !important;
  }
  .hero__content {
    padding: calc(var(--nav-h) + 14px) var(--pad-x) 0 !important;
  }
}

/* ============================================================
  HERO — Slide 1: formulario
============================================================ */
@media (max-width: 1024px) {
  .hero__form { max-width: 100%; }
  .hero__form-inner { padding: 0 12px; }
  .hero__form-inner input { padding: 13px 0; }
  .hero__form button[type="submit"] { min-height: 44px; }
}
@media (max-width: 480px) {
  .hero__form { flex-direction: column; gap: 8px; }
  .hero__form-inner {
    border-right: 1px solid rgba(1,115,174,.5) !important;
    border-radius: 8px !important;
  }
  .hero__form button[type="submit"] {
    border-radius: 8px !important;
    padding: 14px !important;
    width: 100%;
    min-height: 48px;
  }
}

/* ============================================================
  HERO — Slide 2: promo TV Smart
============================================================ */
@media (max-width: 1024px) {
  .promo-card__price { font-size: clamp(2rem, 8vw, 3rem) !important; }
  .promo-card__included { flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
  .app-icon { height: 32px; }
}

/* ============================================================
  HERO — Slide 3: Superlite
============================================================ */
@media (max-width: 1024px) {
  .hero__content--s3 { align-items: flex-start !important; }
  .s3 { max-width: 100% !important; width: 100%; gap: 10px; }

  .s3__strip { flex-direction: column !important; border-radius: 10px; }
  .s3__price {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding: 10px var(--pad-x);
  }
  .s3__free {
    flex-direction: row !important;
    gap: 10px; align-items: center;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding: 8px var(--pad-x);
    min-width: auto; justify-content: flex-start;
  }
  .s3__includes { padding: 8px var(--pad-x); min-width: auto; }

  .s3__amount   { font-size: 1.7rem !important; }
  .s3__free-num { font-size: 1.5rem !important; }

  .s3__bottom { flex-direction: column !important; align-items: flex-start; gap: 8px; }
  .s3__sub-text { font-size: 13px !important; max-width: 100%; }
  .s3__cta { width: 100%; justify-content: center; min-height: 44px; font-size: 0.8rem !important; }
}

/* ============================================================
  HERO — Slide 4: Internet
============================================================ */
@media (max-width: 1024px) {
  .hero__content--internet {
    flex-direction: column !important;
    padding: calc(var(--nav-h) + 24px) var(--pad-x) 0 !important;
    gap: 10px !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
  .inet-grid {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    gap: 5px;
  }
  .inet-card { padding: 8px 12px; gap: 10px; }
  .inet-card__name  { font-size: 0.85rem; flex: 1 1 120px; }
  .inet-card__price { font-size: 1.1rem !important; font-weight: 900; }
  .inet-card__cta   { font-size: 0.58rem; min-height: 32px; }
  .inet-card__badge { font-size: 0.48rem; }
}
@media (max-width: 480px) {
  .hero__content--internet {
    padding: calc(var(--nav-h) + 18px) var(--pad-x) 0 !important;
  }
  .inet-card { padding: 7px 10px; gap: 10px; }
  .inet-card__name  { font-size: 0.78rem; }
  .inet-card__price { font-size: 1rem !important; }
}

/* ============================================================
  TICKER
============================================================ */
@media (max-width: 768px) {
  .ticker { padding: 10px 0; }
  .ticker__item { font-size: 0.8rem; padding: 0 20px; gap: 12px; }
}
@media (max-width: 480px) {
  .ticker__item { font-size: 0.72rem; padding: 0 14px; gap: 8px; }
}

/* ============================================================
  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; }
}
@media (max-width: 480px) {
  .services { padding: 44px 0; }
  .svc { padding: 18px 14px; }
}

/* ============================================================
  PLANES
============================================================ */
@media (max-width: 1024px) {
  .plans { padding: 64px 0; }
  .plans__header { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 24px; }
  .tabs { flex-wrap: wrap; width: 100%; gap: 4px; }
  .tab-btn { font-size: 0.7rem; padding: 9px 14px; flex: 1; text-align: center; min-height: 40px; }

  .plans-grid.active { grid-template-columns: 1fr !important; gap: 16px; }

  .plan-card__body { padding: 20px var(--pad-x); }
  .plan-card__foot { padding: 0 var(--pad-x) 20px; }
  .plan-card__name  { font-size: 1.35rem !important; }
  .plan-card__price { font-size: 2rem !important; padding-bottom: 8px; }
  .plan-card__cta {
    min-height: 50px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem !important;
  }
  .plan-card:hover { transform: none; }
}
@media (max-width: 480px) {
  .plans { padding: 44px 0; }
  .tab-btn { font-size: 0.62rem; padding: 8px 8px; }
  .plan-card__price { font-size: 1.8rem !important; }
  .plan-card__body { padding: 18px 20px; }
  .plan-card__foot { padding: 0 20px 18px; }
}

/* ============================================================
  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: 40px var(--pad-x);
  }
  .dsports__img-side { padding: 28px var(--pad-x); min-height: 240px; }
  .dsports__big  { font-size: clamp(3.5rem, 14vw, 7rem); }
  .dsports__logo { max-width: 120px; margin-bottom: 16px; }
  .dsports__body { font-size: 14px !important; line-height: 1.55 !important; }
  .dsports__tags { gap: 6px; }
  .dsports__tag  { font-size: 0.65rem; padding: 5px 10px; }
}
@media (max-width: 480px) {
  .dsports { padding: 44px 0; }
  .dsports__info { padding: 28px var(--pad-x); }
  .dsports__big  { display: none; }
  .dsports__img-side { padding: 20px var(--pad-x); min-height: 190px; }
}

/* ============================================================
  PRIME VIDEO
============================================================ */
@media (max-width: 1024px) {
  .prime { padding: 52px 0; }
  .prime__inner { grid-template-columns: 1fr !important; gap: 24px; text-align: center; }
  .prime__logo  { margin: 0 auto; max-width: 140px; }
  .prime__img   { display: none !important; }
  .prime__text  { text-align: center; }
  .prime__text h2 { font-size: clamp(1.5rem, 4.5vw, 2rem) !important; }
  .prime__text p  { font-size: 14px !important; line-height: 1.55 !important; }
}
@media (max-width: 480px) { .prime { padding: 44px 0; } }

/* ============================================================
  CTA STRIP
============================================================ */
@media (max-width: 1024px) {
  .cta-strip { padding: 44px 0; }
  .cta-strip__inner { flex-direction: column; align-items: center; gap: 18px; }
  .cta-strip__copy  { font-size: clamp(1.5rem, 4.5vw, 2rem) !important; line-height: 1.2 !important; }
  .cta-strip__right { flex-direction: column; align-items: center; gap: 12px; width: 100%; }
  .cta-strip__phone { font-size: 1.6rem !important; }
  .cta-strip__btn {
    width: 100%; text-align: center;
    padding: 16px var(--pad-x);
    min-height: 52px;
    display: flex; align-items: center; justify-content: center;
  }
}

/* ============================================================
  DGO
============================================================ */
@media (max-width: 1024px) {
  .dgo { padding: 64px 0; }
  .dgo__inner { grid-template-columns: 1fr !important; gap: 32px; }
  .dgo__visual { order: 2; }
  .dgo__visual img { max-width: 65%; }
  .dgo__content { order: 1; }
  .dgo__body { font-size: 14px !important; line-height: 1.55 !important; margin-bottom: 24px; }
  .dgo__btn {
    width: 100%; text-align: center;
    padding: 14px var(--pad-x);
    min-height: 52px;
    display: flex; align-items: center; justify-content: center;
  }
}
@media (max-width: 768px) { .dgo__visual img { max-width: 78%; } }
@media (max-width: 480px) {
  .dgo { padding: 44px 0; }
  .dgo__visual img { max-width: 90%; }
}

/* ============================================================
  FAQ
============================================================ */
@media (max-width: 1024px) {
  .faq { padding: 64px 0; }
  .faq__inner { grid-template-columns: 1fr !important; gap: 32px; }
  .faq__sidebar p { font-size: 14px !important; line-height: 1.55 !important; }

  .faq-q {
    font-size: 14px !important;
    line-height: 1.4 !important;
    padding: 16px 0;
    gap: 12px;
    min-height: 52px;
  }
  .faq-a { font-size: 14px !important; line-height: 1.55 !important; }
  .faq-item.open .faq-a { max-height: 320px; }
  .faq-q__ico { width: 28px; height: 28px; font-size: 0.65rem; flex-shrink: 0; }
}
@media (max-width: 480px) {
  .faq { padding: 44px 0; }
  .faq-q { font-size: 14px !important; padding: 14px 0; }
}

/* ============================================================
  LLAMAME STRIP
============================================================ */
@media (max-width: 1024px) {
  .llamame { padding: 44px 0; }
  .llamame__inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .llamame__copy { font-size: clamp(1.5rem, 4.5vw, 2rem) !important; line-height: 1.2 !important; }
  .llamame__form { max-width: 100%; min-width: auto; width: 100%; }
  .llamame__form button[type=submit] { min-height: 52px; }
}
@media (max-width: 480px) {
  .llamame__form { flex-direction: column; gap: 8px; }
  .llamame__input-wrap {
    border-right: 1px solid rgba(1,115,174,.4) !important;
    border-radius: 8px !important;
  }
  .llamame__form button[type=submit] {
    border-radius: 8px !important;
    padding: 14px var(--pad-x) !important;
    width: 100%;
    min-height: 52px;
  }
}

/* ============================================================
  CONTACTO
============================================================ */
@media (max-width: 1024px) {
  .contacto { padding: 64px 0; }
  .contacto__inner { grid-template-columns: 1fr !important; gap: 40px; }

  .contact-channels { gap: 10px; margin-top: 20px; }
  .ch { padding: 14px 18px; gap: 12px; min-height: 60px; }
  .ch__val  { font-size: 1rem !important; }
  .ch__icon { width: 38px; height: 38px; font-size: 0.9rem; }

  .cf-row { grid-template-columns: 1fr !important; gap: 14px; }
  .cf-field input,
  .cf-field textarea { font-size: 14px !important; padding: 13px 14px; }
  .cf-submit {
    width: 100%; text-align: center;
    padding: 14px var(--pad-x);
    min-height: 52px;
    display: flex; align-items: center; justify-content: center;
    align-self: stretch;
  }
  .ch:hover { transform: none; }
}
@media (max-width: 480px) {
  .contacto { padding: 44px 0; }
  .ch { padding: 12px 14px; }
  .cf-field input,
  .cf-field textarea { padding: 12px 12px; }
}

/* ============================================================
  FOOTER
============================================================ */
@media (max-width: 1024px) {
  .footer { padding: 48px 0 24px; }
  .footer__top { flex-wrap: wrap; gap: 28px; margin-bottom: 32px; }
  .footer__col { min-width: 140px; gap: 10px; }
  .footer__col a { font-size: 14px !important; }
  .footer__tagline { font-size: 14px !important; line-height: 1.55 !important; }
}
@media (max-width: 640px) {
  .footer__top { flex-direction: column; gap: 22px; margin-bottom: 24px; }
  .footer__logo img { height: 36px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
  .footer__copy    { font-size: 12px !important; }
  .footer__privacy { font-size: 11px !important; }
}

/* ============================================================
  PRIVACIDAD OVERLAY
============================================================ */
@media (max-width: 1024px) {
  .privacy-overlay { padding: 0; align-items: flex-end; }
  .privacy-box {
    padding: 28px var(--pad-x) 36px;
    border-radius: 16px 16px 0 0;
    max-height: 80vh;
  }
  .privacy-box h3 { font-size: 1.35rem !important; }
  .privacy-box p  { font-size: 14px !important; line-height: 1.55 !important; }
}

/* ============================================================
  WA BUTTON + POPUP
============================================================ */
@media (max-width: 1024px) {
  .wa-btn { bottom: 16px; right: 16px; width: 50px; height: 50px; font-size: 1.25rem; }
  .wa-popup { bottom: 76px; right: 16px; width: 215px; }
  .wa-popup a { font-size: 14px !important; padding: 10px 0; }
}

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

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

/* ============================================================
  DSPORTS BIG TEXT
============================================================ */
@media (max-width: 480px) { .dsports__big { display: none; } }

/* ============================================================
  XS — 380px y menos
============================================================ */
@media (max-width: 380px) {
  :root { --pad-x: 25px; }

  .plan-card__price { font-size: 1.6rem !important; }
  .plan-card__feats li { font-size: 13px !important; }

  .inet-card { padding: 6px 8px; }
  .inet-card__name  { font-size: 0.72rem; }
  .inet-card__price { font-size: 0.95rem !important; }

  .nav__drawer a { font-size: 1.05rem !important; padding: 10px 0 !important; }

  .tab-btn { font-size: 0.6rem; padding: 7px 6px; }
}


  @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');  }
  }