/* ==========================================================================
   PIOLA CURITIBA, COMPONENTES
   Frame Tecnologia, 2026-10-02
   Depende de tokens.css. Mobile first: estilos base = celular, @media (min-width) = telas maiores.
   Prefixo .pl-  |  Convencao BEM: bloco, bloco__elemento, bloco--modificador
   ========================================================================== */

/* ---------- Layout ---------- */
.pl-container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.pl-container--narrow { width: min(100% - 2 * var(--gutter), var(--container-narrow)); }
.pl-container--wide { width: min(100% - 2 * var(--gutter), var(--container-wide)); }

.pl-section {
  position: relative;
  padding-block: var(--space-section);
  background: var(--color-bg);
  color: var(--color-text);
}
.pl-section--tight { padding-block: calc(var(--space-section) * 0.6); }
.pl-section--alt { background: var(--color-bg-alt); }
.pl-section--warm { background: var(--color-bg-warm); }

.pl-stack > * + * { margin-top: var(--stack, var(--space-4)); }
.pl-pic { display: contents; }
[id] { scroll-margin-top: calc(var(--header-h) + env(safe-area-inset-top)); }
html.menu-aberto { overflow: hidden; }
.pl-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pl-skip {
  position: absolute; left: var(--space-3); top: -100px; z-index: var(--z-modal);
  background: var(--piola-white); color: var(--piola-ink-900); padding: var(--space-3) var(--space-4);
  font-family: var(--font-display); font-weight: var(--weight-bold); text-transform: uppercase;
}
.pl-skip:focus { top: var(--space-3); }

/* ---------- Tipografia utilitaria ---------- */
.pl-eyebrow {
  font-family: var(--font-label);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}
.pl-eyebrow--band {
  display: inline-block;
  background: var(--color-band);
  color: var(--color-on-band);
  padding: var(--space-2) var(--space-3);
}

/* Titulo de secao no padrao do cardapio: caixa alta condensada vermelha + legenda em ardosia */
.pl-title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-brand);
  margin: 0;
  text-wrap: balance;
}
[data-tone="noite"] .pl-title, [data-tone="bordo"] .pl-title { color: var(--piola-red-300); }
[data-tone="marca"] .pl-title { color: var(--piola-white); }
.pl-title--ink { color: var(--color-text); }
.pl-title--xl { font-size: var(--text-3xl); }
.pl-title--md { font-size: var(--text-xl); }
.pl-subtitle {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-band);
  margin: var(--space-2) 0 0;
  max-width: 46ch;
}
[data-tone="noite"] .pl-subtitle { color: var(--piola-slate-300); }
[data-tone="bordo"] .pl-subtitle { color: var(--piola-peach-300); }
[data-tone="marca"] .pl-subtitle { color: var(--piola-red-100); }
.pl-lead { font-size: var(--text-md); line-height: var(--leading-relaxed); font-weight: var(--weight-light); max-width: 56ch; }
.pl-prose { max-width: 62ch; }
.pl-prose p { margin: 0 0 var(--space-4); }
.pl-prose strong { font-weight: var(--weight-semibold); }
.pl-link {
  color: var(--color-brand-text);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em;
  transition: color var(--dur-fast) var(--ease-out);
}
.pl-link:hover { color: var(--color-brand-hover); }

/* Hachura: a linha de barras //// que fecha todos os cardapios impressos */
.pl-hachura {
  display: block; height: 12px; width: 100%;
  color: var(--hachura-color);
  background: repeating-linear-gradient(115deg, currentColor 0 1.5px, transparent 1.5px 5px);
  opacity: 0.9;
}

/* ---------- Botoes ---------- */
.pl-btn {
  --_bg: var(--piola-red-500); --_fg: var(--piola-white); --_bd: var(--piola-red-500);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  min-height: var(--btn-h); padding: 0 var(--btn-px);
  font-family: var(--btn-font); font-weight: var(--weight-bold); font-size: var(--btn-size);
  letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; line-height: 1;
  color: var(--_fg); background: var(--_bg); border: 2px solid var(--_bd); border-radius: var(--btn-radius);
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.pl-btn:hover { --_bg: var(--piola-red-700); --_bd: var(--piola-red-700); transform: translateY(-2px); box-shadow: var(--shadow-red); }
.pl-btn:active { transform: translateY(0); box-shadow: none; }
.pl-btn svg { width: 1.1em; height: 1.1em; flex: none; }
.pl-btn--block { display: flex; width: 100%; }
.pl-btn--outline { --_bg: transparent; --_fg: var(--color-text); --_bd: var(--color-text); }
.pl-btn--outline:hover { --_bg: var(--color-text); --_fg: var(--color-bg); --_bd: var(--color-text); box-shadow: none; }
.pl-btn--light { --_bg: var(--piola-white); --_fg: var(--piola-red-700); --_bd: var(--piola-white); }
.pl-btn--light:hover { --_bg: var(--piola-ink-900); --_fg: var(--piola-white); --_bd: var(--piola-ink-900); box-shadow: none; }
.pl-btn--ghost { --_bg: transparent; --_fg: var(--color-text); --_bd: transparent; padding-inline: 0; min-height: 44px; }
.pl-btn--ghost:hover { --_bg: transparent; --_fg: var(--color-brand-text); --_bd: transparent; transform: none; box-shadow: none; }
.pl-btn--ghost .pl-btn__arrow { transition: transform var(--dur-base) var(--ease-out); }
.pl-btn--ghost:hover .pl-btn__arrow { transform: translateX(4px); }
.pl-btn[aria-disabled="true"], .pl-btn:disabled { opacity: 0.5; pointer-events: none; }
@media (min-width: 768px) { .pl-btn { --btn-px: var(--space-6); } }

/* ---------- Letreiro (assinatura): bloco vermelho + faixa de ardosia ---------- */
.pl-letreiro { display: grid; width: max-content; max-width: 100%; }
.pl-letreiro__logo {
  background: var(--letreiro-bg); padding: clamp(0.9rem, 0.6rem + 1.5vw, 1.75rem) clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
}
.pl-letreiro__logo img { height: clamp(1.5rem, 1.1rem + 2vw, 3.25rem); width: auto; }
.pl-letreiro__band {
  background: var(--letreiro-band); color: var(--piola-white);
  font-family: var(--font-label); font-size: clamp(0.55rem, 0.45rem + 0.5vw, 0.9rem);
  letter-spacing: var(--tracking-label); text-transform: uppercase; line-height: 1;
  padding: clamp(0.6rem, 0.4rem + 1vw, 1.1rem) clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
}
@media (min-width: 768px) {
  /* variacao lateral: igual ao cabecalho dos cardapios (bloco vermelho + faixa na mesma linha) */
  .pl-letreiro--lateral { grid-auto-flow: column; align-items: stretch; width: 100%; }
  .pl-letreiro--lateral .pl-letreiro__band { display: flex; align-items: center; }
}

/* ---------- Header e navegacao ---------- */
.pl-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; height: calc(var(--header-h) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); background: var(--piola-slate-500); color: var(--piola-white);
}
.pl-header__logo { display: flex; align-items: center; flex: none; background: var(--piola-red-500); padding: 0 var(--space-5); padding-left: max(var(--space-5), env(safe-area-inset-left)); }
.pl-header__logo img { height: clamp(1.125rem, 0.9rem + 0.8vw, 1.6rem); width: auto; }
.pl-header__bar { flex: 1; display: flex; align-items: center; justify-content: flex-end; padding-inline: var(--gutter); padding-right: max(var(--gutter), env(safe-area-inset-right)); gap: var(--space-5); }
.pl-header__tagline { display: none; font-family: var(--font-label); font-size: 0.6rem; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.pl-nav { display: none; }
.pl-nav__list { display: flex; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.pl-nav a {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--tap-min); color: inherit; text-decoration: none;
  font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: 1.2rem;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.pl-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 8px; height: 3px; background: var(--piola-white);
  transition: right var(--dur-base) var(--ease-out);
}
.pl-nav a:hover::after, .pl-nav a[aria-current="page"]::after { right: 0; }
.pl-header__cta { display: none; }
.pl-burger {
  width: var(--tap-min); height: var(--tap-min); display: inline-grid; place-content: center; gap: 6px;
  background: transparent; border: 0; color: inherit; cursor: pointer;
}
.pl-burger span { display: block; width: 26px; height: 2px; background: currentColor; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast); }
.pl-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.pl-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.pl-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Painel de navegacao no celular */
.pl-drawer {
  position: fixed; inset: calc(var(--header-h) + env(safe-area-inset-top)) 0 0 0; z-index: var(--z-overlay);
  background: var(--piola-slate-900); color: var(--piola-white);
  padding: var(--space-6) var(--gutter) var(--space-7);
  padding-bottom: max(var(--space-7), calc(env(safe-area-inset-bottom) + var(--space-4)));
  padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right));
  display: flex; flex-direction: column; gap: var(--space-6);
  transform: translateX(100%); visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.pl-drawer[data-open="true"] { transform: none; visibility: visible; transition-delay: 0s; }
