/* ===== RESET ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===== VARIABLES CSS ===== */
:root {
    --color-primario: #ff4c4c;
    --color-secundario: #333333;
    --fondo-pagina: #f5f5f5;
    --fondo-tarjeta: #ffffff;
    --color-precio: #ff4c4c;
    --fuente-titulo: 'Roboto', sans-serif;
    --fuente-texto: 'Open Sans', sans-serif;
}

/* ===== GOOGLE FONTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&family=Open+Sans&display=swap');

/* ===== ESTILO GENERAL ===== */
body {
    font-family: var(--fuente-texto);
    background-color: var(--fondo-pagina);
    color: var(--color-secundario);
    line-height: 1.6;
}

/* ===== HEADER ===== */
header {
    text-align: center;
    margin-bottom: 20px;
}

header h1 {
    font-family: var(--fuente-titulo);
    color: var(--color-primario);
    margin-bottom: 10px;
}

/* ===== NAV ===== */
nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

nav li,
#listaFooter li a,
footer address a {
    cursor: pointer;
    font-weight: bold;
    transition: color 0.3s;
}

nav li:hover,
#listaFooter li a:hover,
footer address a:hover {
    color: var(--color-primario);
}

/* ===== BANNER ===== */
header + img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: cover;
    object-position: center;
    margin-bottom: 30px;
}

/* ===== SECCION PRODUCTOS ===== */
#productos h2,
.tarjeta-producto h3,
#nosotros h2,
footer h1 {
    font-family: var(--fuente-titulo);
}

/* Título ocupa todo el ancho y centrado */
#productos h2 {
    text-align: center;
    width: 100%;        /* fuerza a ocupar toda la fila */
    margin-bottom: 30px;
}

#productos {
    display: flex;
    flex-wrap: wrap;       /* permite que las tarjetas bajen de fila */
    justify-content: center;
    gap: 20px;             /* espacio entre tarjetas */
    padding: 0 10px;       /* margen interno */
}

/* Tarjetas: 3 por fila en pantallas grandes */
.tarjeta-producto {
    flex: 1 1 30%;
    max-width: 350px;
    background-color: var(--fondo-tarjeta);
    padding: 15px;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    cursor: pointer;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s, border 0.3s;
}

.tarjeta-producto img {
    width: 60%;
    height: auto;
    max-height: 200px;
    object-fit: cover;
    border-radius: 50%;
    border: 5px solid var(--color-secundario);
    display: block;
    margin: 0 auto 20px auto;
}

.tarjeta-producto:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    border: 2px solid var(--color-primario);
}

.tarjeta-producto h3 {
    margin-bottom: 5px;
    color: var(--color-secundario);
}

.tarjeta-producto p {
    margin-bottom: 10px;
}

.tarjeta-producto .precio {
    color: var(--color-precio);
    font-weight: bold;
    font-size: 1.2em;
}

.tarjeta-producto figcaption {
    text-align: center;
    margin-top: 5px;
    font-style: italic;
}

/* ===== SECCION NOSOTROS ===== */
#nosotros {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 40px auto;
    margin-bottom: 15px;
    padding: 40px;
    background-color: var(--color-secundario);
    color: var(--fondo-pagina);
    max-width: 100%;
}

#nosotros h2 {
    margin-bottom: 30px;
}

#nosotros #descripcion p {
    max-width: 700px;
    margin: 0 auto 25px auto;
}

#nosotros img {
    margin-top: 20px;
    width: 80px;
    height: auto;
}

/* ===== FOOTER ===== */
footer {
    text-align: center;
    border-radius: 10px;
}

footer address {
    font-style: normal;
    color: var(--color-secundario);
}

#listaFooter ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
    padding: 15px;
    background-color: var(--color-primario);
    border-radius: 10px;
}

#listaFooter a {
    background-color: var(--fondo-pagina);
    border-radius: 12%;
    padding: 10px 15px;
    text-decoration: none;
    color: var(--color-secundario);
    font-weight: bold;
}

/* ===== MEDIA QUERIES ===== */

/* Escritorio grande: 4 tarjetas por fila */
@media screen and (min-width: 1200px) {
    .tarjeta-producto {
        max-width: 23%;
    }
}

/* Tablets / pantallas medianas: 2 tarjetas por fila */
@media screen and (max-width: 992px) {
    .tarjeta-producto {
        flex: 0 1 calc(50% - 20px);
        max-width: 45%;
    }

    #nosotros {
        padding: 30px;
    }

    #nosotros img {
        width: 60px;
    }
}

/* Móviles grandes */
@media screen and (max-width: 768px) {
    .tarjeta-producto {
        max-width: 60%;
    }
}

/* Móviles pequeños */
@media screen and (max-width: 600px) {
    .tarjeta-producto {
        max-width: 90%;
    }

    #nosotros {
        padding: 20px;
    }

    #nosotros #descripcion p {
        font-size: 0.95rem;
    }

    #nosotros img {
        width: 50px;
    }
}

/* Extra pequeño / móviles muy pequeños */
@media screen and (max-width: 400px) {
    nav ul {
        gap: 10px;
    }

    #listaFooter ul {
        gap: 10px;
        padding: 10px;
    }

    .tarjeta-producto img {
        width: 50%;
    }
}