/*
 * GURU · pie del sitio (footer)
 * Hoja propia para que el mismo pie salga en todas las paginas: las del layout
 * (guru.css) y las del menu QR con el diseno legacy (Bootstrap + landing.css).
 * Las variables van sobre .pie para no depender del :root de guru.css.
 */

@font-face { font-family: 'Cinzel'; src: url('../fonts/Cinzel-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poetica Std'; src: url('../fonts/PoeticaStd-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

.pie {
  --oxblood: #3C0206; --beige: #D9CAAE; --dorado-claro: #A8885E; --beige-suave: rgba(217, 202, 174, .78);
  --font-display: 'Cinzel', Georgia, 'Times New Roman', serif;
  --font-body: 'Poetica Std', Georgia, 'Times New Roman', serif;
  --space-x: 22px; --space-section: 72px; --max: 1200px;
  box-sizing: border-box; font-family: var(--font-body); text-align: center; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
.pie *, .pie *::before, .pie *::after { box-sizing: border-box; }
.pie img { max-width: 100%; vertical-align: middle; }
.pie { position: relative; isolation: isolate; overflow: hidden; color: var(--beige); padding: var(--space-section) var(--space-x) 28px; background-color: var(--oxblood); background-image: url(../tex/tex-damasco.webp); background-size: 532px auto; background-position: center top; background-attachment: fixed; }
.pie__caja { max-width: var(--max); margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.pie__sello { width: 120px; height: auto; }
.pie__vajra { height: 22px; width: auto; }
.pie__datos { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pie__dir { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .16em; font-size: 12px; line-height: 1.6; margin: 0; color: var(--dorado-claro); }
.pie__horario { font-family: var(--font-body); font-size: 18px; line-height: 1.5; margin: 0; color: var(--dorado-claro); }
.pie__marca { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .3em; font-size: 10px; line-height: 1.4; margin: 4px 0 0; padding-left: .3em; color: var(--dorado-claro); }
.redes { display: flex; gap: 8px; color: var(--dorado-claro); }
.redes a { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: inherit; text-decoration: none; }
.redes a:hover { color: var(--beige); }
.credito { margin: 8px 0 0; font-size: 12px; letter-spacing: .04em; color: var(--beige-suave); }
.credito a { color: var(--beige-suave); text-decoration: none; }
.credito a:hover { color: var(--dorado-claro); }

/* Legacy menu pages: no own background, same veil as .overlay so the page background flows into the footer */
.pie--transparente { background: rgba(0, 0, 0, .3); }

/* Dishes page: same light background as the menu, content in the dish red */
.pie--claro { --rojo-plato: rgba(58, 1, 4, 1); background: transparent; color: var(--rojo-plato); }
.pie--claro .pie__dir, .pie--claro .pie__horario, .pie--claro .pie__marca,
.pie--claro .redes, .pie--claro .credito, .pie--claro .credito a { color: var(--rojo-plato); }
.pie--claro .redes a:hover, .pie--claro .credito a:hover { color: #795C39; }

@media (hover: none) {
  .pie { background-attachment: scroll; }
}