.pl-drawer { overflow-y: auto; overscroll-behavior: contain; }
.pl-drawer ul { list-style: none; margin: 0; padding: 0; }
.pl-drawer li { border-bottom: 1px solid rgb(255 255 255 / 0.16); }
.pl-drawer a {
  display: flex; justify-content: space-between; align-items: center; min-height: 64px;
  font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 2.25rem;
  text-transform: uppercase; letter-spacing: var(--tracking-caps); color: inherit; text-decoration: none;
}
.pl-drawer__foot { margin-top: auto; display: grid; gap: var(--space-4); }
/* sem JavaScript: o menu aparece como lista logo abaixo do cabecalho */
html:not(.js) .pl-burger { display: none; }
html:not(.js) .pl-drawer { position: static; transform: none; visibility: visible; padding-block: var(--space-4); }
html:not(.js) .pl-drawer a { min-height: 48px; font-size: 1.5rem; }

@media (min-width: 1024px) {
  .pl-nav { display: block; }
  .pl-header__cta { display: inline-flex; }
  .pl-burger, .pl-drawer { display: none; }
  .pl-header__logo { padding: 0 var(--space-7); }
  .pl-header__tagline { display: none; }
}
@media (min-width: 1280px) { .pl-header__tagline { display: block; margin-right: auto; padding-left: var(--space-6); } }

/* Etiquetas */
.pl-tag {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 0.8125rem;
  letter-spacing: 0.08em; text-transform: uppercase; line-height: 1;
  padding: 5px 8px; background: var(--piola-white); color: var(--piola-ink-900); border-radius: var(--radius-sm);
}
.pl-tag--brand { background: var(--piola-red-500); color: var(--piola-white); }
.pl-tag--veg { background: transparent; color: var(--color-veg); padding-left: 0; }
[data-tone="noite"] .pl-tag--veg { color: #5ED08A; }
.pl-tag__dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: currentColor; }

/* ---------- Hero ----------
   Celular e tablet: a foto fica no topo (altura --hero-foto-h) e se dissolve no tom noite; o texto começa 130 px
   antes do fim da foto, abaixo do lettering da lousa, que fica livre no alto da imagem.
   Desktop: a foto ocupa a coluna direita e o texto fica na esquerda, sobre o degradê, longe do lettering.
   A caixa da foto passa 40 px acima do hero (--hero-extra) para o parallax não deixar vão. */
.pl-hero {
  --hero-extra: 40px;
  --hero-foto-h: min(100vw, 560px);
  --hero-sobe: 130px;
  position: relative; isolation: isolate; display: block;
  padding-top: calc(var(--hero-foto-h) - var(--hero-sobe));
  background: var(--piola-ink-900); color: var(--piola-paper-100); overflow: hidden;
}
.pl-hero--compacto { --hero-foto-h: min(64vw, 400px); --hero-sobe: 80px; }
.pl-hero__media {
  position: absolute; left: 0; top: calc(-1 * var(--hero-extra)); z-index: -2; width: 100%;
  height: calc(var(--hero-foto-h) + var(--hero-extra)); object-fit: cover; object-position: 50% 50%;
  transform: translate3d(0, var(--py, 0px), 0); will-change: transform;
}
.pl-hero--foco-esquerda .pl-hero__media { object-position: 20% 50%; }
.pl-hero--foco-centro .pl-hero__media { object-position: 50% 50%; }
.pl-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgb(15 15 16 / 0.5) 0, rgb(15 15 16 / 0.05) calc(var(--hero-foto-h) * 0.18), rgb(15 15 16 / 0.05) calc(var(--hero-foto-h) * 0.5), rgb(15 15 16 / 0.8) calc(var(--hero-foto-h) * 0.82), rgb(15 15 16 / 0.97) calc(var(--hero-foto-h) * 0.94), var(--piola-ink-900) var(--hero-foto-h));
}
.pl-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: var(--space-5); padding: 0 0 var(--space-7); }
.pl-hero__rotulo { margin: 0; font-family: var(--font-label); font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--piola-ink-300); }
.pl-hero__title {
  margin: 0; font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--text-3xl); line-height: 0.98; letter-spacing: var(--tracking-caps); text-transform: uppercase; text-wrap: balance;
}
.pl-hero--compacto .pl-hero__title { font-size: var(--text-2xl); }
.pl-hero__title em { font-style: normal; color: var(--piola-red-300); }
.pl-hero__lead { margin: 0; max-width: 46ch; font-size: var(--text-md); font-weight: var(--weight-light); line-height: var(--leading-normal); color: var(--piola-paper-100); }
.pl-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pl-hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: var(--text-sm); color: var(--piola-ink-300); }
.pl-hero .pl-selo { position: absolute; right: var(--gutter); top: var(--space-5); }

