/* Variables de color y tipografía */
:root {
    --color-dark: #0F0F0F; /* Negro */
    --color-accent-gold: #A88B5E; /* Dorado */
    --color-light-beige: #F5F5DC; /* Beige claro (Nuevo color de fondo de bloque) */
    --color-deep-green: #1C4535; /* Verde Oscuro (Tu variable de fondo) */
    --color-maroon: #800020; /* Granate */

    --font-serif: 'Playfair Display', serif; 
    --font-sans: 'Raleway', sans-serif; 
}

/* --- Estilos Generales --- */
body {
      /* Asegura que el contenido empiece después del navbar y termine antes del footer */
            padding-top: 80px; 
            padding-bottom: 80px;
            /* Se añade un color de fondo general para la página */
            background-color: #f0f0d4; 
            min-height: 100vh;

}

.menu-page {
     max-width: 1200px;
            margin: 0 auto; /* Centra el contenido */
            padding: 20px;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- Navegación (Navbar) --- */
.navbar {
    position: fixed; /* Mejor fixed para el navbar */
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 40px;
    background-color: rgba(15, 15, 15, 0.9); /* Ligeramente más opaco para mejor contraste */
    color: var(--color-light-beige);
    z-index: 1000;
}

/* 🍝 Ajuste del Logo 🍝 */
.logo-img {
    height: 60px; 
    margin-right: 20px; 
}

.navbar nav a {
    color: var(--color-light-beige);
    text-decoration: none;
    margin-left: 20px;
    font-size: 0.9em;
    font-weight: 600;
    padding: 5px 0;
    border-bottom: 3px solid transparent;
    transition: border-bottom 0.3s ease, color 0.3s ease;
}

.navbar nav a.active {
    color: var(--color-accent-gold);
    border-bottom: 3px solid var(--color-accent-gold);
}




/* --- 2. Introducción --- */
.conocenos-section {
    color: var(--color-dark);
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.conocenos-container {
    max-width: 900px;
    text-align: center;
    width: 100%; 
}

.conocenos-section .title {
    font-family: var(--font-serif);
    font-size: 50px;
    text-align: center;
    margin: 30px;
    color: var(--color-dark);
    position: relative;
    display: inline-block;
}

.conocenos-section .title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    width: 200px;
    height: 2px;
    background-color: var(--color-accent-gold);
}

.conocenos-section h4{
     font-style: italic;
    font-family: var(--font-sans);
    font-size: 40px;
    text-align: center;
    margin-bottom: 40px;
    font-size: medium;
    color: var(--color-dark);
    position: relative;
    display: inline-block;
}


/* --- 3. Sección de Menú --- */
.menu-section {
    padding: 0 10px 10px;
}

.section-title {
    text-align: center;
    font-size: 40px;
    margin: 30px 0;
    font-weight: 700;
    text-decoration: underline;
}

/* Contenedor de cada item del menú *//* ==================================================== */
/* === AJUSTE DE ESTILOS PARA LA CARTA === */
/* ==================================================== */

.menu-item {
 display: flex;
 /* Usamos el fondo blanco como en la imagen que quieres recrear. */
 background-color: white; 
 align-items: flex-start; /* Alinea los elementos en la parte superior del contenedor */
 margin-bottom: 30px;
 /* Añadimos padding al contenedor principal para separar el contenido del borde blanco */
    padding: 20px; 
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
    border-radius: 5px; /* Pequeño radio para un toque moderno */
}

/* --- Estilo de la Imagen (Izquierda) --- */
.item-image {
    /* La imagen debe ser el elemento más pequeño, lo ajustamos a 35% del contenedor */
 flex: 0 0 50%; /* No crecer, no encoger, base 35% */
 max-width: 50%; 
    margin-right: 30px; /* Espacio a la derecha del bloque de imagen */
 overflow: hidden;
    /* Redondeamos las esquinas de la imagen para que coincida con el diseño moderno */
    border-radius: 5px; 
}

.item-image img {
 width: 700px;
 height: 300px; /* Altura fija para mantener la consistencia entre platos */
 object-fit: cover; 
}

/* --- Estilo de los Detalles del Texto (Derecha) --- */
.item-details {
    /* Los detalles deben ocupar el espacio restante */
 flex: 1; 
    padding: 10px 0; /* Pequeño padding vertical */
}

.item-details h3 {
    /* 1. Más grande: Aumentamos la fuente */
 font-size: 35px;
 font-family: var(--font-serif);
    /* 2. Centrado y arriba: Eliminamos la decoración para recrear el estilo de la imagen */
 text-decoration: underline;/* Quitamos el underline */
    margin-top: 0px;
    margin-bottom: 20px;
    color: var(--color-dark);
}

.item-details p {
    /* 3. El texto "también centrado" es ambiguo, pero para una descripción de plato, 
       usualmente se justifica (alinea izquierda y derecha) o se alinea a la izquierda.
       Para que el precio esté a la derecha, debe estar en un contenedor Flex/Grid. */
 font-size: 25px;
 color: var(--color-dark);
  text-align: justify; /* Mantenemos una alineación de bloque justificada */
 margin: 0 0 15px;
}

/* Estilos de la fila de Precio y Alérgenos */

.price {
 font-size: 35px; 
 font-weight: 700;
 color: var(--color-maroon);
    font-family: var(--font-serif);
}


/* AJUSTE PARA MÓVILES (Si se usa media query) */
@media (max-width: 768px) {
    .menu-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 15px;
    }

    .item-image {
        flex: 0 0 100%;
        max-width: 100%;
        margin-right: 0;
        margin-bottom: 15px;
    }

    .item-image img {
        height: auto; 
    }

    .item-details {
        width: 100%;
        padding: 0;
    }

    .item-details p {
        text-align: center;
    }

    .price-row {
        justify-content: center; /* Centramos el precio en móviles */
    }
}

/* ---------------------------------------------------- */
/* FOOTER PRINCIPAL (ABAJO) */
/* ---------------------------------------------------- */

.main-footer {
    position: fixed; 
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--color-deep-green); 
    color: var(--color-light-beige);
    padding: 20px 40px; 
    font-family: var(--font-sans);
    z-index: 999; 
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px; 
    margin: 0 auto;
}

/* Columna de Información de Contacto */
.contact-info-footer {
    display: flex;
    flex-direction: column;
    line-height: 1.4;
    font-size: 0.9em;
}

/* Columna de Redes Sociales */
.social-links-footer {
    display: flex;
    flex-direction: column; 
    align-items: center; 
    gap: 8px; 
    font-weight: 600; 
    text-transform: uppercase;
    font-size: 0.9em;
}

.social-icons {
    display: flex;
    align-items: center;
    gap: 15px; 
    margin-top: 5px; 
    background-color: var(--color-deep-green); 
}

.social-icons img {
    height: 25px; 
}

/* Columna de Créditos */
.credit-footer {
    font-size: 0.9em;
    font-weight: 600;
}