body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.banner-productos {
    position: relative;
    width: 100%; /* Ocupa todo el ancho */
    height: 300px; /* Altura del banner */
    background-image: url('imagenes/imgproductosinicio.png'); /* Imagen de fondo */
    background-size: cover; /* Asegura que la imagen cubra todo el espacio */
    background-position: center; /* Centra la imagen */
    display: flex; /* Activa flexbox */
    align-items: center; /* Centra el contenido verticalmente */
    justify-content: center; /* Centra el contenido horizontalmente */
    background-attachment: scroll;
    overflow: hidden;
}

.banner-productos .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(58, 57, 57, 0.5); /* Capa oscura semitransparente */
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-productos 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 */
}


/* Estilos para la galería */
#productos-canteras {
    padding: 20px;
    background-color: #f9f9f9; /* Fondo claro */
}

.productos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Diseño responsivo */
    gap: 20px; /* Espaciado entre los productos */
}

.producto {
    width: 300px; /* Ancho fijo para los recuadros */
    height: 400px; /* Altura fija para los recuadros */
    border: 1px solid #ddd; /* Borde del producto */
    border-radius: 10px; /* Bordes redondeados */
    overflow: hidden; /* Asegura que el contenido no se desborde */
    text-align: center; /* Centra el contenido */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra ligera */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efecto al pasar el mouse */
    display: flex; /* Activa flexbox */
    flex-direction: column; /* Alinea los elementos verticalmente */
    justify-content: space-between; /* Distribuye el contenido uniformemente */
}

.producto img {
    width: 100%; /* Imagen ocupa todo el ancho del recuadro */
    height: 70%; /* Ajusta la altura de la imagen */
    object-fit: cover; /* Asegura que la imagen se recorte proporcionalmente */
}

.producto .info {
    height: 30%; /* Espacio reservado para el texto */
    padding: 10px; /* Espaciado interno */
    display: flex; /* Activa flexbox */
    flex-direction: column; /* Alinea el texto verticalmente */
    justify-content: center; /* Centra el texto verticalmente */
}

.producto h3 {
    font-size: 1.2em; /* Tamaño del título */
    margin-bottom: 5px; /* Espaciado debajo del título */
}

.producto p {
    font-size: 0.9em; /* Tamaño del texto */
    line-height: 1.4; /* Espaciado entre líneas */
    color: #555; /* Color del texto */
}



/* Estilos responsivos */
@media (max-width: 1200px) {
    .productos-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Ajusta las columnas para pantallas medianas */
        gap: 30px; /* Espaciado reducido para pantallas medianas */
    }
}

@media (max-width: 768px) {
    .productos-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Ajusta las columnas para pantallas pequeñas */
        gap: 20px; /* Espaciado reducido para pantallas pequeñas */
    }
}

@media (max-width: 480px) {
    .productos-grid {
        grid-template-columns: 1fr; /* Una sola columna para pantallas muy pequeñas */
        gap: 15px; /* Espaciado reducido para pantallas muy pequeñas */
    }
}

.redes-sociales {
    display: flex; /* Organiza los íconos en línea horizontal */
    justify-content: center; /* Centra los íconos horizontalmente */
    align-items: center; /* Alinea los íconos verticalmente */
    gap: 20px; /* Espaciado entre los íconos */
    margin-bottom: 10px; /* Espaciado debajo de las redes sociales */
}

.redes-sociales .icono {
    display: inline-block;
    width: 40px; /* Tamaño del ícono */
    height: 40px;
    transition: transform 0.3s ease; /* Efecto suave al pasar el mouse */
}

.redes-sociales .icono img {
    width: 100%; /* Asegura que la imagen ocupe todo el contenedor */
    height: 100%;
    object-fit: cover; /* Ajusta la imagen al contenedor */
    border-radius: 50%; /* Hace los íconos circulares */
}

.redes-sociales .icono:hover {
    transform: scale(1.1); /* Aumenta ligeramente el tamaño al pasar el mouse */
}

footer {
    background-color: var(--fondo-header); /* Color de fondo del footer */
    color: var(--texto-header); /* Color del texto */
    text-align: center;
    padding: 20px 0; /* Espaciado interno */
    margin-top: 20px;
}