/* Título em linhas estruturais (cada span em bloco). A linha longa nunca quebra: o corpo acompanha a largura útil
   (a linha mais longa mede cerca de 10,1 em; o divisor 10,8 deixa folga), limitado pelo corpo padrão. */
.pl-hero__title--linhas { font-size: min(var(--text-2xl), calc((100vw - 2 * var(--gutter)) / 10.8)); text-wrap: nowrap; }
.pl-hero__linha { display: block; }

/* Foto clara (fachada de dia): recorte que mantém o letreiro PIOLA inteiro no celular e véu escuro mais firme
   sob o texto branco. A foto fica um pouco mais baixa para caber a largura do letreiro e sem a reserva do parallax
   no topo (sob o cabeçalho fixo, o vão do parallax não aparece); no desktop a reserva volta. */
.pl-hero--foco-letreiro { --hero-extra: 0px; --hero-foto-h: min(86vw, 520px); --hero-sobe: 70px; }
.pl-hero--foco-letreiro .pl-hero__media { object-position: 40% 50%; }
.pl-hero--claro::after {
  background: linear-gradient(180deg, rgb(15 15 16 / 0.42) 0, rgb(15 15 16 / 0.04) calc(var(--hero-foto-h) * 0.2), rgb(15 15 16 / 0.08) calc(var(--hero-foto-h) * 0.5), rgb(15 15 16 / 0.82) calc(var(--hero-foto-h) * 0.78), rgb(15 15 16 / 0.97) calc(var(--hero-foto-h) * 0.92), var(--piola-ink-900) var(--hero-foto-h));
}
@media (min-width: 768px) {
  .pl-hero__inner { padding-bottom: var(--space-8); max-width: 54rem; }
  .pl-hero__media { object-position: 50% 20%; }
  .pl-hero--foco-centro .pl-hero__media { object-position: 50% 50%; }
}
@media (min-width: 1024px) {
  .pl-hero { display: grid; align-items: end; padding-top: 0; min-height: min(100svh - var(--header-h), 860px); min-height: min(100dvh - var(--header-h), 860px); }
  .pl-hero--compacto { min-height: clamp(420px, 62svh, 560px); }
  .pl-hero__inner { padding-top: var(--space-8); max-width: 42rem; margin-inline: max(var(--gutter), calc((100% - var(--container)) / 2)); width: auto; }
  .pl-hero__media { left: auto; right: 0; width: 64%; height: calc(100% + var(--hero-extra)); object-position: 50% 50%; }
  .pl-hero::after {
    background: linear-gradient(90deg, var(--piola-ink-900) 0%, rgb(15 15 16 / 0.96) 30%, rgb(15 15 16 / 0.82) 40%, rgb(15 15 16 / 0.2) 62%, rgb(15 15 16 / 0.05) 100%),
                linear-gradient(0deg, rgb(15 15 16 / 0.55) 0%, transparent 32%);
  }
  .pl-hero .pl-selo { top: auto; bottom: var(--space-8); }
  .pl-hero--foco-letreiro { --hero-extra: 40px; --hero-sobe: 0px; }
  .pl-hero--foco-letreiro .pl-hero__media { object-position: 50% 50%; }
  .pl-hero--claro::after {
    background: linear-gradient(90deg, var(--piola-ink-900) 0%, rgb(15 15 16 / 0.97) 34%, rgb(15 15 16 / 0.88) 44%, rgb(15 15 16 / 0.58) 54%, rgb(15 15 16 / 0.12) 68%, rgb(15 15 16 / 0.02) 100%),
                linear-gradient(0deg, rgb(15 15 16 / 0.55) 0%, transparent 32%);
  }
  .pl-hero__title--linhas { font-size: min(var(--text-2xl), calc((min(100vw, var(--container)) - 2 * var(--gutter)) / 10.8)); }
}

/* Entrada suave do hero (só com JS, sem preferência por menos movimento) */
@media (prefers-reduced-motion: no-preference) {
  html.js .pl-hero__media { animation: pl-hero-foto 1.4s var(--ease-out) both; }
  html.js .pl-hero__inner > * { animation: pl-sobe 0.8s var(--ease-out) both; }
  html.js .pl-hero__inner > :nth-child(2) { animation-delay: 0.08s; }
  html.js .pl-hero__inner > :nth-child(3) { animation-delay: 0.16s; }
  html.js .pl-hero__inner > :nth-child(4) { animation-delay: 0.24s; }
  html.js .pl-hero__inner > :nth-child(5) { animation-delay: 0.32s; }
  html.js .pl-hero .pl-selo { animation: pl-sobe 0.9s var(--ease-out) 0.4s both; }
}
@keyframes pl-sobe { from { opacity: 0; transform: translateY(16px); } }
@keyframes pl-hero-foto { from { opacity: 0; } }

/* Status aberto/fechado */
.pl-status { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-medium); }
.pl-status::before { content: ""; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--piola-ink-300); }
.pl-status[data-state="open"]::before { background: #3BD16F; box-shadow: 0 0 0 4px rgb(59 209 111 / 0.25); animation: pl-pulse 2.4s var(--ease-in-out) infinite; }
.pl-status[data-state="closed"]::before { background: var(--piola-red-300); }
@keyframes pl-pulse { 50% { box-shadow: 0 0 0 8px rgb(59 209 111 / 0); } }

/* ---------- Selo redondo (a placa que pende na calcada) ---------- */
.pl-selo {
  display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center;
  width: clamp(88px, 70px + 6vw, 136px); aspect-ratio: 1; border-radius: var(--radius-full);
  background: var(--piola-red-500); color: var(--piola-white);
  box-shadow: inset 0 0 0 4px var(--piola-red-500), inset 0 0 0 6px rgb(255 255 255 / 0.9), var(--shadow-3);
  transform: rotate(-8deg); transition: transform var(--dur-slow) var(--ease-spring);
}
.pl-selo:hover { transform: rotate(0deg) scale(1.04); }
.pl-selo img { width: 62%; height: auto; }
.pl-selo span { font-family: var(--font-label); font-size: clamp(0.4rem, 0.3rem + 0.4vw, 0.55rem); letter-spacing: 0.2em; text-transform: uppercase; }

/* ---------- Sobre + manifesto ---------- */
.pl-sobre { display: grid; gap: var(--space-7); }
.pl-sobre__media { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); align-items: end; }
.pl-sobre__media img { width: 100%; object-fit: cover; }
.pl-sobre__media img { aspect-ratio: 3 / 4; }
.pl-sobre__media .pl-pic:last-child img { transform: translateY(var(--space-6)); }
.pl-sobre { padding-bottom: var(--space-6); }
.pl-sobre__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin: var(--space-6) 0 0; padding: var(--space-5) 0 0; border-top: 2px solid var(--color-border-strong); }
.pl-fact dt { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-xl); line-height: 1; color: var(--color-brand-text); }
.pl-fact dd { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.3; }
@media (min-width: 1024px) {
  .pl-sobre { grid-template-columns: 1.05fr 1fr; gap: var(--space-9); align-items: center; }
  .pl-sobre--invertido .pl-sobre__media { order: -1; }
}

