/* ========================================================= El Parke Lounge Bar — hoja de estilos única --------------------------------------------------------- Reúne lo que antes estaba repartido en index.css (la portada), global.css (las secciones) y las hojas sueltas de cada sección (desayunoES.css, comidaES.css, tapeoES.css…). Como ahora todo vive en una sola página, hay reglas de la portada y de las secciones que se pisarían entre ellas (el tamaño del logo, el redondeo de la cabecera, los , los

…). Por eso cada bloque va colgado de la clase que carta.js pone en el según lo que esté mostrando: -> pantalla de inicio -> una sección de la carta El aspecto es exactamente el mismo que antes; solo cambia de dónde cuelga cada regla. ========================================================= */ /* ========================================================= 1. Común a las dos vistas ========================================================= */ body{ background-color: black; font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.5; padding: 0px; margin: 0px; /* La página ocupa como mínimo la pantalla entera y se organiza en columna: cabecera, barra de secciones y, debajo, el contenido. Así main puede estirarse para que el fondo claro llegue siempre al borde inferior, aunque haya pocos grupos. 100dvh descuenta la barra del navegador en el móvil; la línea de arriba queda como respaldo para navegadores que no la entienden. */ min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } header{ background-color: #003C66; margin: 0px; padding: 30px; display: flex; justify-content: space-between; align-items: center; } /* La cabecera de la portada va redondeada por abajo; la de las secciones no, porque debajo lleva pegada la barra de pestañas */ body.Portada header{ border-radius: 0px 0px 22px 22px; } body.Seccion header{ border-radius: 0px; } body.Portada img.Logo{ max-width: 48%; height: auto; } body.Seccion img.Logo{ max-width: 55%; height: auto; } main{ background-color: #dfdfdf; margin-top: 10px; border-radius: 22px; /* Crece hasta llenar lo que sobre de pantalla, pero nunca se encoge: si hay más grupos de los que caben, main conserva su altura real y la página se desplaza hacia abajo con normalidad. */ flex: 1 0 auto; } body.Portada main{ padding: 20px 20px; } body.Seccion main{ padding: 0px 0px 5px 0px; } /* --------- Selector de idioma --------- */ /* El contenedor ocupa el hueco que antes ocupaba el icono suelto */ div.SelectorIdioma{ position: relative; /* referencia para el select invisible */ width: 8%; min-width: 44px; /* área táctil mínima recomendada en móvil */ } .SelectorIdioma img.IconoIdioma{ width: 50%; height: auto; display: block; } /* Select transparente encima del icono: al tocar la imagen se abre el menú nativo del sistema para elegir idioma */ select.MenuIdioma{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; /* invisible pero funcional */ border: none; cursor: pointer; -webkit-appearance: none; appearance: none; } /* ========================================================= 2. Portada (antes index.css) ========================================================= */ body.Portada h1.Welcome{ color: #003C66; font-weight: 900; text-align: center; } body.Portada h3.QueApetece{ color: #006BB8; font-weight: 300; text-align: center; } body.Portada a{ background-color: #00CA7D; border-radius: 20px; border: none; margin: 50px 0px 50px 0px; display: flex; align-items: center; flex-direction: column; text-decoration: none; color: inherit; } body.Portada img{ border-radius: 20px 20px 0px 0px; max-width: 100%; height: auto; } body.Portada img.SeccionComida{ border-radius: 0px 0px 0px 0px; max-width: 100%; height: auto; } body.Portada img.SeccionBebida{ border-radius: 20px 20px 0px 0px; max-width: 100%; height: auto; } body.Portada p{ color: white; font-weight: bold; font-size: 20px; } body.Portada p.AlertaInicio{ background-color: #FF6F00; color: black; margin: 0px -16px; padding: 10px; width: 100%; box-sizing: border-box; border-radius: 20px 20px 0px 0px; font-weight: 500; text-align: center; } /* ========================================================= 3. Secciones (antes global.css) ========================================================= */ body.Seccion .navbar{ background-color: #1565c0; border-radius: 0px 0px 22px 22px; padding: 0px 0px 0px 0px; margin: 0px; } body.Seccion .menu{ display: flex; margin: 0; padding: 0px 15px 5px 15px; gap: 10px; justify-content: space-between; align-items: center; list-style: none; overflow-x: auto; /* si algún día añades más secciones y no caben, esto permite deslizar con el dedo */ } body.Seccion .Tab{ position: relative; padding: 0.9rem 0.5rem 0.6rem; display: block; color: #cfe3f7; /* tono más apagado para las inactivas */ text-decoration: none; font-size: 1rem; white-space: nowrap; transition: font-size 0.2s, color 0.2s; } /* La sección activa: negrita, un poco más grande y color blanco */ body.Seccion .Tab.Activo{ color: #fff; font-size: 1.1rem; font-weight: bold; } /* La rayita blanca redondeada encima de la pestaña activa */ body.Seccion .Tab.Activo::before{ content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 70%; height: 5px; background-color: #fff; border-radius: 10px; } body.Seccion div.PortadaSeccion{ background-color: white; border-radius: 22px; position: relative; /* referencia para el texto */ width: 100%; } body.Seccion img.ImagenPortada{ border-radius: 22px; width: 100%; height: 120px; /* altura pensada para móvil */ object-fit: cover; /* la imagen no se deforma */ object-position: -8%; display: block; } /* La ilustración de Comidas se encuadra desde el borde izquierdo */ body.Seccion img.ImagenPortadaComida{ border-radius: 22px; width: 100%; height: 120px; object-fit: cover; object-position: 0%; display: block; } body.Seccion .PortadaSeccion h1{ position: absolute; left: 100px; transform: translate(-50%, 50%); /* centrado perfecto */ color: #003C66; font-size: 1.8rem; text-align: center; width: 90%; /* que no toque los bordes en pantallas pequeñas */ } body.Seccion hr.VacioPequeño{ border: none; height: 10px; } /* --------- Avisos bajo la portada de la sección --------- Cuatro nombres para dos aspectos: barra naranja a la izquierda o a la derecha. Venían de las hojas sueltas de cada sección. */ body.Seccion div.AvisoIzquierda, body.Seccion div.TipoPan{ border-left: 3px solid #FF6F00; margin-top: 30px; margin-left: 15px; padding: 0px 0px 0px 15px; margin-bottom: 25px; } body.Seccion div.AvisoIzquierda h3, body.Seccion div.TipoPan h3{ color: #FF6F00; } body.Seccion div.AvisoIzquierda p, body.Seccion div.TipoPan p{ margin-top: -15px; } body.Seccion div.AvisoDerecha, body.Seccion div.TipoLeche{ border-right: 3px solid #FF6F00; margin-right: 15px; padding: 0px 15px 0px 0px; } body.Seccion .AvisoDerecha h3, body.Seccion .TipoLeche h3{ color: #FF6F00; text-align: right; } body.Seccion .AvisoDerecha p, body.Seccion .TipoLeche p{ margin-top: -15px; text-align: right; } /*MENU PLEGABLE*/ body.Seccion section{ margin: 20px 20px 0px 20px; max-width: 100%; padding-bottom: 20px; } body.Seccion .Plegable{ border-radius: 22px; overflow: hidden; } /* Barra de título: abre y cierra toda la lista */ body.Seccion .TituloPlegable{ background-color: #00CA7D; color: #fff; font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 5px 20px 5px 20px; cursor: pointer; list-style: none; /* quita la flecha por defecto en algunos navegadores */ display: flex; justify-content: space-between; align-items: center; -webkit-tap-highlight-color: transparent; } /* Quita la flecha por defecto en WebKit */ body.Seccion .TituloPlegable::-webkit-details-marker{ display: none; } /* Flecha propia que gira al abrir */ body.Seccion .TituloPlegable::after{ content: "▾"; font-size: 1.8rem; transition: transform 0.25s ease; } body.Seccion .Plegable[open] .TituloPlegable::after{ transform: rotate(180deg); } body.Seccion .TituloPlegableSinNota{ background-color: #00CA7D; color: #fff; border-radius: 22px; font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 5px 20px 5px 20px; cursor: pointer; list-style: none; /* quita la flecha por defecto en algunos navegadores */ display: flex; justify-content: space-between; align-items: center; -webkit-tap-highlight-color: transparent; } /* Quita la flecha por defecto en WebKit */ body.Seccion .TituloPlegableSinNota::-webkit-details-marker{ display: none; } /* Flecha propia que gira al abrir */ body.Seccion .TituloPlegableSinNota::after{ content: "▾"; font-size: 1.8rem; transition: transform 0.25s ease; } body.Seccion .Plegable[open] .TituloPlegableSinNota::after{ transform: rotate(180deg); } /* Nota del suplemento */ body.Seccion .Nota{ background-color: #FF6F00; margin-top: 0px; text-align: center; border-radius: 0px 0px 22px 22px; font-size: 0.8rem; color: white; padding: 15px 0px 15px 10px; } body.Seccion .NotaAzul{ background-color: #006BB8; margin-top: 0px; text-align: center; border-radius: 0px 0px 22px 22px; font-size: 0.8rem; color: white; padding: 15px 0px 15px 10px; } body.Seccion .Nota2{ background-color: #006BB8 ; margin-top: 15px; text-align: center; border-radius: 22px; font-size: 0.8rem; color: white; padding: 15px 0px 15px 10px; } body.Seccion .Nota3{ background-color: #FF6F00; margin: 0px; text-align: center; border-radius: 0px; font-size: 0.8rem; color: white; padding: 15px 0px 15px 10px; } /* --------- Lista de productos --------- */ body.Seccion .ListaPlegada{ margin-left: -40px; list-style: none; background-color: #a14f4f00; } body.Seccion li.Item{ background-color: #fff; padding: 18px 20px 5px 20px; margin-top: 5px; margin-bottom: 5px; border-radius: 22px; } /* Nombre a la izquierda, precio a la derecha */ body.Seccion .ItemInfo{ border-bottom: none; display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; } body.Seccion .ItemNombre{ font-weight: 700; color: #003C66; font-size: 1rem; } body.Seccion .ItemPrecio{ font-weight: 700; color: #FF6F00; font-size: 1rem; white-space: nowrap; } /* Descripción sutil bajo el nombre */ body.Seccion .ItemDescripcion{ font-size: 0.82rem; color: #8a8a8a; margin-top: 0.2rem; line-height: 1.35; } /* --------- Pantallas más grandes (progresivo) --------- */ @media (min-width: 600px) { body.Seccion section{ max-width: 560px; margin: 0 auto; } } body.Seccion div.Alergenos{ background-color: white; padding: 20px 30px 20px 30px; margin: 50px 0px -5px 0px; border-radius: 22px; align-items: center; } body.Seccion .Alergenos h2{ color: #FF6F00; margin-bottom: 30px; text-align: center; } body.Seccion .ListaAlergenos{ display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; list-style: none; font-size: 0.8rem; } body.Seccion .ListaAlergenos p{ background-color: #ebebeb; border-radius: 20px; padding: 10px; } /* --------- Alérgenos por producto --------- PREPARADO PERO SIN USAR. Estas reglas solo entran en juego cuando un producto declara alérgenos en carta.json: "alergenos": ["gluten", "lacteos"] Mientras las listas estén vacías, carta.js no genera estos elementos y la carta se ve exactamente igual que siempre. */ body.Seccion .ItemAlergenos{ display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; } body.Seccion .ItemAlergeno{ background-color: #ebebeb; color: #6b6b6b; border-radius: 20px; padding: 4px 10px; font-size: 0.72rem; line-height: 1.2; white-space: nowrap; }