/*
    Estilos Apartados - Aca van todas las pestañas que usamos xd
*/

.catalogo {
    display: grid; 
    gap: 30px;            /* Espacio entre elementos */
    padding: 20px;        /* Espaciado interno */
    max-width: 1200px;    
    margin: 0 auto; /* Centrado automático */
}

/* Apartado de las columnas /AC/ */
.cata-accesorios {
    grid-template-columns: repeat(3, 1fr)
}
.cata-velocity{
    grid-template-columns: 1fr;
}
.cata-velocity .producto img {
    max-height: 450px;
}
.cata-tacos, .cata-equipacion {
    grid-template-columns: repeat(4, 1fr); 
}
/* ========================
   PRODUCTO
======================== */
/* Estilos para cada tarjeta de producto */
.producto {
    background-color: #ffffff; /* Fondo blanco */
    border-radius: 10px; /* Bordes redondeados */
    overflow: hidden; /* Oculta desbordamiento */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Sombra sutil */
    display: flex; /* Flexbox */
    flex-direction: column; /* Elementos en columna */
}

/* Imágenes de los productos */
.producto img {
    width: 100%; /* Ancho completo */
    height: auto; /* Altura automática */
    max-height: 250px; /* Limita el tamaño máximo de la imagen */
    object-fit: cover; /* Mantiene proporción, recorta si es necesario */
    display: block; /* Bloque */
    transition: transform 0.4s ease; /* Transición suave */
}

/* Efecto zoom en la imagen al pasar el mouse */
.producto:hover img {
    transform: scale(1.08); /* Escala al 108% */
}

/* Contenedor de información del producto */
.informacion {
    padding: 20px; /* Espaciado interno */
    background-color: #90a9b8; /* Fondo gris */
    flex-grow: 1; /* Ocupa espacio disponible */
    display: flex; /* Flexbox */
    flex-direction: column; /* Elementos en columna */
    justify-content: space-between; /* Espaciado entre elementos */
    transition: background-color 0.4s ease; /* Transición suave */
}

/* Cambio de color de fondo al pasar el mouse sobre el producto */
.producto:hover .informacion {
    background-color: #9aadd1; /* Fondo rosado */
}

/* Títulos de los productos */
.informacion h3 {
    margin: 0 0 10px 0; /* Márgenes */
    font-family: Arial, sans-serif; /* Fuente */
    font-size: 1.4rem; /* Tamaño */
    color: #222222; /* Color oscuro */
    text-transform: uppercase; /* Mayúsculas */
    letter-spacing: 1px; /* Espaciado entre letras */
}

/* Descripciones de los productos */
.informacion p {
    font-family: Arial, sans-serif; /* Fuente */
    color: #555555; /* Color gris */
    line-height: 1.5; /* Altura de línea */
    margin-bottom: 15px; /* Margen inferior */
    font-size: 0.95rem; /* Tamaño */
}

/* Precios de los productos */
.precio .dinero {
    font-weight: bold; /* Negrita */
    color: #e63946; /* Color rojo */
    font-size: 1.2rem; /* Tamaño */
    margin: 0; /* Sin márgenes */
}

/* Botón para ver producto detallado */
.btn-ver-producto {
    background: #0057A8; /* Fondo rojo */
    color: white; /* Texto blanco */
    border: none; /* Sin borde */
    padding: 10px 15px; /* Espaciado interno */
    border-radius: 5px; /* Bordes redondeados */
    cursor: pointer; /* Cursor de mano */
    font-size: 0.9rem; /* Tamaño de fuente */
    font-weight: bold; /* Negrita */
    margin-top: 10px; /* Margen superior */
    width: 100%; /* Ancho completo */
    transition: background 0.3s; /* Transición suave */
}

.btn-ver-producto:hover {
    background: #0011ff; /* Fondo más oscuro al pasar mouse */
}

/* ========================
   TÍTULO PRINCIPAL
======================== */
#intro header {
    text-align: center;
    padding: 40px 20px;
    max-width: 800px;
    margin: 0 auto;
}

#intro h2 {
    font-family: 'Arial Black', sans-serif;
    font-size: 3rem;
    color: #bbd2e7;
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: -1px;
    position: relative;
    display: inline-block;
}

#intro h2::after {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    background-color: #006eff;
    margin: 10px auto 0;
    border-radius: 2px;
}

#descripcion {
    font-size: 1.2rem;
    color: #666;
    font-style: italic;
    margin-top: 15px;
}

/* ========================
   ¨Para el responsivo tilin
======================== */

/* TABLET */
@media (max-width: 768px) {

    .cata-tacos {
        grid-template-columns: repeat(1, 1fr);
    }

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

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

    #intro h2 {
        font-size: 2rem;
    }

    #descripcion {
        font-size: 1rem;
    }

    .producto img {
        max-height: 280px;
    }
}

/* CELULAR */
@media (max-width: 480px) {

    .cata-tacos,
    .cata-accesorios,
    .cata-velocity,
    .cata-equipacion {
        grid-template-columns: repeat(1, 1fr);
    }

    .catalogo {
        gap: 15px;
        padding: 10px;
    }

    .producto img {
        max-height: 300px;
    }

    .informacion h3 {
        font-size: 1.1rem;
    }

    .informacion p {
        font-size: 0.85rem;
    }

    #intro h2 {
        font-size: 1.6rem;
    }

    #descripcion {
        font-size: 0.9rem;
    }
}

/* ========================
   BOTÓN VOLVER A INICIO
======================== */

.contenedor-boton-volver {
    max-width: 1200px; /* Ancho máximo */
    margin: 40px auto; /* Centrado horizontal con margen */
    padding: 20px; /* Espaciado interno */
    text-align: center; /* Centrado del contenido */
}

.btn-volver-inicio {
    display: inline-block; /* Comportamiento de bloque alineado */
    background: #E60000; /* Fondo rojo */
    color: white; /* Texto blanco */
    text-decoration: none; /* Sin subrayado */
    padding: 12px 30px; /* Espaciado interno */
    border-radius: 5px; /* Bordes redondeados */
    font-size: 1.1rem; /* Tamaño de fuente */
    font-weight: bold; /* Texto en negrita */
    transition: background 0.3s, transform 0.2s; /* Transiciones suave */
    border: 2px solid #E60000; /* Borde rojo */
}

.btn-volver-inicio:hover {
    background: #cc0000; /* Rojo más oscuro */
    border-color: #cc0000; /* Borde rojo oscuro */
    transform: scale(1.05); /* Efecto de zoom */
}