.pl-manifesto-sec { overflow: hidden; }
.pl-manifesto { display: grid; gap: var(--space-5); justify-items: start; }
.pl-manifesto__texto { margin: 0; font-size: var(--text-md); font-weight: var(--weight-light); color: var(--color-text-muted); }
.pl-manifesto__lettering {
  margin: 0; font-family: var(--font-lettering); font-weight: 400; font-size: clamp(3.25rem, 2rem + 8vw, 8rem);
  line-height: 0.9; text-transform: uppercase; color: var(--piola-paper-100); letter-spacing: 0.01em;
}
.pl-manifesto__lettering b { font-weight: 400; color: var(--piola-coral-400); }
.pl-manifesto-sec .pl-container { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.pl-manifesto__list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-family: var(--font-lettering); font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.4rem); color: var(--piola-peach-300); }

/* ---------- Destaque de pratos ---------- */
.pl-section-head { display: grid; gap: var(--space-3); margin-bottom: var(--space-7); }
@media (min-width: 768px) { .pl-section-head--split { grid-template-columns: 1fr auto; align-items: end; } }

.pl-pratos { display: grid; gap: var(--space-4); grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); padding-bottom: var(--space-3); scrollbar-width: thin; }
.pl-pratos > * { scroll-snap-align: start; }
.pl-pratos:focus-visible { outline: 3px solid var(--piola-blue-500, #2F6095); outline-offset: 2px; }
@media (min-width: 640px) { .pl-pratos { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-5); overflow: visible; scroll-snap-type: none; margin-inline: 0; padding-inline: 0; padding-bottom: 0; } }
@media (min-width: 1024px) { .pl-pratos { grid-template-columns: repeat(4, 1fr); } }

.pl-prato { display: grid; grid-template-rows: auto 1fr; background: var(--color-surface); color: var(--color-text); border-radius: var(--card-radius); overflow: hidden; transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out); }
.pl-prato__link { color: inherit; text-decoration: none; display: inline-block; min-height: 44px; padding-block: 9px; margin-block: -9px; box-sizing: border-box; } /* alvo >= 44px sem mexer no layout */
.pl-prato__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pl-prato { position: relative; }
.pl-prato:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.pl-prato__media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--piola-ink-900); }
.pl-prato__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; transition: transform var(--dur-reveal) var(--ease-out); }
.pl-prato:hover .pl-prato__media img { transform: scale(1.05); }
.pl-prato__body { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-5); }
.pl-prato__name { margin: 0; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg); line-height: 1.05; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.pl-prato__desc { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-light); line-height: 1.45; color: var(--color-text-muted); }
.pl-prato__foot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.pl-price { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-md); font-variant-numeric: tabular-nums; }
.pl-price small { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--text-xs); color: var(--color-text-muted); margin-right: 4px; }

.pl-nota { margin: var(--space-6) 0 0; font-size: var(--text-xs); color: var(--color-text-muted); }

/* Linha de cardapio (base da fase 2): codigo | nome | preco(s) + descricao */
.pl-menu-linha { display: grid; grid-template-columns: 3.2rem 1fr auto; column-gap: var(--space-3); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); }
.pl-menu-linha__code { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: 1.25rem; color: var(--color-code); font-variant-numeric: tabular-nums; text-align: right; line-height: 1.15; }
.pl-menu-linha__name { margin: 0; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 1.25rem; line-height: 1.15; letter-spacing: 0.02em; text-transform: uppercase; }
.pl-menu-linha__name small { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--text-xs); text-transform: none; letter-spacing: 0; color: var(--color-text-muted); }
.pl-menu-linha__prices { display: flex; gap: var(--space-5); font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 1.25rem; font-variant-numeric: tabular-nums; line-height: 1.15; }
.pl-menu-linha__desc { grid-column: 2 / -1; margin: 2px 0 0; font-size: var(--text-sm); font-weight: var(--weight-light); line-height: 1.4; color: var(--color-text); max-width: 46ch; }

/* ---------- Galeria ---------- */
.pl-galeria { display: grid; grid-auto-flow: row dense; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 44vw; gap: var(--space-2); }
.pl-galeria__item { position: relative; overflow: hidden; margin: 0; background: var(--piola-ink-900); }
.pl-galeria__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-reveal) var(--ease-out), filter var(--dur-slow); }
.pl-galeria__item:hover img { transform: scale(1.06); }
.pl-galeria__item--alto { grid-row: span 2; }
.pl-galeria__item--largo { grid-column: span 2; }
/* 3 colunas a partir do tablet: 9 fotos (alto, 2, largo, 2, alto, 2) fecham a grade sem buracos */
@media (min-width: 768px) { .pl-galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 30vw; gap: var(--space-3); } }
@media (min-width: 1280px) { .pl-galeria { grid-auto-rows: 380px; } }

/* Luzes: os pendentes de vidro colorido do salao, como detalhe decorativo */
.pl-luzes { display: flex; justify-content: center; gap: clamp(1rem, 0.5rem + 3vw, 2.5rem); height: 150px; pointer-events: none; }
.pl-luz { position: relative; width: 28px; padding-top: var(--drop, 20px); transform-origin: top center; animation: pl-sway 6s var(--ease-in-out) infinite alternate; }
.pl-luz::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: var(--drop, 20px); background: rgb(255 255 255 / 0.5); }
.pl-luz::after { content: ""; display: block; height: 60px; border-radius: 14px 14px 18px 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, #000), var(--c)); box-shadow: 0 0 36px var(--c); }
.pl-luz:nth-child(1) { --c: var(--piola-luz-lima); --drop: 10px; animation-delay: -1s; }
.pl-luz:nth-child(2) { --c: var(--piola-luz-violeta); --drop: 54px; animation-delay: -3s; }
.pl-luz:nth-child(3) { --c: var(--piola-luz-magenta); --drop: 30px; animation-delay: -2s; }
.pl-luz:nth-child(4) { --c: var(--piola-luz-ambar); --drop: 70px; animation-delay: -4s; }
@keyframes pl-sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }

