*{
    padding: 0;
    margin: 0;
    
}   
h1{ /*edicion del titulo principal*/
    text-align: center; /* alinia el texto principal que es hi en el centro*/
    background-color: red; /* le da color de fondo*/
    color: white; /*pone el color de la letra */
    padding: 20px;
}
h2{ /* encargada del diseño del nobre y el carnet*/
    text-align: left;
    background-color: red;
    color: white;
    padding: 2px;
}
nav ul{ /*edicion de navegacion*/
    background-color: rgb(167, 38, 38);
    width: 100%;
    list-style-type: none;
    text-align: center;
}
nav li{
    display: inline-flex; /* para que la navegacion este en horizontal*/
}
/* Efecto cuando pasas el mouse sobre los botones grandes */
nav li:hover a {
    background-color: black;
    transform: scale(1.05); /* Hace que el botón crezca un poquito al pasar el mouse */
}
nav a{
    text-decoration: none;
    color: white;
    background-color: rgba(0, 0, 0, 0.3); /* Un fondo oscuro sutil para que parezca botón */
    padding: 15px 25px;   /* ¡Aumentamos el colchón interno para hacerlos GRANDES! */
    font-size: 1.1rem;    /* Letra un poco más grande y clara */
    font-weight: bold;    /* Letra negrita */
    border-radius: 6px;   /* Bordes redondeados para los botones */
    transition: all 0.3s ease;

}
nav li:hover { /* utilizamos el hover para que a la hora de pasar el mouse cambie de color*/
    background-color: black;
}
nav ul {
    background-color: rgb(167, 38, 38);
    width: 100%;
    list-style-type: none;
    text-align: center;
    padding: 15px 0; /* Espacio arriba y abajo de la barra */
    display: flex;   /* Usamos flex de una vez para alinear los botones */
    justify-content: center;
    gap: 15px;       /* Separa los botones entre sí */
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* 100vh significa el 100% de la altura de la ventana */
}
.cuerpo-pagina {
    flex: 1; /* Al decirle flex: 1, empuja el footer directamente hacia abajo */
}
/* -------------------PIE DE PÁGINA -------------------- */
.pie-pagina {
    background-color: #1a1a1a; /* Fondo gris oscuro/negro elegante */
    color: #ffffff;
    text-align: center;
    padding: 20px 10px;
    margin-top: auto;          /* Separa el footer del contenido de arriba */
    border-top: 4px solid red; /* Línea roja decorativa que combina con tu logo */
    width: 100%;
}
.pie-pagina p {
    margin: 5px 0;
    font-size: 1rem;
}
.lema-umg {
    font-style: italic;        /* Letra cursiva para el lema */
    color: #ffcccc;            /* Un color rojo claro/rosado sutil para resaltar el lema */
    font-weight: bold;
}
/*-------------------------- NUESTROS PRODUCTOS -----------------*/
.titulo-nuestro-producto{
    background-color: red;
    text-align: center;
    color: black;
}
.ing-prd{
    text-align: center;
    color: black;
}
.foto-menu{
    width: 200px;  /* controla el ancho de la foto*/        
    height: 150px;     /* controla el alto de la foto*/    
    object-fit: cover;     /* Agregamos esto para que la foto no se aplaste */
    border-radius: 8px;    /* esquinas redondeadas*/

}
.Chaomen-normal{
    text-align: left; /*alinea el texto en la posicion que querramos*/
    padding: 1px;
}
.Pollo-teriyaki{
    text-align: left;
    padding: 1px;
}
.tarjeta-platillo{
    display: flex;         /* Alinea la foto y el bloque de texto horizontalmente */
    align-items: center;   /* Centra la foto y el texto verticalmente */
    gap: 15px;             /* Deja un espacio de separación entre la foto y el texto */
    margin-bottom: 20px;   /* Separa cada platillo del siguiente hacia abajo */
    padding: 10px;
}