:root {
    --texto-principal: #333; /* Texto oscuro */
    --fondo-header: #000000; /* Fondo del header */
    --texto-header: #fff; /* Texto del header */
    --borde-producto: #ddd; /* Bordes de los productos */
    --sombra-producto: rgba(0, 0, 0, 0.1); /* Sombra de los productos */
}

.whatsapp-float {
    position: fixed; /* Fija el botón en la pantalla */
    bottom: 20px; /* Distancia desde la parte inferior */
    right: 20px; /* Distancia desde la parte derecha */
    display: flex; /* Organiza el ícono y el texto en línea */
    align-items: center; /* Alinea verticalmente el ícono y el texto */
    background-color: #25d366; /* Color de fondo de WhatsApp */
    color: #fff; /* Color del texto */
    padding: 8px 12px; /* Espaciado interno reducido */
    border-radius: 50px; /* Bordes redondeados */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Sombra para dar profundidad */
    text-decoration: none; /* Quita el subrayado */
    font-size: 0.9em; /* Tamaño del texto reducido */
    font-weight: bold; /* Texto en negrita */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición suave */
    z-index: 1000; /* Asegura que el botón esté por encima de otros elementos */
}

.whatsapp-float svg {
    height: 30px; /* Reduce la altura del ícono */
    width: 30px; /* Reduce el ancho del ícono */
}

.whatsapp-float span {
    font-family: Arial, sans-serif; /* Fuente igual que el footer */
    font-size: 0.9em; /* Tamaño del texto */
    color: #FFFFFF; /* Color blanco */
    font-weight: normal; /* Peso del texto */
    margin-left: 10px; /* Espaciado entre el ícono y el texto */
    text-align: center; /* Alineación del texto */
}
.whatsapp-float:hover {
    transform: scale(1.1); /* Aumenta ligeramente el tamaño al pasar el mouse */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3); /* Sombra más intensa */
}
@media (max-width: 450px) {
    .whatsapp-float {
        padding: 8px; /* Reduce el espaciado interno */
        justify-content: center; /* Centra el ícono */
    }

    .whatsapp-float span {
        display: none; /* Oculta el texto */
    }

    .whatsapp-float svg {
        height: 40px; /* Ajusta el tamaño del ícono */
        width: 40px;
    }
}

.producto {
    position: relative; /* Necesario para posicionar el botón dentro del contenedor */
    overflow: hidden; /* Asegura que el contenido no se desborde */
}

.btn-ver-colores {
    position: absolute; /* Posiciona el botón dentro del contenedor */
    top: 50%; /* Centra verticalmente */
    left: 50%; /* Centra horizontalmente */
    transform: translate(-50%, -50%); /* Ajusta el centrado */
    background-color: #833c26; /* Color de fondo del botón (contraste naranja) */
    color: #fff; /* Color del texto */
    padding: 10px 20px; /* Espaciado interno */
    border-radius: 5px; /* Bordes redondeados */
    text-decoration: none; /* Quita el subrayado */
    font-size: 1em; /* Tamaño del texto */
    font-weight: bold; /* Texto en negrita */
    opacity: 0; /* Oculta el botón inicialmente */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Transición suave para mostrar/ocultar */
    pointer-events: none; /* Desactiva el botón cuando está oculto */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Sombra para dar profundidad */
}

.producto:hover .btn-ver-colores {
    opacity: 1; /* Muestra el botón al pasar el ratón */
    pointer-events: auto; /* Activa el botón cuando es visible */
    transform: translate(-50%, -50%) scale(1.1); /* Aumenta ligeramente el tamaño del botón */
}

.producto {
    position: relative; /* Necesario para posicionar el botón dentro del contenedor */
    overflow: hidden; /* Asegura que el contenido no se desborde */
}