/* ---------- Horarios e endereco ---------- */
.pl-info { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.pl-painel .pl-title { color: var(--piola-red-500); }
.pl-eyebrow--painel { color: var(--piola-slate-700); }
.pl-painel__title { margin: var(--space-2) 0 var(--space-5); }
.pl-info__status { margin: 0 0 var(--space-2); }
.pl-info__bloco--cheio { grid-column: 1 / -1; }
.pl-painel { background: var(--piola-paper-100); color: var(--piola-ink-900); border-radius: var(--radius-lg); padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.pl-info__grid { display: grid; gap: var(--space-5); }
.pl-info__bloco h3 { margin: 0 0 var(--space-2); font-family: var(--font-label); font-weight: 400; font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--piola-slate-700); }
.pl-info__bloco .pl-link { display: inline-block; padding-block: 12px; margin-block: -12px; } /* alvo de toque >= 44px sem mexer no layout */
.pl-info__bloco p, .pl-info__bloco address { margin: 0; font-style: normal; font-size: var(--text-base); line-height: 1.45; }
.pl-info__big { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-xl); line-height: 1.02; text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.pl-horarios { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pl-horarios th, .pl-horarios td { text-align: left; padding: 10px 0; border-bottom: 1px solid rgb(15 15 16 / 0.14); font-weight: var(--weight-regular); }
.pl-horarios td { text-align: right; font-weight: var(--weight-semibold); }
.pl-horarios tr[aria-current="true"] th, .pl-horarios tr[aria-current="true"] td { color: var(--piola-red-700); font-weight: var(--weight-bold); }
.pl-mapa { display: grid; grid-template-rows: auto auto; background: var(--piola-ink-900); color: var(--piola-white); overflow: hidden; }
.pl-mapa__quadro { aspect-ratio: 4 / 3; min-height: 0; background: var(--piola-ink-800); }
.pl-mapa__quadro:focus-within { outline: 3px solid var(--piola-white); outline-offset: -3px; }
.pl-mapa__quadro iframe { display: block; width: 100%; height: 100%; border: 0; }
.pl-mapa__conteudo { display: grid; justify-items: start; gap: var(--space-3); padding: var(--space-5); }
.pl-mapa__acoes { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.pl-mapa__titulo { margin: 0; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-xl); line-height: 1.02; text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.pl-mapa__endereco { font-style: normal; font-size: var(--text-base); line-height: 1.4; }
@media (min-width: 768px) { .pl-info__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .pl-info { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: stretch; } .pl-mapa { grid-template-rows: minmax(0, 1fr) auto; min-height: 100%; } .pl-mapa__quadro { aspect-ratio: auto; min-height: 320px; } }

/* ---------- CTA de reserva ---------- */
.pl-reserva { background: var(--piola-red-500); color: var(--piola-white); overflow: hidden; }
.pl-reserva__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: center; }
.pl-reserva__title { margin: 0; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-3xl); line-height: 0.96; text-transform: uppercase; letter-spacing: var(--tracking-caps); text-wrap: balance; }
.pl-reserva__text { margin: var(--space-4) 0 0; font-size: 1.2rem; font-weight: 700; max-width: 44ch; } /* branco sobre #ED1C2E = 4,37:1: so texto bold >= 18,66px */
.pl-reserva__actions { display: grid; gap: var(--space-3); }
/* branco sobre #ED1C2E = 4,37:1: so passa como texto grande (bold >= 18,66px); alvo de toque >= 44px */
.pl-reserva__fone { display: flex; align-items: center; justify-content: center; min-height: 44px; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-md); letter-spacing: 0.06em; color: var(--piola-white); text-align: center; text-decoration: none; padding: var(--space-2); }
.pl-reserva__fone:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.pl-reserva .pl-hachura { color: var(--piola-white); opacity: 0.5; margin-top: var(--space-7); }
@media (min-width: 768px) { .pl-reserva__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-8); } }

