/* ============================================================
   HERA BAR E BOTEQUIM — folha de estilo única
   Site estático · HostGator · MMKT · ago/2026
   Paleta oficial Hera Food & Drinks
   ------------------------------------------------------------
   CONTRASTE (WCAG AA)
   azul #2C508D sobre creme #FAF4E8 ....... 7,26:1  OK
   texto #1F2A3D sobre creme .............. 13,2:1  OK
   azul escuro #16294A sobre amarelo ....... 7,8:1  OK
   ATENÇÃO: amarelo #F8B125 NUNCA como texto sobre creme
   ou branco (1,86:1 — reprova). Amarelo é fundo de botão,
   filete e etiqueta. Para texto-destaque em fundo claro usar
   o âmbar escuro #9A6400 (5,0:1).
   ============================================================ */

:root{
  --azul:#2C508D;
  --azul-esc:#16294A;
  --azul-mid:#3A67AF;
  --amarelo:#F8B125;
  --amarelo-esc:#9A6400;
  --turquesa:#69CBD4;
  --coral:#F05736;

  --creme:#FAF4E8;
  --creme-2:#F2E9D8;
  --texto:#1F2A3D;
  --texto-suave:#5A6779;
  --branco:#FFFFFF;

  --barra-h:52px;
  --topo-h:74px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--topo-h) + var(--barra-h) + 12px)}

body{
  font-family:'Sora','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--creme);
  color:var(--texto);
  line-height:1.65;
  font-size:16.5px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit}

.disp{
  font-family:'Sora','Inter',system-ui,sans-serif;
  font-weight:800;
  letter-spacing:-.02em;
  text-transform:uppercase;
  line-height:1.02;
}

/* ---------- ACESSIBILIDADE ---------- */
.pular{
  position:absolute;left:-9999px;top:0;z-index:9999;
  background:var(--amarelo);color:var(--azul-esc);
  padding:12px 20px;font-weight:700;
}
.pular:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--turquesa);outline-offset:2px}

/* ============================================================
   TOPO — logo ao centro, idiomas à direita
   ============================================================ */
.topo{
  position:sticky;top:0;z-index:200;
  background:var(--creme);
  border-bottom:1px solid rgba(44,80,141,.14);
}
.topo-in{
  max-width:1240px;margin:0 auto;
  height:var(--topo-h);
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:0 20px;
}
.marca{
  font-family:'Sora','Inter',system-ui,sans-serif;
  font-size:27px;letter-spacing:.06em;text-transform:lowercase;
  color:var(--azul);text-decoration:none;line-height:1;
font-weight:800;}
.marca span{
  display:block;font-family:'Sora','Inter',sans-serif;
  font-size:8.5px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--amarelo-esc);font-weight:700;margin-top:3px;
}
.idiomas{display:flex;gap:2px;align-items:center;font-size:12px;font-weight:600}
.idiomas a{
  color:var(--texto-suave);text-decoration:none;
  padding:5px 8px;letter-spacing:.09em;border-radius:2px;
}
.idiomas a[aria-current="true"]{color:var(--azul);background:var(--creme-2)}
.idiomas a:hover{color:var(--azul)}
.idiomas i{color:rgba(44,80,141,.3);font-style:normal}

/* ============================================================
   BARRA DE AÇÕES — o elemento mais forte da página
   ============================================================ */
.barra{
  position:sticky;top:var(--topo-h);z-index:190;
  background:var(--azul);
}
.barra-in{
  max-width:1240px;margin:0 auto;
  display:flex;align-items:stretch;justify-content:center;
  gap:0;padding:0 8px;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
}
.barra-in::-webkit-scrollbar{display:none}
/* flex + overflow-x + justify-content:center corta o primeiro item quando
   a barra não cabe. Abaixo de 1100px alinha à esquerda e rola normalmente. */