.descripcion-platillo {
    font-size: 0.9rem;     /* Letra un poco más pequeña para que sea sutil */
    color: #555555;        /* Color gris oscuro para que sea fácil de leer */
    margin: 5px 0;         /* Separa la descripción del título y del precio */
}
/*--------------------------- QUIENES SOMOS --------------------*/
.titulo-quienes-somos{
    text-align: center;
    background-color: red;
    color: white;
    padding: 10px;/* ajista el tamaño de la barra del quienes somos*/
}
.tex-quienes-somos{
    display: flex;
    flex-direction: column; /* pone la foto arriba y el texto abajo*/
    align-items: center; /* centra la foto y el texto*/
    text-align: center; /* centra el texto */
    padding: 20px; /* para que no empuje el texto al fondo*/
}
.tex-desc-quienes-somos{
   max-width: 700px; /* limita el ancho del texto*/
   font-size: 1.1rem; /* cambia la letra del texto*/
   line-height: 1.6; /* separa las letras*/
   margin-top: 15px; 
}
.yo-quienes-somos{
    width: 350px; /* controla el ancho de la foto*/
    height: auto; /* evita que la foto se vea estirada*/ 
    border-radius: 12px; /* redondea los vordes de la foto*/
    margin-bottom: 20px;
}
/*------------------------- VISION Y MISION -----------------------------*/
.titulo-visionymision{
    text-align: center;
    background-color: red;
    color: white;
    padding: 10px;/* ajista el tamaño de la barra del quienes somos*/
}
.contenedor-mision-vision{
    display: flex;
    justify-content: center; /* centra las dos tarjetas al centro*/
    gap: 30px; /* deja separacion de izquierda y receha de los textos*/
    max-width: 1000px; /* evita que el texto se estire*/
    margin: 0 auto; /* centra toda la pagina*/
    padding: 20px; 
}
.tarjeta-filosofica{
    flex: 1; /* hace que las tarjetas midan lo mismo*/
    background-color: #ffffff;
    border: 1px solid #dddddd;
    border-radius:  8px; /* hace que las tarjetas tengan bordes*/
    padding: 25px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
.tarjeta-filosofica h3 {
    color: red;              
    font-size: 1.5rem;
    margin-bottom: 15px;
    border-bottom: 2px solid red; /* linea decorativa */
    padding-bottom: 5px;
}
.tarjeta-filosofia p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #333333;
    text-align: justify;
}   
/*------------------------- Nuestros Proveedores ---------------------------------*/
.contenedor-proveedores{
    /* alineamiento de las tarjetas horizontalmente*/
    display: flex;
    justify-content: center;
    gap: 40px; /* separa los textos y imagen*/
    max-width: 1000px;
    margin: 0 auto;            /* Lo centra en la pantalla */
    padding: 20px;
}
.tarjeta-provedor{
    /* estilo para tarjeta de proveedor*/
    flex: 1; /* hace que las tarjetas midan lo mismo*/
    background-color: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 12px;
    padding: 20px;
    text-align: center;   /* Centra las fotos, los títulos y el texto por igual */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
}
.tarjeta-provedor h3 {
    color: red;               
    font-size: 1.4rem;
    margin-bottom: 10px;
}
.foto-proveedor{
    /* controla el tamaño de las fotos de los proveedores*/
    width: 100%;               /* Ocupa todo el ancho disponible de su tarjeta */
    max-width: 250px;          /* Pero no deja que crezca más de 250px para que no se vea gigante */
    height: 180px;             /* Alto fijo para que las dos fotos midan igual */
    object-fit: cover;         /* Evita que las fotos se distorsionen o se estiren */
    margin-bottom: 15px;       /* Separa la foto del título h3 de abajo */
}
.tarjeta-proveedor p {
    font-size: 1rem;
    line-height: 1.5;
    color: #444444;
    text-align: justify;       /* Texto alineado como un libro */
}
/*---------------------- Nuestros clientes------------------------*/
.contenedor-clientes {
    display: flex;
    justify-content: center;
    gap: 40px;                 /* Espacio de separación entre las dos opiniones */
    max-width: 1000px;
    margin: 0 auto;            /* Centra todo el bloque en la pantalla */
    padding: 20px;
}
.tarjeta-cliente {
    flex: 1;                   /* Hace que ambas tarjetas midan exactamente lo mismo */
    background-color: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 12px;       /* Esquinas redondeadas como las de tus proveedores */
    padding: 25px;
    text-align: center;        /* Centra la foto y el título */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Efecto 3D de tarjeta flotante */
}
.foto-cliente {
    width: 100px;              /* Tamaño adecuado para un avatar/foto de perfil */
    height: 100px;
    object-fit: cover;         /* Evita que la imagen se distorsione */
    border-radius: 50%;        /* ¡ESTO LA HACE COMPLETAMENTE CIRCULAR! Se ve muy profesional */
    border: 3px solid red;     /* Un borde rojo con la temática de tu restaurante */
    margin-bottom: 15px;       /* Separa la foto del nombre */
}
.tarjeta-cliente h3 {
    color: #000000;
    font-size: 1.3rem;
    margin-bottom: 10px;
}
    .comentario {
    text-align: center;
    font-size: 1rem;
    line-height: 1.6;
    color: #555555;
    text-align: justify;       /* Mantiene el bloque de texto alineado como un libro */
    font-style: italic;        /* Letra cursiva para resaltar que es una cita o testimonio */
}
/*--------------------------- Contactenos-------------------------*/
/* Centra el título de contacto */
.titulo-contacto {
    text-align: center;
    background-color: red;
    color: white;
    padding: 10px;
    margin-bottom: 30px;
}   
/* Alinea la información y el mapa a la par */
.contenedor-contacto {
    display: flex;
    justify-content: center;
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}
/* Estilo para las dos tarjetas de la sección */
.tarjeta-informacion, .tarjeta-mapa {
    flex: 1;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
/* Títulos internos de las tarjetas */
.tarjeta-informacion h3, .tarjeta-mapa h3 {
    color: red;
    font-size: 1.4rem;
    margin-bottom: 15px;
}
/* Espaciado de los textos de dirección, teléfono, etc. */
.detalles-contacto p {
    font-size: 1.1rem;
    margin: 12px 0;
}
.linea-separadora {
    border: 0;
    height: 1px;
    background: #dddddd;
    margin: 25px 0;
}
/* Contenedor de los enlaces de redes sociales */
.redes-sociales {
    display: flex;
    flex-direction: column; /* Pone los botones uno abajo del otro */
    gap: 10px;
}
/* Estilo que transforma los links en botones interactivos */
.enlace-red {
    display: inline-block;
    text-decoration: none;
    color: white;
    padding: 10px 15px;
    border-radius: 6px;
    font-weight: bold;
    text-align: center;
    transition: background 0.3s;
}
/* Colores de fondo para simular los botones reales de cada app */
.facebook { background-color: #1877F2; }
.instagram { background-color: #E1306C; }
.tiktok { background-color: #000000; }

/* Efecto hover: cuando pasas el mouse encima se ponen un poco más oscuros */
.enlace-red:hover {
    opacity: 0.85;
}
/* Control total del mapa de Google para que sea responsivo */
.mapa-google {
    width: 100%;       /* Ocupa todo el ancho de su tarjeta blanca */
    height: 350px;     /* Altura fija ideal para que se vea el mapa */
    border: 0;         /* Quita el borde feo que trae por defecto Google */
    border-radius: 8px;/* Redondea las esquinas del mapa */
}