/* ---------- Redes ---------- */
.pl-redes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.pl-rede { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); min-height: 72px; background: var(--color-surface); color: var(--color-text); text-decoration: none; border: 2px solid var(--color-border-strong); transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.pl-rede:hover { background: var(--color-text); color: var(--color-bg); transform: translateX(4px); }
.pl-rede svg { width: 28px; height: 28px; }
.pl-rede__nome { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 1.375rem; text-transform: uppercase; letter-spacing: var(--tracking-caps); line-height: 1.05; }
.pl-rede__user { display: block; font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--text-xs); text-transform: none; letter-spacing: 0; opacity: 0.75; }
@media (min-width: 768px) { .pl-redes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Slot do cardapio interativo (fase 2) ---------- */
.pl-menu-slot { display: grid; gap: var(--space-5); padding: clamp(1.5rem, 1rem + 3vw, 3.5rem); background: var(--piola-slate-500); color: var(--piola-white); position: relative; }
.pl-menu-slot::before { content: ""; position: absolute; left: 0; top: 0; width: 12px; height: 100%; background: var(--piola-red-500); }
.pl-menu-slot__links { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pl-menu-slot__texto { margin: 0; color: var(--piola-white); max-width: 56ch; font-size: var(--text-lg, 1.125rem); line-height: 1.55; }
.pl-menu-slot__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.pl-btn--on-dark { --_fg: var(--piola-white); --_bd: var(--piola-white); }
.pl-btn--on-dark:hover { --_bg: var(--piola-white); --_fg: var(--piola-slate-900); --_bd: var(--piola-white); box-shadow: none; }
.pl-menu-slot .pl-title { color: var(--piola-white); }

/* ---------- Footer ----------
   Marca e redes no topo; abaixo, Visite (endereço, trajeto, Uber), Abrimos (status, horário, reserva, telefone) e
   navegação com cardápios. Os botões usam .pl-btn: por isso os links genéricos do rodapé excluem .pl-btn (:not),
   senão a regra de link vence a cascata e quebra ícone e texto do botão. O botão flutuante some quando o rodapé aparece. */
.pl-footer { background: var(--piola-ink-900); color: var(--piola-paper-100); padding-top: var(--space-8); }
.pl-footer__marca { display: grid; gap: var(--space-5); padding-bottom: var(--space-7); }
.pl-footer__logo { display: inline-flex; }
.pl-footer__logo img { height: 2.25rem; width: auto; }
.pl-footer .pl-footer__tag { margin: var(--space-4) 0 0; font-family: var(--font-label); font-size: 0.62rem; letter-spacing: 0.22em; line-height: 1.4; white-space: nowrap; text-transform: uppercase; color: var(--piola-slate-300); }
.pl-footer__grid { display: grid; gap: var(--space-7); padding: var(--space-7) 0; border-top: 1px solid rgb(244 244 244 / 0.14); }
.pl-footer__h { margin: 0 0 var(--space-3); font-family: var(--font-label); font-weight: 400; font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--piola-red-300); }
.pl-footer address, .pl-footer p { margin: 0; font-style: normal; font-size: var(--text-sm); line-height: 1.55; color: var(--piola-paper-100); }
.pl-footer .pl-footer__status { margin: 0 0 var(--space-2); }
.pl-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pl-footer a:not(.pl-btn):not(.pl-ico-rede):not(.pl-footer__credito) { color: inherit; text-decoration: none; display: inline-flex; min-height: 44px; min-width: 44px; align-items: center; }
.pl-footer a:not(.pl-btn):not(.pl-ico-rede):not(.pl-footer__credito):hover { color: var(--piola-red-300); text-decoration: underline; text-underline-offset: 0.2em; }
.pl-footer .pl-footer__credito { display: inline-block; padding-block: 13px; color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.pl-footer .pl-footer__credito:hover { color: var(--piola-red-300); }
.pl-footer__acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-4); }
/* botao cheio do rodape: texto branco de 17px sobre #ED1C2E = 4,37:1; fundo no vermelho de texto (5,89:1) */
.pl-footer .pl-btn:not(.pl-btn--outline) { --_bg: var(--piola-red-700); --_bd: var(--piola-red-700); }
.pl-footer .pl-btn { --btn-px: var(--space-3); --btn-size: 1.0625rem; gap: var(--space-2); min-height: 52px; white-space: normal; text-align: center; line-height: 1.05; }
.pl-footer__links { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-5); align-content: start; }
.pl-footer__meaning { padding: var(--space-5) 0; font-family: var(--font-label); font-size: 0.55rem; letter-spacing: 0.18em; line-height: 1.8; text-transform: uppercase; color: var(--piola-ink-300); }
.pl-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 var(--space-5); padding: var(--space-3) 0 calc(var(--space-5) + env(safe-area-inset-bottom)); font-size: var(--text-xs); color: var(--piola-ink-300); }
.pl-footer .pl-hachura { color: var(--piola-red-500); }
@media (min-width: 768px) {
  .pl-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-footer__links { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .pl-footer__marca { grid-template-columns: 1fr auto; align-items: end; }
  .pl-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-8); }
  .pl-footer__links { grid-column: auto; }
  .pl-footer__col { display: flex; flex-direction: column; }
  .pl-footer__acoes { margin-top: auto; padding-top: var(--space-4); }
  .pl-footer__legal { padding-bottom: var(--space-7); }
}

/* Redes como ícones quadrados (rodapé e página de links), alvo de toque de 48 px */
.pl-ico-redes, .pl-footer .pl-ico-redes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pl-ico-rede { display: grid; place-content: center; width: var(--tap-min); height: var(--tap-min); border: 2px solid currentColor; color: inherit; text-decoration: none; transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.pl-ico-rede svg { width: 22px; height: 22px; }
.pl-ico-rede:hover { background: var(--piola-red-500); border-color: var(--piola-red-500); color: var(--piola-white); transform: translateY(-2px); }
.pl-ico-rede:active { transform: scale(0.96); }

/* Janela de ligação no computador (piola-ui.js, seção 8) */
.pl-call { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--space-4); padding: max(var(--space-4), env(safe-area-inset-top)) max(var(--space-4), env(safe-area-inset-right)) max(var(--space-4), env(safe-area-inset-bottom)) max(var(--space-4), env(safe-area-inset-left)); background: rgb(15 15 16 / 0.8); overflow-y: auto; }
.pl-call[hidden] { display: none; }
.pl-call__card { position: relative; width: min(100%, 26rem); display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-7) var(--space-5) var(--space-5); background: var(--piola-paper-100); color: var(--piola-ink-900); border-radius: var(--radius-lg); text-align: center; box-shadow: var(--shadow-3); }
.pl-call__x { position: absolute; top: var(--space-2); right: var(--space-2); display: grid; place-content: center; width: var(--tap-min); height: var(--tap-min); padding: 0; background: transparent; border: 0; color: inherit; cursor: pointer; }
.pl-call__x svg { width: 22px; height: 22px; }
.pl-call__rotulo { margin: 0; font-family: var(--font-label); font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--piola-slate-700); }
.pl-call__lead { margin: 0; max-width: 28ch; line-height: 1.4; }
.pl-call__num { margin: 0; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 2.25rem; line-height: 1; letter-spacing: var(--tracking-caps); color: var(--piola-red-500); }
.pl-call__copiar { min-width: 14rem; }
.pl-call__qr { margin-top: var(--space-2); padding: 12px; background: var(--piola-white); border: 2px solid var(--piola-ink-900); }
.pl-call__qr svg { width: 144px; height: 144px; }
.pl-call__dica { margin: 0; font-size: var(--text-xs); color: var(--piola-ink-600); }
html.popup-aberto { overflow: hidden; }

/* ---------- Página de links da bio (/links) ----------
   Celular: a foto abre a página e se dissolve no tom noite; o letreiro entra por cima dela. Computador: foto na metade esquerda,
   na altura da lista, e a lista na direita. As linhas reaproveitam .pl-rede (o mesmo componente da seção de redes). */