@media(max-width:1100px){
  .barra-in{justify-content:flex-start;padding:0}
  .barra a{padding:0 16px;letter-spacing:.12em}
}
.barra a{
  display:flex;align-items:center;
  height:var(--barra-h);padding:0 20px;
  color:#fff;text-decoration:none;white-space:nowrap;
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:3px solid transparent;transition:.2s;
}
.barra a:hover{background:rgba(255,255,255,.09);border-bottom-color:var(--turquesa)}
.barra a.zap{background:var(--amarelo);color:var(--azul-esc)}
.barra a.zap:hover{background:#ffc44d;border-bottom-color:transparent}

/* ============================================================
   ABERTURA
   ============================================================ */
.abertura{position:relative;min-height:min(88vh,760px);display:flex;align-items:flex-end;overflow:hidden}
.abertura .foto{position:absolute;inset:0}
.abertura .foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(22,41,74,.10) 0%,rgba(22,41,74,.18) 45%,rgba(22,41,74,.55) 100%)}
.abertura-txt{position:relative;z-index:2;width:100%;padding:0;
  border-top:3px solid var(--amarelo);
  background:rgba(13,26,50,.90);
  background:linear-gradient(180deg,rgba(13,26,50,.86) 0%,rgba(13,26,50,.96) 100%);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.abertura-in{max-width:1240px;margin:0 auto;padding:20px 20px 24px}
.abertura h1{font-family:'Sora','Inter',system-ui,sans-serif;
  font-size:clamp(21px,2.6vw,32px);line-height:1.12;font-weight:800;
  color:#fff;text-transform:uppercase;letter-spacing:-.02em;
  max-width:30ch;text-wrap:balance}
.abertura p{color:rgba(255,255,255,.88);font-size:clamp(13.5px,1.35vw,15.5px);
  max-width:62ch;margin-top:9px;line-height:1.55}
.acoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:16px 30px;text-decoration:none;
  font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  border:2px solid transparent;transition:.2s;
}
.btn-am{background:var(--amarelo);color:var(--azul-esc);border-color:var(--amarelo)}
.btn-am:hover{background:#ffc44d;border-color:#ffc44d;transform:translateY(-2px)}
.btn-cl{background:transparent;color:#fff;border-color:rgba(255,255,255,.75)}
.btn-cl:hover{background:#fff;color:var(--azul-esc);border-color:#fff;transform:translateY(-2px)}
.btn-az{background:var(--azul);color:#fff;border-color:var(--azul)}
.btn-az:hover{background:var(--azul-esc);border-color:var(--azul-esc);transform:translateY(-2px)}

/* ============================================================
   FAIXA DE FATOS
   ============================================================ */
.fatos{background:var(--azul);color:#fff}
.fatos-in{
  max-width:1240px;margin:0 auto;padding:0 20px;
  display:grid;grid-template-columns:repeat(4,1fr);
}
.fatos div{
  padding:26px 16px;text-align:center;
  border-right:1px solid rgba(255,255,255,.14);
}
.fatos div:last-child{border-right:none}
.fatos b{
  display:block;font-family:'Sora','Inter',system-ui,sans-serif;font-size:15.5px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--amarelo);
  margin-bottom:4px;font-weight:800;
}
.fatos span{font-size:13px;color:rgba(255,255,255,.82);line-height:1.45}
@media(max-width:760px){
  .fatos-in{grid-template-columns:repeat(2,1fr)}
  .fatos div:nth-child(2){border-right:none}
  .fatos div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.14)}
}

/* ============================================================
   SEÇÕES
   ============================================================ */
section{padding:clamp(56px,8vw,104px) 20px}
.wrap{max-width:1240px;margin:0 auto}
.wrap-sm{max-width:900px;margin:0 auto}
.creme2{background:var(--creme-2)}
.azul{background:var(--azul);color:#fff}
.azul h2,.azul h3{color:#fff}
.azul p{color:rgba(255,255,255,.85)}

.olho{
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--amarelo-esc);font-weight:700;margin-bottom:16px;
  display:flex;align-items:center;gap:12px;
}
.olho::after{content:"";flex:1;height:2px;background:var(--amarelo);max-width:70px;opacity:.75}
.azul .olho{color:var(--amarelo)}
.azul .olho::after{opacity:1}

h2{
  font-family:'Sora','Inter',system-ui,sans-serif;font-weight:800;
  font-size:clamp(25px,4vw,42px);line-height:1.12;letter-spacing:-.02em;
  text-transform:uppercase;color:var(--azul);margin-bottom:22px;
}
h3{
  font-family:'Sora','Inter',system-ui,sans-serif;font-weight:800;
  font-size:22px;text-transform:uppercase;color:var(--azul);
  margin-bottom:10px;letter-spacing:.02em;
}
p{margin-bottom:16px;color:var(--texto-suave)}
p.lead{font-size:clamp(17px,2.1vw,20px);color:var(--texto);line-height:1.6}
strong{color:var(--azul);font-weight:600}
.azul strong{color:var(--amarelo)}

/* duas colunas */
.duas{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:34px}
@media(max-width:820px){.duas{grid-template-columns:1fr;gap:0}}

/* ============================================================
   PRATOS — foto grande, nome em destaque ao lado
   ============================================================ */
.pratos{display:grid;gap:2px;margin-top:44px;background:rgba(44,80,141,.14)}
.prato{
  background:var(--creme);
  display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
}
.prato:nth-child(even){direction:rtl}
.prato:nth-child(even) .prato-txt{direction:ltr}
.prato .foto{min-height:clamp(340px,30vw,420px)}
.prato-txt{padding:clamp(28px,4vw,52px);display:flex;flex-direction:column;justify-content:center}
.prato-txt .cat{
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--amarelo-esc);font-weight:700;margin-bottom:10px;
}
.prato-txt h3{font-size:clamp(21px,3vw,31px);margin-bottom:12px}
.prato-txt p{font-size:15.5px;margin-bottom:14px}
.preco{
  font-family:'Sora','Inter',system-ui,sans-serif;font-weight:700;font-size:20px;color:var(--azul);
  letter-spacing:.03em;
}
.preco small{
  display:block;font-family:'Sora','Inter',sans-serif;font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--texto-suave);
  font-weight:600;margin-top:4px;
}
@media(max-width:820px){
  .prato,.prato:nth-child(even){grid-template-columns:1fr;direction:ltr}
  .prato .foto{min-height:250px}
}

/* ============================================================
   BLOCO DESTAQUE (chope / café da manhã)
   ============================================================ */
.destaque{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:2px}
.destaque .foto{min-height:400px}
.destaque-txt{padding:clamp(32px,5vw,72px);display:flex;flex-direction:column;justify-content:center}
@media(max-width:820px){
  .destaque{grid-template-columns:1fr}
  .destaque .foto{min-height:270px}
}

/* ============================================================
   GALERIA
   ============================================================ */
.galeria{
  display:flex;gap:2px;overflow-x:auto;margin-top:40px;
  scroll-snap-type:x mandatory;padding-bottom:6px;
}
.galeria .foto{
  flex:0 0 clamp(260px,42vw,460px);height:clamp(240px,34vw,380px);
  scroll-snap-align:start;
}
.galeria::-webkit-scrollbar{height:6px}
.galeria::-webkit-scrollbar-thumb{background:var(--azul);border-radius:3px}
.galeria::-webkit-scrollbar-track{background:rgba(44,80,141,.12)}

/* ============================================================
   AVALIAÇÕES
   ============================================================ */
.nota-topo{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.nota-topo b{font-family:'Sora','Inter',system-ui,sans-serif;font-size:52px;color:var(--amarelo);line-height:1;font-weight:800;letter-spacing:-.03em}
.estrelas{color:var(--amarelo);font-size:19px;letter-spacing:.1em}
.avals{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:38px;background:rgba(255,255,255,.16)}
.aval{background:var(--azul);padding:28px 26px}
.aval p{font-size:15px;color:rgba(255,255,255,.9);font-style:italic;margin-bottom:14px}
.aval cite{
  font-style:normal;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--turquesa);font-weight:700;
}
@media(max-width:860px){.avals{grid-template-columns:1fr}}

/* ============================================================
   COMO CHEGAR
   ============================================================ */
.mapa{
  width:100%;height:clamp(280px,40vw,430px);border:0;
  filter:saturate(.9);background:var(--creme-2);
}
.info-linha{
  display:flex;gap:14px;align-items:flex-start;
  padding:17px 0;border-bottom:1px solid rgba(44,80,141,.14);
}
.info-linha:last-child{border-bottom:none}
.info-linha .ic{
  flex-shrink:0;width:34px;height:34px;background:var(--azul);
  display:flex;align-items:center;justify-content:center;
  color:var(--amarelo);font-size:15px;
}
.info-linha b{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--amarelo-esc);font-weight:700;margin-bottom:3px}
.info-linha span{font-size:16px;color:var(--texto);line-height:1.5}
.info-linha a{color:var(--azul);text-decoration:none;font-weight:600}
.info-linha a:hover{text-decoration:underline}

