/* =============================================
   ESTILOS RESPONSIVE UNIFICADOS (VERSIÓN CORREGIDA Y COMPLETA)
   Metodología: 
   - Base: Desktop (en styles.css)
   - Breakpoint 1: Tablet Grande (~1200px) - Ajustes menores de espacio
   - Breakpoint 2: Tablet (~900px) - Apilamiento de 2 columnas
   - Breakpoint 3: Móvil (~768px) - Apilamiento general
   ============================================= */

@media (max-width: 1500px){
  
  /* --- HERO: Lo apilamos verticalmente --- */
  .hero__content {
    flex-direction: column;
    text-align: center;
    gap: 4rem;
  }

  .hero__text-right,
  .hero__title--left {
    order: initial;
  }

  .hero__description {
    margin-top: 1rem;
    max-width: 40ch;
  }

  .hero__icon-float {
    width: 70px;
    height: 70px;
    font-size: 2.5rem;
    left: -1rem;
  }
}
/* =============================================
   1. TABLET GRANDE (hasta 1200px)
   ============================================= */
@media (max-width: 1200px) {

  /* --- Reducimos el "aire" general de las secciones para dar más espacio al contenido --- */
  .services,
  .testimonials,
  .faq,
  .pricing,
  .blog,
  .projects,
  .featured-projects,
  .project-hero,
  .project-content {
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .pricing__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* --- Apilamos las secciones de 2 columnas ANTES para evitar que se aplasten --- */
  .services__container,
  .faq__container,
  .footer__bottom {
    grid-template-columns: 1fr;
    gap: 5rem;
  }

  /* --- Ajustamos el texto y la imagen de "Services" al apilarse --- */
  .services__image-container {
    transform: rotate(0deg);
    order: -1;
    /* Mueve la imagen arriba del texto */
    max-width: 450px;
    /* Le damos un tamaño máximo a la imagen */
    margin: 0 auto;
  }

  .services__text-content,
  .faq__text-content {
    text-align: center;
  }
}


/* =============================================
   2. TABLET MEDIANA (hasta 900px) - ¡ESTE ES EL ARREGLO PRINCIPAL!
   ============================================= */
@media (max-width: 900px) {

  /* --- A PARTIR DE 900PX HACIA ABAJO (TABLET Y MÓVIL) --- */
  .desktop-nav-container {
    display: none;
  }

  .mobile-nav-container {
    display: block;
    width: 100%;
    max-width: none;
    padding: 0 1rem;
  }

  .header {
    max-width: 100%;
  }

  .mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem;
    background-color: var(--color-nav-bg);
    border: 1px solid var(--color-nav-border);
    border-radius: 50px;
    backdrop-filter: blur(10px);
  }

  .mobile-header__hamburger-btn {
    background-color: var(--color-accent);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 10px;
  }

  .mobile-header__hamburger-btn span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-background);
  }

  .mobile-menu {
    display: block;
    /* Lo hacemos visible para que JS lo controle */
    position: fixed;
    top: 2rem;
    left: 1rem;
    right: 1rem;
    background-color: var(--color-nav-bg);
    border: 1px solid var(--color-nav-border);
    border-radius: 20px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 1rem;
    z-index: 110;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px) scale(0.95);
    transition: opacity 0.3s ease, visibility 0.3s, transform 0.3s ease;
  }

  .mobile-menu__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem;
  }

  .mobile-menu__logo img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .mobile-menu__close-btn {
    background-color: var(--color-accent);
    color: var(--color-background);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 2.4rem;
    line-height: 1;
    cursor: pointer;
  }

  .mobile-menu__nav ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 0;
  }

  .mobile-menu__nav li a {
    display: block;
    padding: 1.5rem;
    font-size: 2rem;
    color: var(--color-text-primary);
  }

  .mobile-menu__cta {

    display: block;

    width: calc(100% - 2rem);

    margin: 1rem auto;

    text-align: center;

    padding: 1.4rem;

    background-color: var(--color-accent);

    color: var(--color-background);

    border-radius: 30px;

    font-size: 1.6rem;

    font-weight: 500;

  }

  body.mobile-menu--is-open .mobile-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
  }



  /* --- MENÚ: Activamos la versión móvil --- */
  .desktop-nav-container {
    display: none;
  }

  .mobile-nav-container {
    display: block;
    width: 100%;
    max-width: none;
    padding: 0 1.5rem;
  }

  .header {
    max-width: 100%;
  }

  .pricing__grid {
    grid-template-columns: 1fr;
  }

  .services,
  .pricing {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  /* --- Ajustamos grids de 3+ columnas a 2 columnas --- */
  .testimonials__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .project-hero__meta-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }

  .footer__top {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__bottom {
    text-align: center;
  }

  .footer__copyright {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}


/* =============================================
   3. MÓVIL (hasta 768px)
   ============================================= */
@media (max-width: 768px) {

  /* --- Ajustes de fuente y espaciado generales para pantallas pequeñas --- */
  html {
    font-size: 58%;
  }

  .testimonials,
  .faq,
  .pricing,
  .blog,
  .projects,
  .featured-projects {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }


  /* --- Apilamos TODOS los grids restantes a 1 columna --- */
  .testimonials__grid,
  .blog__posts-grid,
  .projects__grid {
    grid-template-columns: 1fr;
  }

  /* Ajuste final para el footer en pantallas muy pequeñas */
  .footer__top {
    grid-template-columns: 1fr;
    text-align: center;
  }
/* === AJUSTES PARA FEATURED PROJECTS === */

    .project-showcase {
        aspect-ratio: 1 / 1; /* <-- ¡CAMBIA A 1 / 1 (CUADRADO)! */
    }

    .project-slide {
        padding: 2.5rem; 
    }

    /* (Mantén o elimina los ajustes opcionales de font-size según tu preferencia) */
    .project-showcase__title {
         font-size: clamp(2.2rem, 3.5vw, 3rem); 
    }
     .project-showcase__description {
        font-size: 1.4rem; 
    }
}