/* ===== 1. MEJORAS GENERALES ===== */

/* Cambio: Usar un color de fondo suave para todo el body, y mejorar la tipografía */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f9f9f9; /* Fondo claro y suave */
    margin: 0; /* Elimina margen predeterminado del body */
    color: #333; /* Texto oscuro pero no negro puro, más cómodo de leer */
}

/* Cambio: Ajustar el grid global para que el main ocupe el espacio restante, no fijo */
.grid-global {
    display: grid;
    grid-template-rows: auto 1fr auto; /* header y footer ajustables, main flexible */
    min-height: 100vh; /* Ocupa toda la altura de la pantalla */
    /* Eliminamos el border sólido que daba un aspecto poco pulido */
}

/* ===== 2. HEADER ===== */

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    background-color: white; /* Fondo blanco limpio */
    box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* Sombra suave para separarlo visualmente */
    position: sticky; /* Se queda arriba al hacer scroll */
    top: 0;
    z-index: 100;
}

.logo {
    font-size: 28px;
    font-family: Georgia, serif;
    font-weight: bold;
    color: #2c3e50; /* Azul oscuro elegante en lugar de negro */
}

.menu-header {
    display: flex;
    gap: 20px; /* Aumentamos el espacio entre enlaces */
    /* Eliminamos 'row-reverse' porque invierte el orden natural (confuso) */
}

.menu-header a {
    text-decoration: none;
    color: #555; /* Gris oscuro, menos agresivo que negro */
    padding: 8px 16px;
    border-radius: 20px; /* Más redondeado = más moderno */
    transition: background-color 0.2s, color 0.2s; /* Transición suave */
}

.menu-header a:hover {
    background-color: #e0e0e0; /* Gris claro en hover */
    color: #2c3e50; /* Color del logo al hacer hover */
}

/* ===== 3. MAIN ===== */

.main {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 24px; /* Espacio entre columnas */
    padding: 24px; /* Añadimos padding al contenedor principal */
    background-color: #f9f9f9; /* Igual que el body, coherente */
}

/* ===== 3A. SECCIÓN DE NOTICIAS ===== */

.section-noticias {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background-color: white;
    border-radius: 12px; /* Bordes redondeados */
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* Sombra sutil */
    /* Eliminamos el border sólido */
}

.section-noticias h2 {
    margin-top: 0; /* Evita espacio innecesario arriba */
    color: #2c3e50;
    font-size: 22px;
}

.noticia {
    padding: 14px;
    border-left: 4px solid #3498db; /* Línea izquierda azul para destacar */
    background-color: #fafafa; /* Fondo muy claro */
    border-radius: 8px;
}

.noticia h3 {
    margin: 0 0 8px 0;
    color: #2c3e50;
}

.noticia p {
    margin: 0;
    color: #666;
}

/* ===== 3B. SECCIÓN DE PRODUCTOS ===== */

.section-productos {
    padding: 20px;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.section-productos h2 {
    margin-top: 0;
    color: #2c3e50;
    font-size: 22px;
}

.grid-productos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Mejor responsividad */
    gap: 20px; /* Más espacio entre tarjetas */
    margin-top: 16px;
}

.tarjeta-producto {
    border: 1px solid #ddd; /* Borde más claro */
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: #fff;
    transition: transform 0.2s, box-shadow 0.2s; /* Efecto al pasar el ratón */
}

.tarjeta-producto:hover {
    transform: translateY(-4px); /* Leve elevación */
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.img {
    background-color: #f0f0f0;
    height: 120px; /* Un poco más alto */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 12px;
    border-radius: 10px;
    border: none; /* Eliminamos el borde punteado (poco estético) */
}

.tarjeta-producto h3 {
    margin: 0;
    font-size: 18px;
    color: #2c3e50;
}

.tarjeta-producto p:nth-of-type(2) { /* El precio */
    font-weight: bold;
    color: #e74c3c; /* Rojo suave para precios (destaca) */
    margin: 0;
}

.tarjeta-producto button {
    background-color: #3498db; /* Azul atractivo */
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s;
}

.tarjeta-producto button:hover {
    background-color: #2980b9; /* Azul más oscuro al hacer hover */
}

/* ===== 4. FOOTER ===== */

.footer {
    background-color: #2c3e50; /* Azul oscuro elegante */
    color: white;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Eliminamos 'border-top' redundante */
}

.footer .datos p {
    margin: 0;
    line-height: 1.5;
    font-size: 14px;
}

.redes {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-direction: row; /* En horizontal en pantallas normales */
}

.footer a {
    text-decoration: none;
    color: #ecf0f1; /* Blanco más suave */
    font-weight: bold;
    padding: 6px 10px;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.footer a:hover {
    background-color: rgba(255,255,255,0.15); /* Fondo semi-transparente al hover */
}

/* ===== 5. RESPONSIVIDAD ADICIONAL ===== */

/* Cambio: En móviles, apilar las columnas del main */
@media (max-width: 768px) {
    .main {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .redes {
        flex-direction: column; /* Redes en columna en móvil */
        align-items: flex-start;
    }

    .grid-productos {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Más compacto */
    }
}