/*
 * ESTILOS PROPIOS de la web publica de restaurantenuevoshorizontes.com (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 Nuevos Horizontes:
 * granate #9a1c27 (el de su plantilla y su logo), granate claro #b8323e al pasar el raton, 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; }
.enlace-pie { color: #babab9; }
.enlace-credito { color: #33ccff; }
#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: #9a1c27; }
#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; } }

/* Texto debajo del nombre de una carta o seccion (precio del menu, avisos) */
.texto-seccion { color: #9a1c27; 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: #fff3e0; color: #9a1c27; 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: #9a1c27; }
.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: #9a1c27; }
/* Enlace "MENUS (PDF)" del menu de arriba: siempre en mayusculas y en granate (mas claro al pasar el raton) */
.nav-menu a.enlace-menus-pdf, .mobile-nav a.enlace-menus-pdf { color: #9a1c27 !important; text-transform: uppercase; font-weight: 700; }
.nav-menu a.enlace-menus-pdf:hover, .mobile-nav a.enlace-menus-pdf:hover { color: #b8323e !important; }

/* 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 "Nos encontramos en" / "Contactenos" de la portada: con los colores de Nuevos Horizontes (granate).
   La plantilla ponia el icono azul claro sobre rosa y el telefono en azul (03/11/2026, pedido por el). */
.contact .info i { background: #9a1c27; color: #fff; }
.contact .info:hover i { background: #b8323e; color: #fff; }
.contact .info a { color: #9a1c27; font-weight: 700; }
.contact .info a:hover { color: #b8323e; }
@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 granate */
.menu .menu-content span:not(.nombre-plato):not(.texto-precio2) { color: #9a1c27; }
/* 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): fondo GRANATE CLARO con borde granate (el de
   la web), para que no se confundan con el recuadro crema de los platos (en La Mancha, rojo claro; 04/11/2026) */
.texto-seccion { background: #fbeef0; border-color: #f0cdd1; border-left-color: #9a1c27; }

/* ==== PORTADA de Nuevos Horizontes (04/11/2026): lo que antes iba escrito dentro del HTML ==== */
.granate { color: #9a1c27; }
/* Sus fotos de la portada siempre han sido redondas (en La Mancha, esquinas redondeadas) */
.foto-redonda { border-radius: 50%; }
.icono-portada { max-width: 150px; height: auto; }
/* 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. Texto justificado, como siempre. */
.bloque-centrado { text-align: center; display: flex; align-items: center; justify-content: center; }
.bloque-centrado p { width: 100%; text-align: justify; }
@media (min-width: 768px) { .bloque-centrado { min-height: 580px; } }
@media (max-width: 767px) { .bloque-centrado { padding: 20px 0; } .bloque-centrado p { text-align: left; } }
.subtitulo-portada { font-size: 1.5rem; }
/* Franja de celebraciones (fondo oscuro): texto blanco justificado */
.texto-eventos { width: 100%; text-align: justify; color: #fff; padding-top: 1rem; }
@media (max-width: 767px) { .texto-eventos { text-align: left; } }
/* El correo es muy largo: en el movil se parte en vez de salirse por la derecha */
.contact .info a.correo { overflow-wrap: anywhere; }
/* Palabras muy largas (el correo contacto@restaurantenuevoshorizontes.com en las legales) se parten en vez de
   ensanchar la pagina en el movil: a 360 px empujaban la cabecera 13 px fuera de la pantalla (04/11/2026) */
#main { overflow-wrap: anywhere; }

/* ==== Pedido por el (04/11/2026), solo para esta web ==== */
/* AVISO DE LA PORTADA mas vistoso: tarjeta blanca con franja granate arriba y la palabra "AVISO" en una
   etiqueta, para que se vea que es un aviso y no parte del carrusel */
.aviso-portada { position: relative; border-left: 0; border-top: 5px solid #9a1c27; padding: 26px 26px 14px; margin-top: 18px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.35); font-size: 18px; }
.aviso-portada::before { content: "AVISO"; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: #9a1c27; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 2px; padding: 4px 14px; border-radius: 20px; box-shadow: 0 3px 8px rgba(0,0,0,.25); }
#hero .aviso-portada strong, #hero .aviso-portada b { color: #9a1c27; }
@media (max-width: 575px) { .aviso-portada { font-size: 15px; padding: 22px 14px 10px; } }
/* PIE: la letra de la plantilla (13-14 px) se leia mal sobre el marron: mas grande */
#footer .copyright { font-size: 16px; line-height: 1.7; }
#footer .credits { font-size: 15px; }
.enlace-pie:hover { color: #fff; }
/* Texto de la carta y de las secciones (precios del menu, avisos): a todo el ancho de la carta, como el recuadro
   de los platos (antes 900 px como mucho y quedaba hueco a los lados) */
.texto-seccion, .texto-seccion.pequeno { max-width: none; }
/* CABECERA: con 6 cartas y "Menus (PDF)" no cabia en una linea en pantallas medianas y bajaba a una segunda.
   Entre 992 y 1399 px (portatiles) la letra y el hueco entre opciones se reducen un poco */
@media (min-width: 992px) and (max-width: 1399px) {
  .nav-menu a { padding: 9px 9px; font-size: 14px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .nav-menu a { padding: 9px 6px; font-size: 13px; }
  .logo-web { max-width: 160px; height: auto; }
}
/* RESERVAS destacadas en la portada, justo debajo del carrusel (04/11/2026): tarjeta granate claro con borde
   granate, como los avisos de la carta, y boton para llamar */
.reservas { padding: 30px 0 0; }
.tarjeta-reservas { display: flex; align-items: center; gap: 22px; background: #fbeef0; border: 1px solid #f0cdd1; border-left: 6px solid #9a1c27; border-radius: 14px; padding: 20px 26px; box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.icono-reservas { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; background: #9a1c27; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 30px; }
.texto-reservas { flex: 1 1 auto; }
.texto-reservas h2 { font-size: 24px; color: #9a1c27; margin: 0 0 6px; }
.texto-reservas p { margin: 0; font-size: 17px; line-height: 1.6; color: #3f3a33; }
.boton-reservas { flex: 0 0 auto; background: #9a1c27; color: #fff; font-weight: 700; font-size: 20px; padding: 12px 24px; border-radius: 40px; text-decoration: none; white-space: nowrap; }
.boton-reservas:hover { background: #b8323e; color: #fff; }
@media (max-width: 767px) {
  .reservas { padding-top: 16px; }
  .tarjeta-reservas { flex-direction: column; text-align: center; gap: 10px; padding: 16px 12px; border-left-width: 1px; border-top: 5px solid #9a1c27; }
  .texto-reservas h2 { font-size: 21px; }
  .texto-reservas p { font-size: 16px; }
  .boton-reservas { width: 100%; font-size: 19px; }
}
/* PRECIO siempre entero en su linea: con nombres largos (vinos) el "EUR" bajaba a otra linea. El precio no se
   parte ni encoge; es el nombre el que se reparte en dos lineas (04/11/2026, pedido por el) */
.menu .menu-content span:not(.nombre-plato):not(.texto-precio2) { white-space: nowrap; flex-shrink: 0; }
.menu .menu-content span.nombre-plato, .menu .menu-content span.texto-precio2 { min-width: 0; }
/* BOTONES DE LAS CARTAS sobre la foto grande (04/11/2026, pedido por el): la plantilla los hacia transparentes
   con solo el borde y se veia la foto a traves. Ahora macizos: blancos con letra granate; "Menus (PDF)" granate.
   Con sombra para despegarlos de la foto y hueco tambien entre filas cuando no caben en una. */
#hero .btn-menu, #hero .btn-book { margin: 6px 5px; box-shadow: 0 4px 14px rgba(0,0,0,.35); font-size: 14px; font-weight: 700; letter-spacing: .5px; }
#hero .btn-menu { background: rgba(255,255,255,.96); color: #9a1c27; border-color: #fff; }
#hero .btn-book { background: #9a1c27; color: #fff; border-color: #9a1c27; }
#hero .btn-menu:hover { background: #9a1c27; color: #fff; border-color: #9a1c27; }
#hero .btn-book:hover { background: #b8323e; color: #fff; border-color: #b8323e; }
@media (max-width: 575px) { #hero .btn-menu, #hero .btn-book { padding: 9px 18px; font-size: 13px; margin: 4px 3px; } }