.pl-bio { --bio-foto-h: min(82vw, 380px); position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; background: var(--piola-ink-900); color: var(--piola-paper-100); overflow: hidden; }
.pl-bio__foto { position: absolute; inset: 0 0 auto 0; z-index: -1; height: var(--bio-foto-h); }
.pl-bio__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(15 15 16 / 0.5) 0, rgb(15 15 16 / 0) 30%, rgb(15 15 16 / 0.7) 72%, var(--piola-ink-900) 100%); }
.pl-bio__media { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.pl-bio__col { width: min(100% - 2 * var(--gutter), 30rem); margin-inline: auto; padding: calc(var(--bio-foto-h) - 72px) 0 calc(var(--space-6) + env(safe-area-inset-bottom)); display: grid; gap: var(--space-5); }
.pl-bio__letreiro .pl-letreiro__logo { margin: 0; }
.pl-bio__letreiro .pl-letreiro__band { margin: 0; }
.pl-bio__intro { display: grid; gap: var(--space-2); }
.pl-bio__intro p { margin: 0; }
.pl-bio__status { font-size: var(--text-sm); color: var(--piola-paper-100); }
.pl-bio__texto { font-size: 1.125rem; font-weight: var(--weight-light); line-height: 1.45; color: var(--piola-paper-100); }
.pl-bio__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.pl-rede--primaria { background: var(--piola-red-700); border-color: var(--piola-red-700); color: var(--piola-white); }
.pl-rede--primaria .pl-rede__user { opacity: 1; }
.pl-bio__redes { justify-content: center; padding-top: var(--space-2); }
.pl-bio__rodape { display: grid; gap: var(--space-2); padding-top: var(--space-4); text-align: center; font-size: var(--text-sm); color: var(--piola-ink-300); }
.pl-bio__rodape address, .pl-bio__rodape p { margin: 0; font-style: normal; }
.pl-bio__rodape .pl-hachura { color: var(--piola-red-500); margin-block: var(--space-3); }
.pl-bio__credito a { display: inline-block; padding-block: 12px; color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.pl-bio__credito a:hover { color: var(--piola-red-300); }
@media (prefers-reduced-motion: no-preference) {
  .pl-bio__lista li { animation: pl-sobe 0.6s var(--ease-out) both; }
  .pl-bio__lista li:nth-child(2) { animation-delay: 0.05s; }
  .pl-bio__lista li:nth-child(3) { animation-delay: 0.1s; }
  .pl-bio__lista li:nth-child(4) { animation-delay: 0.15s; }
  .pl-bio__lista li:nth-child(5) { animation-delay: 0.2s; }
  .pl-bio__lista li:nth-child(6) { animation-delay: 0.25s; }
  .pl-bio__lista li:nth-child(7) { animation-delay: 0.3s; }
}
@media (min-width: 1024px) {
  .pl-bio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pl-bio__foto { position: relative; inset: auto; z-index: 0; grid-column: 1; height: auto; }
  .pl-bio__media { position: absolute; inset: 0; }
  .pl-bio__foto::after { background: linear-gradient(90deg, rgb(15 15 16 / 0.1) 0, rgb(15 15 16 / 0) 50%, var(--piola-ink-900) 100%); }
  .pl-bio__col { grid-column: 2; padding: var(--space-8) 0; align-content: center; }
}

/* Botao flutuante de WhatsApp (celular) */
.pl-fab { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: var(--z-sticky); display: inline-flex; align-items: center; gap: var(--space-2); min-height: 56px; padding: 0 var(--space-5); background: var(--piola-red-500); color: var(--piola-white); border-radius: var(--radius-full); font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 1.25rem; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; box-shadow: var(--shadow-3); }
.pl-fab svg { width: 24px; height: 24px; }
.pl-fab { right: max(var(--space-4), env(safe-area-inset-right)); bottom: max(var(--space-4), calc(env(safe-area-inset-bottom) + var(--space-2))); }
/* Sem JS ele não aparece (o CTA do hero e o do header bastam). Com JS entra depois que o CTA do hero sai da tela. */
.pl-fab { opacity: 0; visibility: hidden; transform: translateY(16px) scale(0.92); pointer-events: none; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-spring), visibility 0s linear var(--dur-base); }
html:not(.js) .pl-fab { display: none; }
.pl-fab.is-on { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
.pl-fab:active { transform: scale(0.96); }
@media (min-width: 1024px) { .pl-fab { display: none; } }

/* Tarja: palavra destacada sobre bloco vermelho, como "DA FORTUNA" e "29/SET" nas artes do feed [V, visto no Instagram] */
.pl-tarja {
  display: inline-block; padding: 0.06em 0.28em 0.02em; background: var(--piola-red-500); color: var(--piola-white);
  font-family: var(--font-display); font-weight: var(--weight-medium); letter-spacing: 0.2em; text-transform: uppercase;
}
.pl-tarja--bordo { background: var(--piola-red-900); }

/* ---------- Revelar ao rolar (opcional, piola-ui.js) ---------- */
html.js .pl-reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
html.js .pl-reveal.is-visible, html.sem-ui .pl-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .pl-reveal { opacity: 1; transform: none; transition: none; } .pl-luz { animation: none; } }

/* Manifesto no desktop: lettering e texto à esquerda, pendentes e lista à direita, ocupando a altura */
@media (min-width: 1024px) {
  .pl-manifesto-sec .pl-container { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "texto luzes" "texto lista"; column-gap: var(--space-9); row-gap: 0; align-items: stretch; }
  .pl-manifesto-sec .pl-manifesto { grid-area: texto; align-content: center; }
  .pl-manifesto-sec .pl-luzes { grid-area: luzes; height: auto; min-height: 260px; align-items: flex-start; justify-content: space-between; padding-inline: var(--space-4); }
  .pl-manifesto-sec .pl-luz { width: clamp(40px, 4vw, 56px); }
  .pl-manifesto-sec .pl-luz::after { height: clamp(90px, 9vw, 130px); border-radius: 22px 22px 30px 30px; }
  .pl-manifesto-sec .pl-luz:nth-child(1) { --drop: 24px; }
  .pl-manifesto-sec .pl-luz:nth-child(2) { --drop: 96px; }
  .pl-manifesto-sec .pl-luz:nth-child(3) { --drop: 52px; }
  .pl-manifesto-sec .pl-luz:nth-child(4) { --drop: 130px; }
  .pl-manifesto-sec .pl-manifesto__list { grid-area: lista; flex-direction: column; flex-wrap: nowrap; gap: 0; align-self: end; font-size: clamp(2rem, 1.2rem + 2.4vw, 3.4rem); line-height: 1.1; }
  .pl-manifesto-sec .pl-manifesto__list li { padding: var(--space-3) 0; border-top: 1px solid rgb(251 200 180 / 0.28); transition: transform var(--dur-base) var(--ease-out), color var(--dur-base); }
  .pl-manifesto-sec .pl-manifesto__list li:last-child { border-bottom: 1px solid rgb(251 200 180 / 0.28); }
  .pl-manifesto-sec .pl-manifesto__list li:hover { transform: translateX(10px); color: var(--piola-coral-400); }
}

/* ==========================================================================
   PÁGINAS INTERNAS E MOVIMENTO (2026-10-02)
   ========================================================================== */

/* Galeria: foto como link de ampliação, botão "mais" */
.pl-galeria__abrir { display: block; width: 100%; height: 100%; cursor: zoom-in; position: relative; }
.pl-galeria__abrir:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -6px; }
.pl-galeria__abrir::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(15 15 16 / 0.35), transparent 40%); opacity: 0; transition: opacity var(--dur-base); }
.pl-galeria__abrir:hover::after, .pl-galeria__abrir:focus-visible::after { opacity: 1; }
.pl-galeria__mais { margin: var(--space-6) 0 0; text-align: center; }

