@media (max-width: 768px) {
    .contenedor-banners {
        flex-direction: column;
        align-items: center;
    }
    
    .banner {
        width: 100%;
    }
}



@media (max-width: 768px) {
    .header__logo img {
        height: auto;
        max-height: 10rem;
    }
    
    .header-banner {
        height: auto;
    }
    
    .banner-header img {
        height: auto;
        max-height: 12rem;
    }
}


@media (max-width: 480px) {
    .footer__texto {
        font-size: 1.6rem;
    }
}


@media (max-width: 480px) {
    p {
        font-size: 1.6rem;
    }
    
    h1 {
        font-size: 3.2rem;
    }
    
    h2 {
        font-size: 2.4rem;
    }
    
    h3 {
        font-size: 2rem;
    }
}


.grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* 1 columna móvil */
    gap: 2rem;
}

@media (min-width: 600px) {
    .grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas tablet */
    }
}

@media (min-width: 768px) {
    .grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columnas */
    }
}

@media (min-width: 1024px) {
    .grid {
        grid-template-columns: repeat(3, 1fr); /* 5 columnas desktop */
    }
}



@media (max-width: 768px) {
    .navegacion {
        flex-direction: column;
        align-items: center;
    }
    
    .navegacion__busqueda {
        position: static;
        transform: none;
        margin-top: 1rem;
    }
    
    .navegacion__enlace {
        font-size: 2.4rem;
    }
}


@media (max-width: 768px) {
    .producto-contenedor {
        flex-direction: column;
        align-items: center;
    }

    .lateral-izquierdo,
    .lateral-derecho,
    .centro {
        max-width: 100%;
        width: 100%;
    }

    .producto-relacionado {
        width: 45%;
    }

    .producto {
        width: 90%;
    }
}


@media (max-width: 600px) {
    h1 {
        font-size: 2rem;
    }

    .info h2 {
        font-size: 2rem;
    }

    .info p {
        font-size: 1.6rem;
    }

    .contenedor {
        padding: 1rem;
    }
}


@media (max-width: 768px) {
  /* CATÁLOGOS */
  .grid-marcas {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-categorias {
    grid-template-columns: repeat(3, 1fr);
  }

  /* CONTACTO */
  .fila-contacto {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  /* CATÁLOGOS */
  .grid-marcas,
  .grid-categorias {
    grid-template-columns: repeat(2, 1fr);
  }

  /* DETALLE PRODUCTO */
  .producto-contenedor {
    flex-direction: column;
  }
  .main-image img {
    max-width: 100%;
  }

  /* CARRUSEL */
  .carousel-wrapper {
    width: calc(80px * 2 + 10px * 1); /* 2 miniaturas en móvil */
  }

  /* CONTACTO */
  .formulario-contacto input,
  .formulario-contacto textarea,
  .formulario-contacto button {
    font-size: 16px;
  }
}



/* Responsive para nosotros.css */
@media (max-width: 768px) {
    .mision-vision {
        flex-direction: column; /* Pone Misión y Visión en columna */
        gap: 20px; /* Reduce el espacio entre elementos */
    }

    .mision, .vision {
        width: 100%; /* Ocupar todo el ancho */
    }

    .mision-img, .vision-img {
        width: 80%; /* Imágenes más pequeñas */
        margin: 20px auto;
    }

    h1, h3 {
    font-size: 1.5rem;
    }

    p, li {
        font-size: 1rem; /* Texto un poco más pequeño */
    }
}

/* Responsive para productos.css */
@media (max-width: 768px) {
    .grid-marcas, .grid-categorias {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Celdas más pequeñas */
        gap: 15px;
        padding: 10px;
    }

    .marca-item img, .categoria-item img {
        max-width: 100px;
        height: 100px;
    }

    .marca-item p, .categoria-item p {
        font-size: 12px;
    }
}


/* Responsive para marca.css */
@media (max-width: 768px) {
    .productos-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Celdas más adaptables */
        gap: 15px;
    }

    .producto-item img {
        max-width: 100px;
        height: auto;
    }

    .producto-item p {
        font-size: 12px;
    }

    h1, h2 {
    font-size: 1.5rem;
    font-family: "var(--fuentePrincipal)";
    }
}

@media (max-width: 480px) {
    .productos-grid {
        grid-template-columns: 1fr; /* En celulares: una sola columna */
    }
}

/* Asegura que la cuadrícula se vea bien en móviles */
@media (max-width: 768px) {
    .galeria-grid {
        grid-template-columns: 1fr;
    }
}