/* ============================================================================
   EMMA CAFÉ BISTROT — Design System em código
   Direção: garimpo/arte/quente, seguindo o mockup referencia-rapha.pdf
   (Rapha). Fundo bege chapado, titulos em vinho, corpo em preto suave,
   footer em faixa bordo. Acentos (rosa/verde/azul/salmao) so pontuais,
   nunca em texto corrido. Zero card, zero pattern, zero sombra, zero
   borda, zero radius, zero animacao decorativa.
   Frame Tecnologia · 2026-07-15 · migracao de paleta (era azul-dominante).
   ZERO emoji. PT-BR com acentos. Fontes: Noto Sans JP + Noto Sans Condensed
   (carregadas via <link> em includes/head.php, com preconnect).
   ============================================================================ */

/* ─────────────────────────────────────────────────────────────
   NUCLEO — paleta aprovada pela cliente em 2026-07-15, extraida do
   mockup referencia-nova/referencia-rapha.pdf (ver paleta-rapha.css).
────────────────────────────────────────────────────────────── */
:root{
  --fundo:#fff4d6;       /* bege quente — unico fundo de pagina, chapado (2026-07-15: ajuste da cliente) */
  --vinho:#8C2614;       /* logo EMMA, titulos de secao */
  --texto:#4A4A4A;       /* corpo de texto, nav, links — preto suave (era azul) */
  --texto-muted:#7A7A7A; /* texto secundario (copyright, legendas, "em breve") */
  --footer-bg:#8e2918;   /* faixa vinho da marca no rodape (2026-07-15: era bordo #663333) */
  --branco:#FAFAF8;      /* texto sobre --vinho e --footer-bg */

  /* acentos — uso pontual/decorativo apenas (nunca texto corrido) */
  --acento-rosa:#E85A9F;
  --acento-verde:#6B8E23;
  --acento-azul:#2C5AA0;
  --acento-salmao:#D8A8A0;

  /* tipografia */
  --fonte-base:"Noto Sans JP",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fonte-italica:"Noto Sans Condensed","Noto Sans JP",system-ui,sans-serif;
  --peso-regular:400; --peso-medio:500; --peso-negrito:700;

  --tracking-logo:.06em;     /* EMMA (wordmark) */
  --tracking-largo:.4em;     /* titulos de secao — "ENTRADAS", "SALADAS" */
  --tracking-rotulo:.18em;   /* nav, rotulos pequenos */

  --tam-logo:clamp(2.75rem,9vw,6rem);
  --tam-logo-sub:clamp(.7rem,1.1vw,.95rem);
  --tam-titulo-secao:clamp(1rem,1.8vw,1.3rem);
  --tam-corpo:1rem;
  --tam-pequeno:.85rem;
  --tam-rotulo:.72rem;
  --altura-linha:1.6;

  --respiro-secao:clamp(4rem,11vw,9rem);
}

/* ─────────────────────────────────────────────────────────────
   BASE / RESET minimo
────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--fonte-base); font-weight:var(--peso-regular);
  font-size:var(--tam-corpo); line-height:var(--altura-linha);
  color:var(--texto); background:var(--fundo);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:var(--texto); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
::selection{background:var(--vinho); color:var(--fundo)}

/* ─────────────────────────────────────────────────────────────
   TIPOGRAFIA — vinho para titulos, texto (preto suave) pra tudo o mais
────────────────────────────────────────────────────────────── */
.emma-display{font-weight:var(--peso-negrito); font-size:var(--tam-logo); line-height:1; letter-spacing:var(--tracking-logo); color:var(--vinho); margin:0}
.emma-title,.titulo-secao{
  font-weight:var(--peso-regular); font-size:var(--tam-titulo-secao); line-height:1.2;
  letter-spacing:var(--tracking-largo); text-transform:uppercase; color:var(--vinho); margin:0
}
.emma-label,.rotulo{
  font-weight:var(--peso-medio); font-size:var(--tam-rotulo); line-height:1.3;
  letter-spacing:var(--tracking-rotulo); text-transform:uppercase; color:var(--vinho)
}
.emma-body,.corpo{font-weight:var(--peso-regular); font-size:var(--tam-corpo); line-height:var(--altura-linha); color:var(--texto); max-width:66ch}
.emma-body--lead,.emma-poetic{font-weight:var(--peso-regular); font-size:1.1rem; line-height:1.5; color:var(--texto); max-width:46ch; margin:0}
.texto-italico{font-family:var(--fonte-italica); font-style:italic; font-weight:var(--peso-regular); color:var(--texto)}
.emma-display,.emma-title{word-break:normal; overflow-wrap:normal; hyphens:none}