/* Linha do tempo (A casa) */
.pl-marcos { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: 0; }
.pl-marco { display: grid; grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr); gap: var(--space-5); align-items: start; padding: var(--space-5) 0; border-top: 2px solid var(--color-text); }
.pl-marco:last-child { border-bottom: 2px solid var(--color-text); }
.pl-marco__ano { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-2xl); line-height: 0.9; letter-spacing: var(--tracking-caps); color: var(--piola-red-500); text-transform: uppercase; }
.pl-marco__rotulo { margin: 0 0 var(--space-1); font-family: var(--font-label); font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted); }
.pl-marco__texto { margin: 0; font-size: var(--text-md); line-height: var(--leading-normal); max-width: 46ch; }

/* Faixa de fotos: carrossel com snap no celular, colunas iguais no desktop */
.pl-faixa { display: grid; grid-auto-flow: column; grid-auto-columns: 70%; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) var(--space-3); scroll-padding-inline: var(--gutter); scrollbar-width: thin; }
.pl-faixa:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.pl-faixa__item { scroll-snap-align: start; overflow: hidden; aspect-ratio: 3 / 4; background: var(--piola-ink-900); }
.pl-faixa__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-reveal) var(--ease-out); }
.pl-faixa__item:hover img { transform: scale(1.05); }
.pl-faixa__titulo { margin-bottom: var(--space-5); }
@media (min-width: 640px) { .pl-faixa { grid-auto-columns: 38%; } }
@media (min-width: 1024px) { .pl-faixa { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); overflow: visible; scroll-snap-type: none; margin-inline: 0; padding: 0; } }


.pl-avisos { list-style: none; margin: var(--space-7) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.pl-avisos li { padding: var(--space-4) var(--space-5); background: var(--piola-peach-100); border-left: 6px solid var(--piola-red-500); font-size: var(--text-base); line-height: 1.45; max-width: 72ch; }
.pl-painel__link { margin: var(--space-5) 0 0; }
.pl-menu-slot__mais { margin: 0; }

/* Lightbox (montado por piola-ui.js) */
.pl-lb { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: rgb(15 15 16 / 1); color: var(--piola-white); opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); touch-action: pan-y; }
.pl-lb.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.pl-lb__top { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-4); }
.pl-lb__count { font-family: var(--font-label); font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.pl-lb__stage { position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; padding: 0 var(--space-4); }
.pl-lb__img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 10rem); max-height: calc(100dvh - 10rem); object-fit: contain; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.pl-lb__img.is-trocando { opacity: 0; transform: scale(0.98); }
.pl-lb__cap { margin: 0; padding: var(--space-4); text-align: center; font-size: var(--text-sm); line-height: 1.4; color: var(--piola-ink-300); min-height: 3.2em; }
.pl-lb__btn { display: inline-grid; place-content: center; width: 48px; height: 48px; padding: 0; background: rgb(255 255 255 / 0.12); border: 0; border-radius: var(--radius-full); color: inherit; cursor: pointer; transition: background var(--dur-fast), transform var(--dur-base) var(--ease-out); }
.pl-lb__btn:hover { background: var(--piola-red-500); }
.pl-lb__btn:active { transform: scale(0.94); }
.pl-lb__btn:focus-visible { outline: 3px solid var(--piola-white); outline-offset: 3px; }
.pl-lb__btn svg { width: 22px; height: 22px; }
.pl-lb__prev, .pl-lb__next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; }
.pl-lb__prev { left: var(--space-3); }
.pl-lb__next { right: var(--space-3); }
.pl-lb__prev:active, .pl-lb__next:active { transform: translateY(-50%) scale(0.94); }
.pl-lb__prev svg { transform: scaleX(-1); }
html.lb-aberto { overflow: hidden; }
@media (max-width: 767px) { .pl-lb__prev, .pl-lb__next { top: auto; bottom: var(--space-2); transform: none; } .pl-lb__prev { left: var(--space-4); } .pl-lb__next { right: var(--space-4); } .pl-lb__prev:active, .pl-lb__next:active { transform: scale(0.94); } .pl-lb__cap { padding-inline: 72px; } }

/* Gaveta: item da página atual */
.pl-drawer a[aria-current="page"] { color: var(--piola-red-300); }

/* Movimento: revelar escalonado, micro interações (tudo desligado com prefers-reduced-motion) */
.pl-btn:active { transform: scale(0.97); }
.pl-btn--ghost:active { transform: none; }
.pl-rede:active { transform: scale(0.99); }
.pl-prato:active { transform: translateY(-1px) scale(0.995); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .pl-hero__media { transform: none !important; }
  .pl-drawer { transition: none; }
}

/* Duas seções seguidas no mesmo fundo: a segunda não repete o respiro de cima (ritmo vertical padrão) */
#historia + .pl-section { padding-top: 0; }

/* ---------- iFood (ação secundária: ícone monocromático, nota, linha na Início e no rodapé) ---------- */
.pl-ico-ifood { width: 2.1em; height: auto; flex: none; }
.pl-rede svg.pl-ico-ifood { width: 28px; height: auto; }
.pl-btn--ifood svg.pl-ico-ifood { width: 2.2em; height: auto; }
.pl-btn__nota { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: 0.75em; letter-spacing: 0.02em; opacity: 0.9; }
.pl-btn__nota svg { width: 0.95em; height: 0.95em; }
.pl-footer__acoes .pl-btn--ifood { grid-column: 1 / -1; }
.pl-menu-slot__ifood { margin: 0; color: var(--piola-white); font-size: var(--text-sm); }
.pl-menu-slot__ifood a { color: inherit; font-weight: var(--weight-semibold); text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- CTA inteligente por horário (data-cta="aberto" | "fechado") ----------
   O servidor entrega o estado certo e piola-ui.js reavalia a cada minuto no fuso de Curitiba. [hidden] vence qualquer display do componente. */
[data-cta][hidden] { display: none !important; }
.pl-status[data-state="soon"]::before { background: #F2B632; box-shadow: 0 0 0 4px rgb(242 182 50 / 0.25); }
.pl-fab--ligar { right: auto; left: max(var(--space-4), env(safe-area-inset-left)); }
.pl-fab[data-state="open"]::after { content: ""; position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; border-radius: var(--radius-full); background: #3BD16F; box-shadow: 0 0 0 0 rgb(59 209 111 / 0.55); animation: pl-pulse-fab 2.4s var(--ease-in-out) infinite; }
.pl-fab--ligar[data-state="open"]::after { right: auto; left: 2px; }
@keyframes pl-pulse-fab { 50% { box-shadow: 0 0 0 8px rgb(59 209 111 / 0); } }
@media (prefers-reduced-motion: reduce) { .pl-fab[data-state="open"]::after { animation: none; } }