/*
 * ESTILOS PROPIOS de la web publica de Bar Giba (lo que no es de la plantilla). Va despues de style.css.
 * Copiado el 04/11/2026 del molde de lamancharestaurante.com y pasado a los colores de Bar Giba: el granate
 * #a50032 de su plantilla, #7a0025 (mas oscuro) para bordes y el naranja #ff9b08.
 * Hecho el 03/11/2026: letra alojada en la web, fotos de platos y secciones, menus en PDF, titulos h1
 * y la pagina de "no existe". Lo que antes iba escrito dentro del HTML (style="...") repetido en cada
 * pagina, ahora esta aqui una sola vez.
 */

/* Merriweather alojada en la propia web (antes, Google Fonts: mandaba la IP de cada visitante a Google) */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/merriweather-latin-400.woff2') format('woff2');
}

.fuente-web, .enlace-pie, .enlace-credito, .enlace-barra { font-family: 'Merriweather', serif; }
.enlace-barra { color: #e5e6e6; }
/* Pie (05/11/2026): el fondo es gris oscuro (#35322d), asi que nada de granate aqui: se veia poco.
   Enlaces en gris claro con naranja al pasar; el credito, mas grande y separado por una linea. */
#footer { font-size: 15px; }
.enlace-pie { color: #e6e5e3; }
.enlace-pie:hover, .enlace-pie:focus { color: #ff9b08; }
#footer .credits { font-size: 15px; color: #d0cfcc; margin-top: 6px; padding-top: 14px; border-top: 1px solid #4d4943; display: inline-block; }
.enlace-credito { color: #4fd3ff; font-weight: 700; }
.enlace-credito:hover, .enlace-credito:focus { color: #ff9b08; }
#header .logo-web { max-width: 200px; height: auto; }

/* Un solo h1 por pagina (SEO), con el mismo aspecto que los titulos de la plantilla */
.section-title h1 { margin: 15px 0 0 0; font-size: 32px; font-weight: 700; color: #5f5950; }
.section-title h1 span { color: #a50032; }
#hero h1 { color: #fff; margin-bottom: 30px; font-size: 48px; font-weight: 700; }
#hero h1 span { color: #ffa012; }
@media (max-width: 768px) { #hero h1 { font-size: 28px; } }

/* Botones de las cartas en la foto grande (05/11/2026): en la plantilla eran transparentes con un borde granate
   fino y sobre la foto oscura no se leian. Ahora: fondo granate solido, letra blanca y sombra para separarlos
   de la foto. En el movil, uno debajo de otro y del mismo ancho. */
#hero .btn-menu, #hero .btn-book { background: #a50032; border: 2px solid #fff; color: #fff; font-size: 14px; padding: 14px 30px; margin: 6px 8px; box-shadow: 0 6px 18px rgba(0,0,0,.45); text-shadow: none; }
#hero .btn-menu:hover, #hero .btn-book:hover, #hero .btn-menu:focus, #hero .btn-book:focus { background: #7a0025; border-color: #ff9b08; color: #fff; }
@media (max-width: 575px) {
	#hero .btn-menu, #hero .btn-book { display: block; width: 100%; max-width: 280px; margin: 10px auto 0; padding: 13px 16px; }
}

/* Texto debajo del nombre de una carta o seccion (precio del menu, avisos) */
.texto-seccion { color: #990000; font-size: 18px; text-align: center; padding-bottom: 20px; font-weight: 500; line-height: 1.5; }
.texto-seccion p { margin: 0 0 6px; }
.texto-seccion.pequeno { font-size: 16px; }
.titulo-seccion { color: #ff9b08; text-align: center; padding-bottom: 20px; margin: 0; font-size: 28px; }
.separacion { height: 50px; }

/* Foto de la seccion: nunca mas grande de lo que mide (si no, pixelada). Las grandes, a todo el ancho;
   las pequenas, a su tamano y centradas. Alto maximo para que no ocupe toda la pantalla. */
.foto-seccion { display: block; width: auto; max-width: 100%; height: auto; max-height: 460px; margin: 0 auto 25px; border-radius: 12px; }

/* Plato con foto: miniatura a la izquierda, del MISMO ALTO que un plato normal (nombre + alergenos), para
   que no deje huecos en la otra columna. El numero de fotos va encima de la foto. Pulsandola se ven en grande. */
.menu-item.con-foto { display: flex; gap: 12px; align-items: flex-start; }
.menu-item .foto-plato { position: relative; flex: 0 0 64px; display: block; margin-top: 6px; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.18); cursor: zoom-in; }
.menu-item .foto-plato img { display: block; width: 64px; height: 64px; object-fit: cover; transition: transform .25s; }
.menu-item .foto-plato:hover img { transform: scale(1.08); }
.menu-item .texto-plato { flex: 1 1 auto; min-width: 0; }
.menu-item .num-fotos { position: absolute; right: 3px; bottom: 3px; background: rgba(0,0,0,.62); color: #fff; font-size: 10px; line-height: 1; padding: 3px 5px; border-radius: 8px; }
/* El nombre y el texto del segundo precio eran enlaces a "#" (no llevaban a nada): ahora son texto con
   el mismo aspecto que tenian */
.menu .menu-content { padding-top: 5px; }
.menu .menu-content.precio2 { padding-top: 0; }
.menu .menu-content span.nombre-plato, .menu .menu-content span.texto-precio2 { padding: 0 10px 0 0; font-weight: 700; }
.menu .menu-content span.nombre-plato { color: #444; text-transform: uppercase; font-size: 14px; }
.menu .menu-content span.texto-precio2 { color: #ff9b08; }
.menu .menu-ingredients { padding-bottom: 5px; }
.menu .menu-ingredients p { margin: 0; }
.menu .alergenos-plato img { width: 25px; height: 25px; margin: 0 2px 2px 0; }

/* Leyenda de alergenos al final de cada carta */
.leyenda-alergenos { background: #f1f1f1; padding: 30px 10px; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 18px; }
.leyenda-alergenos h2 { flex-basis: 100%; text-align: center; font-size: 26px; color: #5f5950; margin: 0 0 6px; }
.leyenda-alergenos figure { margin: 0; text-align: center; width: 74px; font-size: 12px; }
.leyenda-alergenos img { width: 50px; height: 50px; display: block; margin: 0 auto 4px; }

/* Menus en PDF: una tarjeta por menu (icono, titulo, peso y botones Ver / Descargar). 03/11/2026 */
.lista-menus-pdf { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; padding: 0 0 50px; }
.menu-pdf { flex: 0 1 540px; }
/* Tarjeta apaisada: icono a la izquierda; titulo, peso y botones a la derecha. Con uno solo queda centrada
   y proporcionada; con varios, dos por fila en el ordenador y uno debajo de otro en el movil. */
.menu-pdf { background: #fff; border: 1px solid #ece6dc; border-left: 5px solid #ff9b08; border-radius: 14px; padding: 20px 22px; box-shadow: 0 4px 16px rgba(0,0,0,.06); display: flex; align-items: center; gap: 20px; text-align: left; transition: transform .2s, box-shadow .2s; }
.menu-pdf:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.menu-pdf .portada-pdf { flex: 0 0 80px; display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; background: #fbeaf0; color: #a50032; font-size: 38px; text-decoration: none; }
.menu-pdf .cuerpo-pdf { flex: 1 1 auto; min-width: 0; }
.menu-pdf h2 { font-size: 22px; margin: 0 0 2px; line-height: 1.3; }
.menu-pdf h2 a { color: #5f5950; text-decoration: none; }
.menu-pdf h2 a:hover { color: #a50032; }
.menu-pdf .datos-pdf { color: #948c81; font-size: 13px; margin: 0 0 12px; }
.botones-pdf { display: flex; gap: 10px; flex-wrap: wrap; }
.botones-pdf a { flex: 0 0 auto; white-space: nowrap; padding: 9px 18px; border-radius: 30px; font-size: 14px; font-weight: 700; text-decoration: none; text-align: center; }
.botones-pdf .ver { background: #ff9b08; color: #fff; }
.botones-pdf .ver:hover { background: #e58700; color: #fff; }
.botones-pdf .bajar { border: 2px solid #ff9b08; color: #b86e00; padding: 7px 16px; }
.botones-pdf .bajar:hover { background: #fff3e0; color: #a50032; }
/* Enlace "MENUS (PDF)" del menu de arriba: en mayusculas y negrita, con el color del menu de la plantilla */
.nav-menu a.enlace-menus-pdf, .mobile-nav a.enlace-menus-pdf { text-transform: uppercase; font-weight: 700; }

/* Aviso de la portada: DESTACADO pero tal como se escribe en el editor (negrita, cursiva, colores). Va sobre
   la foto grande: fondo blanco casi opaco y sombra para que se lea. Antes, todo en rojo. (03/11/2026) */
.aviso-portada { display: inline-block; max-width: 760px; color: #3f3a33; background: rgba(255,255,255,.95); border-left: 5px solid #ff9b08; padding: 10px 18px; border-radius: 10px; margin-bottom: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.25); font-size: 17px; line-height: 1.5; text-align: center; }
#hero .aviso-portada p { width: auto; margin: 0; color: inherit; font-size: inherit; }
#hero .aviso-portada p + p { margin-top: 4px; }
@media (max-width: 575px) { .aviso-portada { font-size: 15px; padding: 8px 12px; } }

/* Pagina "no existe" */
.no-existe { text-align: center; padding: 30px 0 60px; }
.no-existe .botones a { margin: 6px; }

/* Movil: lo que la plantilla dejaba con margenes de ordenador */
@media (max-width: 575px) {
  .section-title h1 { font-size: 26px; }
  .titulo-seccion { font-size: 22px; }
  .texto-seccion { font-size: 16px; }
  .menu .menu-content span.nombre-plato { font-size: 13px; }
  .menu-item .foto-plato { flex-basis: 56px; }
  .menu-item .foto-plato img { width: 56px; height: 56px; }
}
.foto-redonda { border-radius: 10%; }

/* Bloque "Estamos en" / "Llamenos" de la portada: con los colores de su plantilla (granate) */
.contact .info a { font-weight: 700; }
@media (max-width: 575px) {
  .menu-pdf { flex-basis: 100%; flex-direction: column; text-align: center; padding: 18px 14px; border-left-width: 1px; border-top: 4px solid #ff9b08; }
  .botones-pdf { justify-content: center; }
  .botones-pdf a { flex: 1 1 130px; }
}
/* Menu de arriba: un punto entre enlace y enlace, para que se distingan bien */
@media (min-width: 992px) {
  .nav-menu > ul > li + li::before { content: "\00B7"; position: absolute; left: -4px; top: 50%; transform: translateY(-52%); color: #c9a46a; font-weight: 700; font-size: 20px; line-height: 1; pointer-events: none; }
}

/* ==== CARTA: aspecto mas cuidado (03/11/2026, pedido por el) ==== */
/* Titulo de cada seccion con una linea fina a cada lado */
.titulo-seccion { display: flex; align-items: center; justify-content: center; gap: 16px; font-size: 26px; letter-spacing: 1px; padding-bottom: 0; margin: 6px 0 16px; }
.titulo-seccion::before, .titulo-seccion::after { content: ""; flex: 0 1 140px; height: 2px; background: linear-gradient(to right, rgba(255,155,8,0), #f3c27a); }
.titulo-seccion::after { background: linear-gradient(to left, rgba(255,155,8,0), #f3c27a); }
/* Los platos de cada seccion, en un recuadro suave. OJO: los textos llevan el mismo fondo que el recuadro,
   porque tapan los puntos que van del nombre al precio (la plantilla los tapaba con blanco).
   OJO: sin relleno a los lados: el programa que pone los platos en dos columnas (isotope) no lo cuenta y
   los mandaba todos a una sola columna. */
.menu .menu-container { background: #fffaf3; border: 1px solid #f3e6d2; border-radius: 14px; padding: 14px 0 4px; margin-left: 0; margin-right: 0; }
.menu .menu-container .menu-content a, .menu .menu-container .menu-content span { background: #fffaf3; }
.menu .menu-container .menu-item { padding-top: 4px; padding-bottom: 10px; }
/* Precio en el granate de Bar Giba */
.menu .menu-content span:not(.nombre-plato):not(.texto-precio2) { color: #a50032; }
/* Descripcion: cursiva y gris; alergenos algo mas pequenos */
.menu .menu-ingredients { font-family: 'Merriweather', serif; font-style: italic; font-size: 13px; color: #8a8176; padding: 1px 0 3px; }
.menu .alergenos-plato img { width: 22px; height: 22px; margin: 2px 2px 0 0; }
/* Movil: sin margenes sumados (pagina 15 + recuadro 1 + plato 10 = 26 px) */
@media (max-width: 575px) {
  .menu .menu-container { padding: 10px 0 2px; border-radius: 10px; }
  .menu .menu-container .menu-item { padding-left: 10px; padding-right: 10px; }
  .titulo-seccion { gap: 10px; font-size: 21px; }
  .titulo-seccion::before, .titulo-seccion::after { flex-basis: 40px; }
}

/* Texto de una carta o seccion (precio del menu, avisos...): DESTACADO en un recuadro, no en rojo.
   Lo que se ponga en negrita o en color con el editor se respeta. (03/11/2026, pedido por el) */
.texto-seccion { color: #3f3a33; font-size: 17px; font-weight: 400; line-height: 1.55; text-align: center; max-width: 900px; margin: 0 auto 22px; padding: 14px 20px; background: #fff8ec; border: 1px solid #f3dcb2; border-left: 5px solid #ff9b08; border-radius: 12px; }
.texto-seccion.pequeno { font-size: 15px; max-width: 760px; padding: 10px 16px; margin-bottom: 16px; }
.texto-seccion p:last-child { margin-bottom: 0; }
@media (max-width: 575px) {
  .texto-seccion { font-size: 15px; padding: 10px 12px; }
}

/* Textos de carta y seccion (precio del menu, avisos): DESTACADOS con los colores de Bar Giba, fondo GRANATE
   MUY CLARO con borde granate oscuro, para que no se confundan con el recuadro crema de los platos.
   (En La Mancha, rojo claro y granate. 04/11/2026) */
.texto-seccion { background: #fbeaf0; border-color: #f0c3d2; border-left-color: #7a0025; }

/* Titulo de cada seccion en el granate de la web (asi era en Bar Giba; en La Mancha, naranja) */
.titulo-seccion { color: #a50032; }
.titulo-seccion::before { background: linear-gradient(to right, rgba(165,0,50,0), #e3a7b9); }
.titulo-seccion::after { background: linear-gradient(to left, rgba(165,0,50,0), #e3a7b9); }

/* ==== PORTADA de Bar Giba (04/11/2026): lo que antes iba escrito dentro del HTML ==== */
.granate { color: #a50032; }
/* Bloque de texto centrado a lo alto junto a la foto (antes display:table con 580 px fijos, tambien en el movil,
   donde dejaba mucho hueco en blanco). Ahora solo en el ordenador. */
.bloque-centrado { text-align: center; display: flex; align-items: center; justify-content: center; }
.bloque-centrado p { width: 100%; text-align: center; }
@media (min-width: 768px) { .bloque-centrado { min-height: 580px; } }
@media (max-width: 767px) { .bloque-centrado { padding: 20px 15px; } }
.subtitulo-portada { font-size: 1.5rem; }
.foto-portada { margin-bottom: 30px; }
.contact .info p + p { margin-top: 4px; }