@media (max-width: 1024px) {
    .heroContent h1 {
        font-size: 42px;
    }
    .heroContent h2 {
        font-size: 28px;
    }
    .carouselVertical {
        gap: 20px;
    }
    .clientesGrid {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }
    .footer {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .serviceBody h3 {
    font-size: 28px !important;
}
.serviceBody h3 .serviceOrange {
    font-size: 28px !important;
}
    /* NAVBAR */
    .navbar {
        padding: 15px;
        flex-direction: row;
        justify-content: space-between;
    }
    .navbarButtons .navbarCta {
        display: none;
    }

    /* HERO */
    .heroContent {
        text-align: center;
        padding: 0 20px;
    }
    .heroContent h1 {
        font-size: 34px;
    }
    .heroContent h2 {
        font-size: 22px;
    }
    .heroBtn {
        width: 90%;
        justify-content: center;
    }

    /* STACK */
    .stackItem {
        font-size: clamp(28px, 7vw, 40px) !important;
        letter-spacing: -0.5px;
    }

    /* SERVICIOS */
    .serviceCard {
        flex-direction: column;
    }
    .serviceImg img {
        width: 100%;
        height: auto;
    }
    .serviceBody {
        padding: 20px;
    }

    /* PORTAFOLIO CAROUSEL */
.portafolioSection {
    padding: 40px 0 40px !important;
}
    .carouselVertical {
        gap: 6px !important;
    }
.carouselContainer {
    overflow: visible !important;
    max-height: none !important;
    width: 100% !important;
    border-radius: 0px !important;
}
.carouselVertical .portfolioCard {
    min-width: 420px !important;
    width: 420px !important;
    height: 740px !important;
    border-radius: 16px !important;
}
.portfolioCard img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

    /* PORTAFOLIO SLIDER (otras páginas) */
    .portafolioViewport {
        width: 100%;
    }
    .portafolioWrapper {
        width: 100%;
    }
    .portafolioGrid {
        gap: 0;
    }
    .portafolioCard {
        flex: 0 0 calc(100vw - 80px);
        width: calc(100vw - 80px);
        height: 65vh;
      border-radius: 16px !important;
    overflow: hidden !important;
    }
    #prevPortafolio {
        left: 10px;
    }
    #nextPortafolio {
        right: 10px;
    }

    /* CLIENTES */
    .clientesGrid {
        grid-template-columns: repeat(2, 1fr);
    }
    .clientesBoton {
        width: 100%;
        justify-content: center;
    }
    .clientesSection {
        margin: 40px auto !important;
        padding: 40px 20px 60px !important;
    }

    /* FOOTER */
    .footerNav,
    .footerSocial {
        flex-direction: column;
        gap: 10px;
    }
    .footer {
        margin-top: 0 !important;
    }
    .footerCopy {
      position: relative !important;
      right: 130px !important; /* 🔑 Juega con este número (20px, 30px, etc.) hasta que lo veas perfecto en tu pantalla */
      text-align: center !important;
  }
}

@media (max-width: 480px) {
    .heroContent h1 {
        font-size: 26px;
    }
    .heroContent h2 {
        font-size: 18px;
    }
    .stackItem {
        font-size: clamp(24px, 6.5vw, 34px) !important;
        letter-spacing: -1px;
    }
    .clientesGrid {
        grid-template-columns: 1fr;
    }
    .pillButton {
        font-size: 14px;
        padding: 12px 18px;
    }
  .carouselVertical .portfolioCard {
      min-width: 320px !important;   /* ancho cómodo en celular */
      width: 320px !important;
      height: 420px !important;      /* altura fija para mantener borde */
      border-radius: 12px !important;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;              /* opcional: fondo para resaltar borde */
  }
  .carouselVertical .portfolioCard img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain !important; /* imagen completa sin cortes */
  }
    .carouselContainer {
        max-height: 800px !important;
        width: 100% !important;
    }
  .heroContent .title-light {
      font-size: 35px !important;   /* tamaño cómodo para subtítulos */
      line-height: 1.2 !important;
  }

  .heroContent .title-accent {
      font-size: 60px !important;   /* tamaño principal adaptado */
      line-height: 1.1 !important;
      letter-spacing: -1px !important;
  }
}
/* REELS HERO - Ajuste de títulos en celular */
@media (max-width: 480px) {
  .reelsHero .title-light {
      font-size: 32px !important;   /* subtítulo más compacto */
      line-height: 1.2 !important;
      letter-spacing: 0px ;
      margin-bottom: 0px !important; /* 🔑 espacio debajo de "Reels" */
  }

  .reelsHero .title-accent {
      font-size: 45px !important;   /* título principal más pequeño */
      line-height: 1.1 !important;
      letter-spacing: -1px !important;
  }

  .reelsDescripcion {
      font-size: 20px !important;   /* texto descriptivo más legible */
      line-height: 1.4 !important;
      margin-top: 12px !important;
  }
  .reelsPortafolio .portafolioTitulo {
      position: relative;
      right: 13px; /* 🔑 mueve todo el bloque un poco a la derecha */
  }
    .reelsPortafolio .portafolioTitulo .title-light {
      position: relative;
      left: 10px; /* 🔑 mueve "Nuestro" a la derecha */
  }
      .reelsPortafolio .portafolioTitulo .title-accent {
      position: relative;
      left: 15px;
  }
  .reelsPortafolio .portafolioTitulo .title-light{
      position: relative;
      top: 25px;   /* 🔑 baja solo las letras */
  }
    .reelsPortafolio .portafolioTitulo .title-accent {
      position: relative;
      top: 40px;   /* 🔑 baja solo las letras */
}
  .portafolioArrow {
    z-index: 10 ; 
}
  .reelsHeroLeft {
      position: relative;
      left: -10px; /* 🔑 mueve todo el bloque hacia la izquierda */
  }
  .portafolioTitulo {
      top: 0 !important;            
      margin-top: 100px !important;   /* 🔑 espacio justo arriba */
      margin-bottom: 20px !important; 
  }
  .reelsPage .clientesSection {
      margin-top: -180px !important;
      padding-top: -180px !important;
      padding-bottom: 20px !important;
  }
  .procesoCard {
      width: 100% !important;          /* 🔑 ocupa todo el ancho disponible */
      margin: 0 auto !important;       /* centra la caja */
      padding: 20px 30px !important;   /* 🔑 más aire a los costados */
  }

  .procesoCard h3 {
      font-size: 35px !important;      /* tamaño cómodo, no se achica demasiado */
      white-space: normal !important;  /* 🔑 permite línea normal, sin compresión */
      text-align: center;              /* opcional: centra el título */
      margin-bottom: -20px !important;   /* espacio justo debajo */
  }

  .procesoCard p {
      margin-top: 0 !important;
      line-height: 1.4 !important;
  }
  .clientesSection {
      margin-top: 0 !important;       /* elimina margen superior */
      padding-top: 0 !important;      /* elimina padding superior */
  }

  .clientesSection h2 {
      margin-bottom: 10px !important; /* controla espacio debajo del título */
  }
  .footerCopy {
      position: relative !important;
      right: 130px !important; /* 🔑 Juega con este número (20px, 30px, etc.) hasta que lo veas perfecto en tu pantalla */
      text-align: center !important;
  }
}