/* ============================================================
   RODAPÉ
   ============================================================ */
footer{background:var(--azul-esc);color:rgba(255,255,255,.72);padding:60px 20px 30px;font-size:14px}
.rod{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
footer h4{
  font-family:'Sora','Inter',system-ui,sans-serif;font-size:14px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amarelo);margin-bottom:14px;font-weight:800;
}
footer a{color:rgba(255,255,255,.78);text-decoration:none}
footer a:hover{color:var(--amarelo)}
footer ul{list-style:none}
footer li{margin-bottom:8px}
.rod-marca{font-family:'Sora','Inter',system-ui,sans-serif;font-size:30px;color:#fff;text-transform:lowercase;letter-spacing:.05em;margin-bottom:10pxfont-weight:800;}
.rod-fim{
  max-width:1240px;margin:44px auto 0;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:12px;color:rgba(255,255,255,.5);line-height:1.8;
}
@media(max-width:820px){.rod{grid-template-columns:1fr;gap:32px}}

/* ============================================================
   WHATSAPP FLUTUANTE
   ============================================================ */
.zap-flut{
  position:fixed;right:16px;bottom:16px;z-index:300;
  width:58px;height:58px;border-radius:50%;
  background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 22px rgba(22,41,74,.32);
  text-decoration:none;transition:.2s;
}
.zap-flut:hover{transform:scale(1.07)}
.zap-flut svg{width:30px;height:30px;fill:#fff}

/* ============================================================
   MARCADOR DE FOTO — provisório, trocar pelas fotos reais
   ============================================================ */
.foto{
  background:
    repeating-linear-gradient(45deg,rgba(44,80,141,.07) 0 12px,transparent 12px 24px),
    var(--creme-2);
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  border:1px dashed rgba(44,80,141,.3);
}
.foto::before{
  content:attr(data-foto);
  position:relative;z-index:1;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--azul);font-weight:700;text-align:center;
  padding:14px 20px;max-width:80%;line-height:1.6;
  background:rgba(250,244,232,.9);
}
/* com foto real, o marcador provisório some */
.foto:has(img){border:none;background:var(--azul-esc)}
.foto:has(img)::before{display:none}
.abertura .foto{align-items:flex-start;justify-content:flex-end}
.abertura .foto::before{background:rgba(250,244,232,.86);margin:14px}
.foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}