.btn-ver-laminados {
    position: absolute; /* Posiciona el botón dentro del contenedor */
    top: 50%; /* Centra verticalmente */
    left: 50%; /* Centra horizontalmente */
    transform: translate(-50%, -50%); /* Ajusta el centrado */
    background-color: #833c26; /* Color de fondo del botón */
    color: #fff; /* Color del texto */
    padding: 10px 20px; /* Espaciado interno */
    border-radius: 5px; /* Bordes redondeados */
    text-decoration: none; /* Quita el subrayado */
    font-size: 1em; /* Tamaño del texto */
    font-weight: bold; /* Texto en negrita */
    opacity: 0; /* Oculta el botón inicialmente */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Transición suave para mostrar/ocultar */
    pointer-events: none; /* Desactiva el botón cuando está oculto */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Sombra para dar profundidad */
}

.producto:hover .btn-ver-laminados {
    opacity: 1; /* Muestra el botón al pasar el ratón */
    pointer-events: auto; /* Activa el botón cuando es visible */
    transform: translate(-50%, -50%) scale(1.1); /* Aumenta ligeramente el tamaño del botón */
}

.producto {
    position: relative; /* Necesario para posicionar el botón dentro del contenedor */
    overflow: hidden; /* Asegura que el contenido no se desborde */
}

.btn-ver-columnas {
    position: absolute; /* Posiciona el botón dentro del contenedor */
    top: 50%; /* Centra verticalmente */
    left: 50%; /* Centra horizontalmente */
    transform: translate(-50%, -50%); /* Ajusta el centrado */
    background-color: #833c26; /* Color de fondo del botón */
    color: #fff; /* Color del texto */
    padding: 10px 20px; /* Espaciado interno */
    border-radius: 5px; /* Bordes redondeados */
    text-decoration: none; /* Quita el subrayado */
    font-size: 1em; /* Tamaño del texto */
    font-weight: bold; /* Texto en negrita */
    opacity: 0; /* Oculta el botón inicialmente */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Transición suave para mostrar/ocultar */
    pointer-events: none; /* Desactiva el botón cuando está oculto */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Sombra para dar profundidad */
}

.producto:hover .btn-ver-columnas {
    opacity: 1; /* Muestra el botón al pasar el ratón */
    pointer-events: auto; /* Activa el botón cuando es visible */
    transform: translate(-50%, -50%) scale(1.1); /* Aumenta ligeramente el tamaño del botón */
}

.producto {
    position: relative; /* Necesario para posicionar el botón dentro del contenedor */
    overflow: hidden; /* Asegura que el contenido no se desborde */
}

.btn-ver-cornisas {
    position: absolute; /* Posiciona el botón dentro del contenedor */
    top: 50%; /* Centra verticalmente */
    left: 50%; /* Centra horizontalmente */
    transform: translate(-50%, -50%); /* Ajusta el centrado */
    background-color: #833c26; /* Color de fondo del botón */
    color: #fff; /* Color del texto */
    padding: 10px 20px; /* Espaciado interno */
    border-radius: 5px; /* Bordes redondeados */
    text-decoration: none; /* Quita el subrayado */
    font-size: 1em; /* Tamaño del texto */
    font-weight: bold; /* Texto en negrita */
    opacity: 0; /* Oculta el botón inicialmente */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Transición suave para mostrar/ocultar */
    pointer-events: none; /* Desactiva el botón cuando está oculto */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Sombra para dar profundidad */
}

.producto:hover .btn-ver-cornisas {
    opacity: 1; /* Muestra el botón al pasar el ratón */
    pointer-events: auto; /* Activa el botón cuando es visible */
    transform: translate(-50%, -50%) scale(1.1); /* Aumenta ligeramente el tamaño del botón */
}

.producto {
    position: relative; /* Necesario para posicionar el botón dentro del contenedor */
    overflow: hidden; /* Asegura que el contenido no se desborde */
}

.btn-ver-marcos {
    position: absolute; /* Posiciona el botón dentro del contenedor */
    top: 50%; /* Centra verticalmente */
    left: 50%; /* Centra horizontalmente */
    transform: translate(-50%, -50%); /* Ajusta el centrado */
    background-color: #833c26; /* Color de fondo del botón */
    color: #fff; /* Color del texto */
    padding: 10px 20px; /* Espaciado interno */
    border-radius: 5px; /* Bordes redondeados */
    text-decoration: none; /* Quita el subrayado */
    font-size: 1em; /* Tamaño del texto */
    font-weight: bold; /* Texto en negrita */
    opacity: 0; /* Oculta el botón inicialmente */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Transición suave para mostrar/ocultar */
    pointer-events: none; /* Desactiva el botón cuando está oculto */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Sombra para dar profundidad */
}

