/* ELEVEN11 · acabamento do La Fleur Bistrô (27/10/2026). Carregado depois de cinema.css, em todas as páginas. */

/* Hero: o nome e o lugar entram no h1 como sobretítulo (antes eram um <p> injetado por JS, com salto de layout). */
#hero-title .lf-kicker{font-family:var(--font-sans),sans-serif;font-style:normal;max-width:none;text-wrap:nowrap}

/* As entradas começam em opacidade 0,01, não 0 (mesma aparência): o Chrome não conta como LCP o que foi pintado com
   opacidade 0, e o título da hero deixava de ser o LCP. Estas regras substituem as de mesmo nome do cinema.css. */
@keyframes lf-hero-arrive{from{opacity:.01;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}
@keyframes lf-arrive{from{opacity:.01;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* Filme de fundo: com ele ativo, os fundos estáticos 2–6 não são baixados (o poster de abertura fica por trás). */
.lf-film-on body>div.fixed.inset-0>div:not(:first-child) picture img{display:none}
/* A margem de parallax dos pôsteres vale desde a primeira pintura (antes esperava a classe do JS e causava salto). */
body>div.fixed.inset-0>div:has(>picture){inset:-4%}
@media(max-width:767px){body>div.fixed.inset-0>div:has(>picture){inset:-2%}}
canvas.lf-film{background:transparent}

/* ELEVEN11 · créditos do estúdio no rodapé (padrão dos sites do estúdio, nos tons do rodapé La Fleur).
   Nome acessível vindo do próprio conteúdo (o símbolo ELEVEN11 é um SVG com role="img"), igual ao texto visível.
   Tom discreto pela cor (#A39684 sobre #17110E, 6,4:1), não por opacidade. Selo e "11" no laranja ELEVEN11 (8,2:1). */
footer .footer-credit{display:flex;justify-content:center;width:100%;margin-top:4px;padding-top:26px;border-top:1px solid var(--lf-line)}
.studio-credit{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:10px 16px;min-height:44px;color:#a39684;font:500 9px/1 var(--font-sans),sans-serif;letter-spacing:.13em;text-transform:uppercase;text-decoration:none;transition:color .45s ease}
.studio-credit:hover,.studio-credit:focus-visible{color:var(--lf-cream)}
.studio-credit-brand{display:inline-flex;align-items:center;gap:9px}
.studio-credit-mark{height:11px;width:auto;display:block}
.studio-credit-tag{font-size:7px;letter-spacing:.2em;padding:4px 7px 3px;border-radius:999px;color:#fb923c;border:1px solid rgba(251,146,60,.45);transition:border-color .45s ease}
.studio-credit:hover .studio-credit-tag{border-color:#fb923c}
.studio-credit-url:before{content:"\00b7";margin-right:16px;opacity:.6}
@media(max-width:700px){footer .footer-credit{padding-top:20px}.studio-credit{font-size:8px;letter-spacing:.1em;gap:8px 12px}.studio-credit-url{flex-basis:100%;text-align:center}.studio-credit-url:before{content:none}}

/* 404 própria, nos tons do site (a do Next vinha em inglês, com fundo branco forçado). */
.lf-404{min-height:100svh;display:flex;align-items:center;padding-block:150px 110px}
.lf-404 h1{max-width:13ch}
.lf-404 .lf-eyebrow{color:#ddc59b}

/* Celular */
@media(max-width:768px){
  /* O poster vertical fica com o mesmo centro dos quadros do filme (66 % da largura do quadro), sem salto quando ele entra. */
  body>div.fixed.inset-0>div:first-child img{object-position:31% 50%!important}
}
@media(max-width:767px){
  /* "Deixe-se ficar" ficava sob o botão de pausa do fundo, no canto inferior esquerdo. */
  .lf-hero-bottom{bottom:78px}
  /* Aviso de cookies mais compacto: cobria o botão "Ver o cardápio" na primeira tela. */
  [aria-label="Aviso de cookies"]{left:12px;right:12px;padding:16px 16px 12px}
  [aria-label="Aviso de cookies"] p{font-size:13px;line-height:1.5}
  [aria-label="Aviso de cookies"]>div{margin-top:12px;gap:8px 14px}
  [aria-label="Aviso de cookies"] button:not(.btn-primary){min-height:46px;padding-inline:16px;font-size:14px}
  .lf-404{padding-block:130px 90px}
}
@media(max-width:767px) and (max-height:700px){.lf-hero-bottom p{display:none}}