@media print{
  .barra,.zap-flut,.topo{position:static}
}

/* ============================================================
   PÁGINAS INTERNAS — capa curta
   ============================================================ */
.capa-pag{position:relative;min-height:min(46vh,420px);display:flex;align-items:flex-end}
.capa-pag .foto{position:absolute;inset:0}
.capa-pag .foto::after{content:"";position:absolute;inset:0;z-index:3;
  background:linear-gradient(180deg,rgba(22,41,74,.25),rgba(22,41,74,.85))}
.capa-pag .wrap{position:relative;z-index:4;padding:0 20px 44px;width:100%}
.capa-pag h1{
  font-family:'Sora','Inter',system-ui,sans-serif;font-weight:800;
  font-size:clamp(30px,5vw,54px);line-height:1.06;letter-spacing:-.025em;
  color:#fff;text-transform:uppercase;text-shadow:0 2px 26px rgba(22,41,74,.55);
}
.capa-pag p{color:rgba(255,255,255,.92);max-width:56ch;margin-top:14px;
  text-shadow:0 1px 12px rgba(22,41,74,.6)}

/* aviso meia/inteira */
.aviso{
  background:var(--azul);color:#fff;padding:26px 28px;margin:0 auto 8px;
  max-width:1240px;border-left:4px solid var(--amarelo);
}
.aviso b{color:var(--amarelo);font-weight:800}
.aviso p{color:rgba(255,255,255,.9);margin:0;font-size:15.5px}

/* índice de seções */
.indice{
  position:sticky;top:calc(var(--topo-h) + var(--barra-h));z-index:150;
  background:var(--creme-2);border-bottom:1px solid rgba(44,80,141,.16);
}
.indice-in{
  max-width:1240px;margin:0 auto;display:flex;gap:0;overflow-x:auto;
  scrollbar-width:none;padding:0 8px;
}
.indice-in::-webkit-scrollbar{display:none}
.indice a{
  padding:13px 15px;white-space:nowrap;text-decoration:none;
  font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--texto-suave);border-bottom:3px solid transparent;
}
.indice a:hover{color:var(--azul);border-bottom-color:var(--amarelo)}