.producto:hover .btn-ver-marcos {
    opacity: 1; /* Muestra el botón al pasar el ratón */
    pointer-events: auto; /* Activa el botón cuando es visible */
    transform: translate(-50%, -50%) scale(1.1); /* Aumenta ligeramente el tamaño del botón */
}

.producto {
    position: relative; /* Necesario para posicionar el botón dentro del contenedor */
    overflow: hidden; /* Asegura que el contenido no se desborde */
}

.btn-ver-gargolas {
    position: absolute; /* Posiciona el botón dentro del contenedor */
    top: 50%; /* Centra verticalmente */
    left: 50%; /* Centra horizontalmente */
    transform: translate(-50%, -50%); /* Ajusta el centrado */
    background-color: #833c26; /* Color de fondo del botón */
    color: #fff; /* Color del texto */
    padding: 10px 20px; /* Espaciado interno */
    border-radius: 5px; /* Bordes redondeados */
    text-decoration: none; /* Quita el subrayado */
    font-size: 1em; /* Tamaño del texto */
    font-weight: bold; /* Texto en negrita */
    opacity: 0; /* Oculta el botón inicialmente */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Transición suave para mostrar/ocultar */
    pointer-events: none; /* Desactiva el botón cuando está oculto */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Sombra para dar profundidad */
}

.producto:hover .btn-ver-gargolas {
    opacity: 1; /* Muestra el botón al pasar el ratón */
    pointer-events: auto; /* Activa el botón cuando es visible */
    transform: translate(-50%, -50%) scale(1.1); /* Aumenta ligeramente el tamaño del botón */
}

.producto {
    position: relative; /* Necesario para posicionar el botón dentro del contenedor */
    overflow: hidden; /* Asegura que el contenido no se desborde */
}

.btn-ver-escalones {
    position: absolute; /* Posiciona el botón dentro del contenedor */
    top: 50%; /* Centra verticalmente */
    left: 50%; /* Centra horizontalmente */
    transform: translate(-50%, -50%); /* Ajusta el centrado */
    background-color: #833c26; /* Color de fondo del botón */
    color: #fff; /* Color del texto */
    padding: 10px 20px; /* Espaciado interno */
    border-radius: 5px; /* Bordes redondeados */
    text-decoration: none; /* Quita el subrayado */
    font-size: 1em; /* Tamaño del texto */
    font-weight: bold; /* Texto en negrita */
    opacity: 0; /* Oculta el botón inicialmente */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Transición suave para mostrar/ocultar */
    pointer-events: none; /* Desactiva el botón cuando está oculto */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Sombra para dar profundidad */
}

.producto:hover .btn-ver-escalones {
    opacity: 1; /* Muestra el botón al pasar el ratón */
    pointer-events: auto; /* Activa el botón cuando es visible */
    transform: translate(-50%, -50%) scale(1.1); /* Aumenta ligeramente el tamaño del botón */
}

.producto {
    position: relative; /* Necesario para posicionar el botón dentro del contenedor */
    overflow: hidden; /* Asegura que el contenido no se desborde */
}

.btn-ver-fuentes {
    position: absolute; /* Posiciona el botón dentro del contenedor */
    top: 50%; /* Centra verticalmente */
    left: 50%; /* Centra horizontalmente */
    transform: translate(-50%, -50%); /* Ajusta el centrado */
    background-color: #833c26; /* Color de fondo del botón */
    color: #fff; /* Color del texto */
    padding: 10px 20px; /* Espaciado interno */
    border-radius: 5px; /* Bordes redondeados */
    text-decoration: none; /* Quita el subrayado */
    font-size: 1em; /* Tamaño del texto */
    font-weight: bold; /* Texto en negrita */
    opacity: 0; /* Oculta el botón inicialmente */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Transición suave para mostrar/ocultar */
    pointer-events: none; /* Desactiva el botón cuando está oculto */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Sombra para dar profundidad */
}

