@font-face{font-family:"Open Sans";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/opensans-400.woff2) format("woff2")}
@font-face{font-family:"Open Sans";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/opensans-700.woff2) format("woff2")}
@font-face{font-family:"Open Sans";font-weight:800;font-style:normal;font-display:swap;src:url(../fonts/opensans-800.woff2) format("woff2")}
:root{--amber:#feab00;--ink:#626262;--dark:#2e1f14;--nav:#070715;--line:#bab4ac;--bg:#fafaf9;--foot:#100f19}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;font:400 14px/21px "Open Sans",Arial,Tahoma,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{font-family:inherit;font-weight:800;margin:0 0 15px;letter-spacing:0}
h1{color:var(--amber);font-size:25px;line-height:25px}h2{color:var(--amber);font-size:40px;line-height:40px}
h3{color:var(--amber);font-size:32px;line-height:34px}h4{color:var(--dark);font-size:23px;line-height:27px}
a{color:var(--amber);text-decoration:none}a:hover{color:var(--amber)}
a:focus-visible,button:focus-visible{outline:3px solid #1b5fd1;outline-offset:3px}
p{margin:0 0 15px}img{max-width:100%;height:auto}.big{font-size:16px;line-height:28px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:#fff;color:#000;padding:8px 12px;z-index:999}
/* ---------- grade (medidas do Betheme) ---------- */
.wrapper{position:relative;z-index:2;background:var(--bg);margin-bottom:102px}
.wrap{max-width:1220px;margin:0 auto;position:relative}
.row{display:flex;flex-wrap:wrap}.col{margin:0 1% 40px;min-width:0}
.one{width:98%}.one-second{width:48%}.one-third{width:31.333%}.two-third{width:64.666%}.one-fourth{width:23%}
.one-fifth{width:18%}.two-fifth{width:38%}.three-fifth{width:58%}.one-sixth{width:14.666%}
.section{position:relative}.s-white{background:#fff;border-bottom:1px solid var(--line)}
.pad-80-40{padding:80px 0 40px}.pad-80-20{padding:80px 0 20px}.pad-0-40{padding:0 0 40px}
.sp5,.sp20,.sp30{display:block;border:0;background:none;height:1px;width:100%;margin:0 auto}.sp5{margin-bottom:5px}.sp20{margin-bottom:20px}.sp30{margin-bottom:30px}
.hr-narrow{display:block;border:0;height:1px;width:7%;background:#e0e0e0;margin:0 auto 30px}.hr15{display:block;border:0;height:1px;width:100%;margin:0 auto 15px}
.center{text-align:center}.justify{text-align:justify}
/* ---------- cabeçalho split, transparente sobre o hero ---------- */
.topbar{position:absolute;top:0;left:0;right:0;z-index:50;height:100px}
.topin{position:relative;max-width:1240px;height:100%;margin:0 auto}
.menu ul{list-style:none;margin:0;padding:0}.menu li{display:inline-block}
.menu a{display:block;padding:0 20px;font-size:16px;font-weight:700;line-height:100px;color:#fff}
.menu a:hover,.menu a[aria-current="page"]{color:var(--amber)}
.menu-left,.menu-right{position:absolute;top:0;width:38%;text-align:center}.menu-left{left:0}.menu-right{right:0}
.logo{position:absolute;top:0;left:38%;width:24%;text-align:center;height:100%}.logo img{height:100px;width:auto;display:inline-block}
.menu-toggle,.menu-mobile{display:none}
.logo .logo-m{display:none}
.topbar.is-sticky{position:fixed;height:60px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.is-sticky .menu a{line-height:60px;color:#222}.is-sticky .menu a:hover,.is-sticky .menu a[aria-current="page"]{color:var(--amber)}.is-sticky .logo .logo-d{height:35px;margin-top:12px}
/* ---------- hero (home) e título (internas) ---------- */
.hw{position:relative;background:#2a272b center top no-repeat}
/* ===== IMAGEM DE FUNDO DO TÍTULO DE CADA PÁGINA =====
   Para trocar a imagem de uma página, mude o nome do arquivo na linha dela (pasta img/).
   A 2ª imagem de cada linha é reserva: aparece se a 1ª não existir. */
.hw.inner{background-image:url(../img/fundo-titulo.jpg)}                                          /* padrão: Contato e Drinks */
.hw.bg-cardapio{background-image:url(../img/fundo-cardapio.png),url(../img/fundo-titulo.jpg)}      /* página Cardápio */
.hw.bg-cervejas{background-image:url(../img/fundo-cervejas.png),url(../img/fundo-titulo.jpg)}      /* página Cervejas */
.hw.bg-quem{background-image:url(../img/fundo-quem-somos.png),url(../img/fundo-titulo.jpg)}        /* página Quem somos */
.subheader{padding:300px 0 120px;text-align:center}.subheader .title{color:#fff;font-size:80px;line-height:80px;font-weight:800;margin:0}
.hero{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.hero.on video{opacity:1}
.hero.static{background:#000 url(../img/media/hero-poster.webp) center/cover no-repeat}.hero.custom.static{background-image:none}
/* ---------- botão ---------- */
a.button{display:inline-block;background:var(--amber);color:#fff;font-size:14px;line-height:21px;font-weight:400;padding:11px 20px;border-radius:5px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.03),inset 0 4px 3px -2px rgba(0,0,0,.07);transition:filter .2s}
a.button:hover{color:#fff;filter:brightness(.94)}a.button.full{display:block;width:100%;text-align:center}
/* ---------- home ---------- */
.attr{padding:60px 30px;background:center no-repeat;text-align:center}.attr .box{background:var(--bg);padding:50px 8% 35px;opacity:.95}.attr .box p:last-child{margin:0}
.bg-chopes{background-image:url(../img/col-chopes.webp)}.bg-petiscos{background-image:url(../img/col-petiscos.webp)}.bg-cervejas{background-image:url(../img/col-cervejas.webp)}
.imgc{text-align:center}.imgc img{display:inline-block;max-width:100%;height:auto;vertical-align:top}.imgc a{display:block}
.cs{position:relative;padding:0 140px;margin:0 0 20px}.cs-list{overflow:hidden;padding:0 20%}.cs-track{display:flex;transition:transform .45s ease}
.cs-slide{flex:0 0 100%;min-width:0;line-height:0}.cs-slide img{display:block;width:100%;height:auto}
.cs-btn{position:absolute;top:50%;margin-top:-22px;left:50px;display:block;background:var(--amber);border:0;border-radius:5px;width:46px;height:44px;color:#fff;font-size:30px;line-height:40px;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.03),inset 0 4px 3px -2px rgba(0,0,0,.07)}
.cs-btn:hover{filter:brightness(.94)}.cs-next{left:auto;right:50px}
.cs-dots{display:flex;justify-content:center;gap:8px;list-style:none;margin:20px 0 0;padding:0 20%}.cs-dots button{width:12px;height:12px;border-radius:50%;border:0;background:#c9c4be;padding:0;cursor:pointer}.cs-dots .on button{background:var(--amber)}
/* ---------- itens de cardápio ---------- */
.promo_box{overflow:hidden}.photo{width:36%;float:left;line-height:0}.desc{width:56%;margin:0 2% 0 6%;float:left;padding-top:10px}
.photo img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}.photo img.contain{object-fit:contain;padding:5%}
.foto-petisco .photo img{border-radius:50%}.nophoto .desc{width:100%;margin:0}
.pricing-box{float:right;background:none;border:0;margin:0 0 4px 12px}
.price{margin:0;text-align:right;color:var(--amber);white-space:nowrap}
.price>span{font-size:45px;line-height:45px;margin:0 5px;font-weight:400}.price sup.currency{font-size:20px;line-height:20px;top:-10px;position:relative;vertical-align:baseline}
.price .old{text-decoration:line-through;margin-right:4px}
.table_menu{width:100%;border-collapse:collapse}.table_menu td{padding:15px;border-bottom:1px solid #ececec;vertical-align:middle}
.table_menu .c1{text-align:left;width:70%}.table_menu .c2{color:var(--amber);font-size:26px;line-height:26px;width:30%}
.por{background:#ffca49;margin:0 1%}.por-in{max-width:1140px;margin:0 auto;padding:0}.por h2{color:#000;letter-spacing:-3px;line-height:1;margin:20px 0 20px;padding:0 10px}
.por-cols{display:flex;flex-wrap:wrap}.por-cols>div{width:50%;padding:10px;min-width:0}.por-cols img{display:block;width:100%;height:auto}
.pitem{margin-bottom:20px;overflow:hidden;color:#000}.pitem p{color:#000;margin:0 0 15px}.pitem .tag{background:#000;color:#fff;font-weight:800;float:right;font-size:16px;line-height:21px;padding:5px;border-radius:8px;margin-left:10px}.pitem h4{margin:0 0 15px}
.pl{margin:0 0 6px}.pl strong{color:var(--dark)}.cols2{columns:2 260px;column-gap:40px;margin:0 1% 30px}.cols2 .pl{break-inside:avoid}
.valores{margin:0 0 15px 25px;padding:0;list-style:disc}.col>img.fill{display:block;width:100%;height:auto}
/* ---------- rodapé deslizante ---------- */
.footer{position:fixed;left:0;right:0;bottom:0;z-index:1;height:102px;background:var(--foot) url(../img/fundo-rodape.png) repeat center top;color:#c1c0c3;text-align:center}
.footer .fc{border-top:1px solid rgba(255,255,255,.1);padding-top:30px}.footer .copy{margin:0 0 6px}
.social{list-style:none;margin:0;padding:0}.social li{display:inline-block;margin-right:6px}.social li:last-child{margin-right:0}
.social a{color:var(--amber);display:block;transition:all .3s ease-in-out}.social a:hover{color:#fff}.social svg{width:15px;height:15px;display:block}
/* ---------- animação ---------- */
.js .reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}.cs-track{transition:none}}
/* ---------- responsivo (breakpoints do Betheme) ---------- */
@media (max-width:1239px){
 .topbar{height:80px}.topin{padding:0 20px}.menu-left,.menu-right{display:none}
 .logo{left:50%;width:auto;transform:translateX(-50%)}.logo .logo-d{display:none}.logo .logo-m{display:inline-block;height:70px;width:auto;margin-top:5px}
 .menu-toggle{display:block;position:absolute;right:20px;top:23px;width:40px;height:34px;background:none;border:0;cursor:pointer;padding:0}
 .menu-toggle span,.menu-toggle span::before,.menu-toggle span::after{display:block;position:absolute;left:6px;right:6px;height:3px;background:#fff;border-radius:2px;content:""}
 .menu-toggle span{top:15px}.menu-toggle span::before{top:-9px;left:0;right:0}.menu-toggle span::after{top:9px;left:0;right:0}
 .is-sticky .menu-toggle span,.is-sticky .menu-toggle span::before,.is-sticky .menu-toggle span::after{background:#222}
 .topbar.is-sticky{height:60px}.is-sticky .logo .logo-m{height:50px;margin-top:5px}.is-sticky .menu-toggle{top:13px}
 .menu-mobile{position:absolute;top:100%;left:0;right:0;background:var(--nav);text-align:center;padding:8px 0}
 .menu-mobile:not([hidden]){display:block}.menu-mobile li{display:block}.menu-mobile a{display:block;line-height:50px;font-size:16px;font-weight:700;color:#fff;padding:0 20px}
 .menu-mobile a:hover,.menu-mobile a[aria-current="page"]{color:var(--amber)}
}
@media (min-width:960px) and (max-width:1239px){.wrap{max-width:940px}}
@media (max-width:959px){
 body{font-size:13px;line-height:19px}.big{font-size:14px;line-height:24px}
 h1{font-size:21px;line-height:21px}h2{font-size:34px;line-height:34px}h3{font-size:27px;line-height:29px}h4{font-size:20px;line-height:23px}.subheader .title{font-size:68px;line-height:68px}
 .price>span{font-size:40px;line-height:40px}.price sup.currency{font-size:18px;line-height:18px}.wrapper{margin-bottom:0}.footer{position:static;height:auto;padding-bottom:30px}
}
@media (min-width:768px) and (max-width:959px){.wrap{max-width:708px}}
@media (max-width:767px){
 .wrap{max-width:700px;padding:0 33px}.row{display:block}.col,.col.one,.col.one-second,.col.one-third,.col.two-third,.col.one-fourth,.col.one-fifth,.col.two-fifth,.col.three-fifth,.col.one-sixth{width:100%;margin:0 0 20px;clear:both}
 .pl-col{height:0;margin:0 0 20px}.big{font-size:13px;line-height:21px}h1{font-size:19px;line-height:19px}h2{font-size:30px;line-height:30px}h3{font-size:24px;line-height:26px}h4{font-size:17px;line-height:20px}.subheader .title{font-size:60px;line-height:60px}
 .price>span{font-size:34px;line-height:34px}.price sup.currency{font-size:16px;line-height:16px}.cs{padding:0;margin-bottom:0}.cs-btn{display:none}.cs-dots{padding:0 20%}
 .por{margin:0}.por-cols>div{width:100%}.section.pad-80-40,.section.pad-80-20{padding-left:0;padding-right:0}
}
@media (max-width:479px){.big{line-height:19px}h1{font-size:15px;line-height:19px}h2{font-size:24px;line-height:24px}h3{font-size:19px;line-height:20px}h4{font-size:14px;line-height:19px}.subheader .title{font-size:48px;line-height:48px}.price>span{font-size:32px;line-height:32px}.price sup.currency{font-size:14px;line-height:14px}}
.attr.justify{text-align:justify}.attr.justify h2{text-align:left}