/* grupos e itens do cardápio */
.grupo{margin-bottom:52px}
.grupo > h2{margin-bottom:6px}
.grupo .sub{font-size:14.5px;color:var(--texto-suave);margin-bottom:22px}
.grupo h3{
  font-size:15px;letter-spacing:.14em;color:var(--amarelo-esc);
  margin:34px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--amarelo);
}
.cab{
  display:flex;justify-content:flex-end;gap:26px;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--texto-suave);font-weight:700;padding:0 0 6px;
}
.cab span{width:82px;text-align:right}
.item{
  display:flex;align-items:baseline;gap:14px;
  padding:12px 0;border-bottom:1px solid rgba(44,80,141,.10);
}
.item .nome{flex:1;min-width:0}
.item .nome b{display:block;font-size:16px;font-weight:600;color:var(--texto)}
.item .nome span{display:block;font-size:13.5px;color:var(--texto-suave);line-height:1.5;margin-top:2px}
.item .nome i{display:block;font-style:italic;font-size:13px;color:var(--texto-suave);opacity:.85}
.item .v{
  width:82px;text-align:right;flex-shrink:0;
  font-weight:700;font-size:15.5px;color:var(--azul);
}
.item .v.vazio{color:rgba(44,80,141,.25)}
@media(max-width:620px){
  .cab span{width:66px}
  .item .v{width:66px;font-size:14px}
  .item{gap:8px}
}

/* combo do café da manhã */
.combo{
  background:var(--azul);color:#fff;padding:clamp(28px,5vw,48px);
  border-left:4px solid var(--amarelo);margin-top:8px;
}
.combo .rot{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--amarelo);font-weight:700}
.combo h2{color:#fff;margin:10px 0 8px}
.combo .val{
  font-family:'Sora','Inter',system-ui,sans-serif;font-weight:800;
  font-size:clamp(34px,5vw,48px);color:var(--amarelo);letter-spacing:-.03em;line-height:1;
}
.combo p{color:rgba(255,255,255,.9);margin:14px 0 0;max-width:56ch}
.combo p.en{font-style:italic;opacity:.72;margin-top:4px}

.rodape-legal{
  margin-top:44px;padding:18px 20px;background:var(--creme-2);
  font-size:12.5px;color:var(--texto-suave);line-height:1.7;
}

/* grade da galeria */
.grade{
  display:grid;gap:2px;background:rgba(44,80,141,.14);
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.grade .gitem{margin:0;aspect-ratio:1/1;overflow:hidden;background:var(--azul-esc)}
.grade .gitem img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.grade .gitem:hover img{transform:scale(1.05)}

.abertura .acoes{margin-top:16px}
@media(max-width:640px){.abertura-in{padding:16px 18px 20px}}

/* ===== faixa de azulejo — pattern da marca ===== */
.azulejo{height:clamp(34px,4.4vw,52px);
  background:url("../img/azulejo-faixa.webp") repeat-x center/auto 100%;
  border-top:2px solid var(--azul);border-bottom:2px solid var(--azul)}
.azulejo-fina{height:clamp(20px,2.6vw,28px);
  background:url("../img/azulejo-faixa.webp") repeat-x center/auto 100%}
.creme2{position:relative}
.creme2::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:url("../img/azulejo-lavado.webp") repeat center/380px auto;opacity:.55}
.creme2>*{position:relative;z-index:1}

/* ===== capa em video — duas telas lado a lado ===== */
.videos{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:2px;
  background:var(--azul-esc)}
.vid{position:relative;overflow:hidden;background-color:var(--azul-esc);
  background-size:cover;background-position:center}
.vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .6s ease}
.vid video.pronto{opacity:1}
.videos::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(22,41,74,.02) 0%,rgba(22,41,74,.03) 60%,rgba(22,41,74,.10) 100%)}
@media(max-width:760px){
  .videos{grid-template-columns:1fr}
  .vid-2{display:none}
}
@media(prefers-reduced-motion:reduce){
  .vid video{display:none}
}