/* =========================================================================
   responsive.css  —  Capa móvil de widu.com.mx (HOME)   [v4]
   -------------------------------------------------------------------------
   Se activa en pantallas menores al diseño de escritorio. NO toca la vista
   de escritorio (>=1280px).
   CAUSA RAÍZ resuelta: el template forzaba min-width:1280px en body/header/
   footer, lo que clavaba la página en 1280px y desbordaba todo en móvil.
   ========================================================================= */

/* ===== Quitar el min-width:1280 para cualquier pantalla menor al diseño ===== */
@media screen and (max-width: 1279px) {
  body, .header, header.header, header .menu,
  .foot, .foot .content, .banner { min-width: 0 !important; }
  html, body { overflow-x: hidden; }
  .w { width: 100% !important; }
}

/* ===== Layout móvil completo (<=768px) ===== */
@media screen and (max-width: 768px) {

  .indexPage { padding-bottom: 8vw; }

  /* Contención de imágenes/contenedores */
  .indexPage img { max-width: 100% !important; }
  .indexPage .sec2, .indexPage .sec3, .indexPage .sec4, .indexPage .sec5, .indexPage .sec6,
  .indexPage .videos, .indexPage .swiper-container, .indexPage .ai,
  .indexPage .card, .indexPage .prod, .indexPage .bg { max-width: 100% !important; }

  /* Títulos largos con salto de línea */
  .indexPage .title, .indexPage .sec1 .title,
  .video__container .video__title, .video__container .video__desc { white-space: normal !important; }

  /* ---------- HERO (sec1) ---------- */
  .indexPage .sec1 { height: 78vw; }
  .indexPage .sec1 video { height: 78vw; width: auto; min-width: 100%; left: 50%; max-width: none !important; }
  .indexPage .sec1 .sec1_content { top: 26vw; width: 92%; }
  .indexPage .sec1 .title { font-size: 6.2vw; line-height: 8vw; }

  /* ---------- Textos de sección ---------- */
  .indexPage .sec2 .title, .indexPage .sec3 .title { padding: 9vw 3% 3vw; }
  .indexPage .sec6 .title { margin-top: 9vw; }
  .indexPage .title { font-size: 6vw; line-height: 8vw; }
  .indexPage .desc { font-size: 4.4vw; line-height: 6vw; padding: 0 4%; }
  .indexPage .subtitle { font-size: 3.6vw; line-height: 5vw; padding: 0 4%; }

  /* ---------- sec2 ---------- */
  .indexPage .sec2 .ai { width: 100% !important; height: 47vw; }
  .indexPage .sec2 .swiper-container { width: 100% !important; height: 50vw; margin: 5vw auto 0; }
  .indexPage .sec2 .swiper-container .swiper-wrapper { height: 100%; }
  .indexPage .sec2 .swiper-container .swiper-wrapper img { width: 100% !important; height: 100% !important; object-fit: cover; }
  .video__container { width: 100% !important; }
  .video__container .video__mask { padding-top: 16vw; }
  .video__container .video__title { font-size: 4vw; line-height: 6vw; }
  .video__container .video__desc  { font-size: 6.4vw; line-height: 8vw; }

  /* ---------- sec3 ---------- */
  .indexPage .sec3 .ai { width: 100% !important; height: 50vw; }

  /* ---------- sec4: cuadrícula de 7 productos -> apilada ---------- */
  .indexPage .sec4 { position: static; height: auto !important; margin-top: 9vw;
                     display: flex; flex-direction: column; padding: 0 3%; }
  .indexPage .sec4 .prod1, .indexPage .sec4 .prod2, .indexPage .sec4 .prod3,
  .indexPage .sec4 .prod4, .indexPage .sec4 .prod5, .indexPage .sec4 .prod6,
  .indexPage .sec4 .prod7 {
    position: static !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    width: 100% !important; height: 56vw !important; margin-bottom: 2.5vw;
  }
  .indexPage .sec4 .prod3 { height: 72vw !important; }
  .indexPage .sec4 .prod .mask { opacity: 1; background: rgba(0,0,0,.25); }
  .indexPage .sec4 .prod .prodtitle,
  .indexPage .sec4 .prod .act { opacity: 1 !important; }

  /* ---------- sec5: tarjetas -> columna ---------- */
  .indexPage .sec5 { height: auto; flex-direction: column; margin-top: 9vw; padding: 0 3%; }
  .indexPage .sec5 .card { width: 100% !important; height: 42vw; margin-bottom: 2.5vw; }
  .indexPage .sec5 .card .protitle { margin-top: 14vw; }

  /* ---------- sec6: videos -> columna ---------- */
  .indexPage .sec6 .videos { flex-direction: column; margin-top: 4vw; }
  .indexPage .sec6 .videos .video1, .indexPage .sec6 .videos .video2,
  .indexPage .sec6 .videos .video3, .indexPage .sec6 .videos .video4,
  .indexPage .sec6 .videos .video5 { width: 100% !important; margin-bottom: 4vw; }
  .indexPage .sec6 .videos .video1 .bg, .indexPage .sec6 .videos .video2 .bg,
  .indexPage .sec6 .videos .video3 .bg, .indexPage .sec6 .videos .video4 .bg,
  .indexPage .sec6 .videos .video5 .bg { height: 52vw !important; }



  /* ---------- Video "HomeAI 4": darle altura para que el texto no se encime ---------- */
  .indexPage .sec2 .video__container, .video__container.homeai4 { height: 64vw !important; }
  .video__container .product__video, .video__container video { width: 100% !important; height: 100% !important; object-fit: cover; }
  .video__container .video__mask { padding-top: 13vw !important; }
  .homeai4 .homeai__logo { width: 46vw !important; height: 9vw !important; margin-top: 3vw !important;
    background-size: contain !important; background-repeat: no-repeat; background-position: center; }

  /* ---------- Footer: 5 columnas -> 2 por fila ---------- */
  .foot_top { flex-wrap: wrap !important; padding: 0 4%; margin-bottom: 6vw; }
  .foot_top .link_list { width: 48% !important; margin-bottom: 7vw; }

  /* ---------- sec4: etiqueta del producto ABAJO con degradado ---------- */
  .indexPage .sec4 .prod { justify-content: flex-end; padding-bottom: 5vw; }
  .indexPage .sec4 .prod .mask { opacity: 1 !important;
    background: linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 55%) !important; }

  /* ---------- Footer / CTA ---------- */
  .foot_middle { padding: 6vw 3%; }
  .copyright { flex-direction: column; text-align: center; padding: 5vw 3%; gap: 2vw; }
}