body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    color: #333;
}

header {
    text-align: center;
    padding: 20px;
    background-color: #000;
    color: #fff;
}

.colores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
}

.banner-colores {
    position: relative;
    width: 100%; /* Ocupa todo el ancho */
    height: 300px; /* Altura del banner */
    background-image: url('imagenes/Imgcoloresportada.png'); /* Imagen de fondo */
    background-size: cover; /* Asegura que la imagen cubra todo el espacio */
    background-position: center center; /* Centra la imagen */
    display: flex; /* Activa flexbox */
    align-items: center; /* Centra el contenido verticalmente */
    justify-content: center; /* Centra el contenido horizontalmente */
    border-bottom: 5px solid #ffffff; /* Borde inferior */
    overflow: hidden; /* Asegura que la imagen no se desborde */
}

.banner-colores .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-colores h1 {
    color: #fff; /* Color del texto */
    font-size: 3em; /* Tamaño del texto */
    font-weight: bold; /* Texto en negrita */
    text-transform: uppercase; /* Texto en mayúsculas */
    text-align: center; /* Centra el texto */
    z-index: 1; /* Asegura que el texto esté encima de la capa oscura */
      display: block;
}

.color {
    text-align: center;
    background-color: #333; /* Fondo oscuro para resaltar los colores */
    border: 1px solid #444; /* Borde ligeramente más claro */
    border-radius: 10px; /* Bordes redondeados */
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Sombra más intensa */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; /* Transición suave */
}

.color img {
    width: 150px; /* Ancho fijo para todas las imágenes */
    height: 150px; /* Altura fija para todas las imágenes */
    object-fit: cover; /* Asegura que la imagen se recorte proporcionalmente */
    border-radius: 5px; /* Opcional: bordes redondeados */
    margin-top: 15px; /* Espacio arriba de la imagen */
}

.color h3 {
    margin: 10px 0;
    font-size: 1.2em;
    color: #fff; /* Texto blanco para resaltar sobre el fondo oscuro */
}

.color:hover {
    transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el ratón */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.5); /* Sombra más intensa */
    background-color: #444; /* Fondo ligeramente más claro al pasar el ratón */
}
.color img {
    width: 150px; /* Ancho fijo para todas las imágenes */
    height: 150px; /* Altura fija para todas las imágenes */
    object-fit: cover; /* Asegura que la imagen se recorte proporcionalmente */
    border-radius: 5px; /* Opcional: bordes redondeados */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para dar profundidad */
    transition: transform 0.3s ease; /* Efecto suave al pasar el ratón */
    margin-top: 15px; /* Espacio arriba de la imagen */
}

.color img:hover {
    transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el ratón */
}

.redes-sociales {
    background-color: #000000; /* Fondo oscuro */
    color: #fff; /* Texto blanco */
    text-align: center;
    padding: 20px 0; /* Espaciado interno */
    margin-top: 20px; /* Espaciado superior */
}

.redes-sociales h3 {
    font-size: 1.5em; /* Tamaño del texto */
    margin-bottom: 15px; /* Espaciado debajo del título */
}

.iconos-redes {
    display: flex;
    justify-content: center; /* Centra los íconos horizontalmente */
    gap: 20px; /* Espaciado entre los íconos */
}

.iconos-redes a {
    display: inline-block;
    width: 50px; /* Tamaño del ícono */
    height: 50px;
    transition: transform 0.3s ease; /* Efecto suave al pasar el ratón */
}

.iconos-redes a img {
    width: 100%; /* Ajusta la imagen al contenedor */
    height: 100%;
    object-fit: cover; /* Asegura que la imagen no se deforme */
    border-radius: 50%; /* Hace los íconos circulares */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Sombra para dar profundidad */
}

.iconos-redes a:hover {
    transform: scale(1.1); /* Aumenta ligeramente el tamaño al pasar el ratón */
}

.galeria-ejemplo-laminado {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
}

.ejemplo-laminado {
    text-align: center;
    background-color: #333;
    border: 1px solid #444;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
}

@media (max-width: 600px) {
    .banner-colores h1 {
        font-size: 2.5em;    /* Tamaño más pequeño y legible */
        padding: 10px 10px;     /* Espacio a los lados para que no se corte */
        line-height: 1.2;
    }
}