.producto:hover .btn-ver-fuentes {
    opacity: 1; /* Muestra el botón al pasar el ratón */
    pointer-events: auto; /* Activa el botón cuando es visible */
    transform: translate(-50%, -50%) scale(1.1); /* Aumenta ligeramente el tamaño del botón */
}
.producto {
    position: relative; /* Necesario para posicionar el botón dentro del contenedor */
    overflow: hidden; /* Asegura que el contenido no se desborde */
}

.btn-ver-chimeneas {
    position: absolute; /* Posiciona el botón dentro del contenedor */
    top: 50%; /* Centra verticalmente */
    left: 50%; /* Centra horizontalmente */
    transform: translate(-50%, -50%); /* Ajusta el centrado */
    background-color: #833c26; /* Color de fondo del botón */
    color: #fff; /* Color del texto */
    padding: 10px 20px; /* Espaciado interno */
    border-radius: 5px; /* Bordes redondeados */
    text-decoration: none; /* Quita el subrayado */
    font-size: 1em; /* Tamaño del texto */
    font-weight: bold; /* Texto en negrita */
    opacity: 0; /* Oculta el botón inicialmente */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Transición suave para mostrar/ocultar */
    pointer-events: none; /* Desactiva el botón cuando está oculto */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Sombra para dar profundidad */
}

.producto:hover .btn-ver-chimeneas {
    opacity: 1; /* Muestra el botón al pasar el ratón */
    pointer-events: auto; /* Activa el botón cuando es visible */
    transform: translate(-50%, -50%) scale(1.1); /* Aumenta ligeramente el tamaño del botón */
}
.producto {
    position: relative; /* Necesario para posicionar el botón dentro del contenedor */
    overflow: hidden; /* Asegura que el contenido no se desborde */
}

.btn-ver-balaustrados {
    position: absolute; /* Posiciona el botón dentro del contenedor */
    top: 50%; /* Centra verticalmente */
    left: 50%; /* Centra horizontalmente */
    transform: translate(-50%, -50%); /* Ajusta el centrado */
    background-color: #833c26; /* Color de fondo del botón */
    color: #fff; /* Color del texto */
    padding: 10px 20px; /* Espaciado interno */
    border-radius: 5px; /* Bordes redondeados */
    text-decoration: none; /* Quita el subrayado */
    font-size: 1em; /* Tamaño del texto */
    font-weight: bold; /* Texto en negrita */
    opacity: 0; /* Oculta el botón inicialmente */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Transición suave para mostrar/ocultar */
    pointer-events: none; /* Desactiva el botón cuando está oculto */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Sombra para dar profundidad */
}

.producto:hover .btn-ver-balaustrados {
    opacity: 1; /* Muestra el botón al pasar el ratón */
    pointer-events: auto; /* Activa el botón cuando es visible */
    transform: translate(-50%, -50%) scale(1.1); /* Aumenta ligeramente el tamaño del botón */
}

.producto {
    position: relative; /* Necesario para posicionar el botón dentro del contenedor */
    overflow: hidden; /* Asegura que el contenido no se desborde */
}

.btn-ver-cantermuro {
    position: absolute; /* Posiciona el botón dentro del contenedor */
    top: 50%; /* Centra verticalmente */
    left: 50%; /* Centra horizontalmente */
    transform: translate(-50%, -50%); /* Ajusta el centrado */
    background-color: #833c26; /* Color de fondo del botón */
    color: #fff; /* Color del texto */
    padding: 10px 20px; /* Espaciado interno */
    border-radius: 5px; /* Bordes redondeados */
    text-decoration: none; /* Quita el subrayado */
    font-size: 1em; /* Tamaño del texto */
    font-weight: bold; /* Texto en negrita */
    opacity: 0; /* Oculta el botón inicialmente */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Transición suave para mostrar/ocultar */
    pointer-events: none; /* Desactiva el botón cuando está oculto */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Sombra para dar profundidad */
}

.producto:hover .btn-ver-cantermuro {
    opacity: 1; /* Muestra el botón al pasar el ratón */
    pointer-events: auto; /* Activa el botón cuando es visible */
    transform: translate(-50%, -50%) scale(1.1); /* Aumenta ligeramente el tamaño del botón */
}