/* ─────────────────────────────────────────────────────────────
   LAYOUT
────────────────────────────────────────────────────────────── */
.emma-container{max-width:1320px; margin-inline:auto; padding-inline:clamp(20px,4vw,56px)}
.emma-section{padding-block:var(--respiro-secao)}
.emma-section--editorial{background:var(--fundo)}
.emma-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(16px,2vw,28px)}

/* Full-bleed — quebra o container e ocupa 100% da largura da viewport,
   borda a borda (faixas de foto/galeria, como no mockup referencia-rapha).
   Uso: <div class="full-bleed">...fotos...</div> dentro de .emma-section,
   fora de .emma-container (ou envolvendo o próprio .emma-container, que
   nesse caso deve ter padding-inline:0 no filho). Funciona em qualquer
   nível de aninhamento, não depende da largura do pai. */
.full-bleed,
.secao--full{
  width:100vw; max-width:100vw;
  margin-left:50%; transform:translateX(-50%);
  padding-inline:0;
}

/* ─────────────────────────────────────────────────────────────
   BOTOES — funcionais (whatsapp/contato), nunca ornamentais.
   Sem dourado. Vinho preenchido ou contorno, so isso.
────────────────────────────────────────────────────────────── */
.emma-btn{display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--fonte-base); font-weight:var(--peso-medio); font-size:var(--tam-pequeno);
  letter-spacing:.02em; padding:.8rem 1.4rem; border:1px solid transparent;
  border-radius:999px; cursor:pointer;
  transition:background 160ms cubic-bezier(.22,1,.36,1), border-color 160ms cubic-bezier(.22,1,.36,1)}
.emma-btn--primary{background:var(--vinho); color:var(--fundo)}
.emma-btn--primary:hover{background:color-mix(in srgb, var(--vinho) 78%, black); text-decoration:none}
.emma-btn--secondary{background:var(--vinho); color:var(--fundo)}
.emma-btn--secondary:hover{background:color-mix(in srgb, var(--vinho) 78%, black); text-decoration:none}
.emma-btn--ghost{background:transparent; color:var(--vinho); border-color:color-mix(in srgb, var(--vinho) 30%, transparent)}
.emma-btn--ghost:hover{background:color-mix(in srgb, var(--vinho) 10%, var(--fundo)); text-decoration:none}

/* ─────────────────────────────────────────────────────────────
   RODAPE — faixa bordo (--footer-bg), icones de rede monocromaticos
   em branco, sem borda, sem circulo (alta especificidade: sobrescreve
   css/site.css sem precisar editá-lo)
────────────────────────────────────────────────────────────── */
.site-footer .footer-redes .footer-rede{
  width:auto; height:auto; border:0; background:transparent; color:var(--branco);
}
.site-footer .footer-redes .footer-rede:hover{ background:transparent; color:var(--acento-salmao); opacity:.85; }
.site-footer .footer-redes .footer-rede--soon{ color:color-mix(in srgb, var(--branco) 55%, transparent); }

/* ─────────────────────────────────────────────────────────────
   ABERTURA (home) — capa igual ao cardápio: logo, uma foto, texto
   curtíssimo. Centralizado, respiro enorme, zero moldura/sombra.
────────────────────────────────────────────────────────────── */
.abertura{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:clamp(2.5rem,7vw,5rem);
  padding-block:clamp(3rem,10vw,7rem) clamp(4rem,12vw,8rem);
}
.abertura__marca{ margin:0 }
.abertura__nome{
  margin:0; font-weight:var(--peso-negrito); font-size:var(--tam-logo);
  line-height:1; letter-spacing:var(--tracking-logo); color:var(--vinho);
}
.abertura__sub{
  margin:.5rem 0 0; font-weight:var(--peso-regular); font-size:var(--tam-logo-sub);
  letter-spacing:var(--tracking-largo); text-transform:uppercase; color:var(--vinho);
}
.abertura__foto{ width:100%; max-width:960px }
.abertura__foto img{ width:100%; height:auto }
.abertura__texto{ max-width:46ch; display:flex; flex-direction:column; gap:.35rem }
.abertura__texto .corpo{ margin:0; max-width:none }

/* ─────────────────────────────────────────────────────────────
   MOVIMENTO — respeita prefers-reduced-motion; nada decorativo
────────────────────────────────────────────────────────────── */
.emma-reveal{opacity:0; transform:translateY(12px); transition:opacity 260ms cubic-bezier(.22,1,.36,1),transform 260ms cubic-bezier(.22,1,.36,1)}
.emma-reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important; transition-duration:.001ms!important}
  .emma-reveal{opacity:1; transform:none}
}