/* ==========================================================================
ÉDER ESPETOS RESTAURANTE - DESIGN SYSTEM & FOLHA DE ESTILOS
Identidade: Grafite Predominante (#1C1C1C), Laranja Fogo (#F36B21),
Amarelo Dourado (#F6B72B), Branco Quente (#F7F4EF) e Vermelho Brasa (#C9362B)
========================================================================== */
/* Fontes: carregadas via no de cada página (evita @import bloqueante) */
/* --- VARIÁVEIS / DESIGN TOKENS --- */
:root {
--color-bg-base: #141414;
--color-surface-dark: #1C1C1C;
--color-surface-elevated: #262626;
--color-surface-card: #222222;
--color-surface-card-hover: #2A2A2A;
--color-border-dark: rgba(255, 255, 255, 0.08);
--color-border-subtle: rgba(255, 255, 255, 0.04);
--color-border-glow: rgba(243, 107, 33, 0.35);
--color-bg-light: #F7F4EF;
--color-surface-light: #FFFFFF;
--color-border-light: rgba(0, 0, 0, 0.08);
--color-text-white: #FFFFFF;
--color-text-light: #F7F4EF;
--color-text-muted: #A3A3A3;
--color-text-dark: #1C1C1C;
--color-text-dark-muted: #595959;
--color-primary: #F36B21;
--color-primary-hover: #E0580E;
--color-secondary: #F6B72B;
--color-secondary-hover: #E5A519;
--color-red-brasa: #C9362B;
--color-whatsapp: #25D366;
--color-whatsapp-hover: #20BA5A;
--color-ifood: #EA1D2C;
--color-ifood-hover: #D01422;
--color-99: #FFD400;
--color-99-hover: #E6BF00;
--font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 9999px;
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
--shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);
--shadow-glow: 0 8px 25px rgba(243, 107, 33, 0.25);
--transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--container-max: 1200px;
}
/* --- RESET & BASE --- */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
font-size: 16px;
color-scheme: dark;
}
body {
font-family: var(--font-body);
background-color: var(--color-bg-base);
color: var(--color-text-light);
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
img, picture, video {
max-width: 100%;
height: auto;
display: block;
}
a {
color: inherit;
text-decoration: none;
transition: var(--transition-fast);
}
ul, ol {
list-style: none;
}
button {
font-family: inherit;
cursor: pointer;
border: none;
background: none;
}
/* --- CONTAINERS & LAYOUT --- */
.container {
width: 100%;
max-width: var(--container-max);
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
}
.section {
padding: 80px 0;
position: relative;
}
@media (max-width: 768px) {
.section {
padding: 56px 0;
}
}
.section-dark {
background-color: var(--color-bg-base);
color: var(--color-text-light);
}
.section-surface {
background-color: var(--color-surface-dark);
color: var(--color-text-light);
}
.section-light {
background-color: var(--color-bg-light);
color: var(--color-text-dark);
}
.section-light h2,
.section-light h3,
.section-light h4 {
color: var(--color-text-dark);
}
.section-light p {
color: var(--color-text-dark-muted);
}
/* --- CABEÇALHOS DE SEÇÃO --- */
.section-header {
text-align: center;
max-width: 760px;
margin: 0 auto 48px auto;
}
.section-tag {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(243, 107, 33, 0.12);
color: var(--color-primary);
font-family: var(--font-heading);
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
padding: 6px 14px;
border-radius: var(--radius-full);
border: 1px solid rgba(243, 107, 33, 0.25);
margin-bottom: 16px;
}
.section-tag-gold {
background: rgba(246, 183, 43, 0.12);
color: var(--color-secondary);
border-color: rgba(246, 183, 43, 0.25);
}
.section-title {
font-family: var(--font-heading);
font-size: 2.35rem;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.5px;
margin-bottom: 16px;
color: var(--color-text-white);
}
.section-light .section-title {
color: var(--color-text-dark);
}
.section-desc {
font-size: 1.08rem;
color: var(--color-text-muted);
line-height: 1.65;
}
@media (max-width: 768px) {
.section-title {
font-size: 1.85rem;
}
.section-desc {
font-size: 0.98rem;
}
}
/* --- BOTÕES & CTAS --- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 13px 26px;
font-family: var(--font-heading);
font-weight: 600;
font-size: 0.98rem;
border-radius: var(--radius-md);
transition: var(--transition-fast);
text-align: center;
white-space: nowrap;
}
.btn svg {
width: 22px;
height: 22px;
flex-shrink: 0;
}
.btn-primary {
background: var(--color-primary);
color: #FFFFFF;
box-shadow: 0 4px 14px rgba(243, 107, 33, 0.35);
}
.btn-primary:hover {
background: var(--color-primary-hover);
transform: translateY(-2px);
box-shadow: var(--shadow-glow);
color: #FFFFFF;
}
.btn-secondary {
background: var(--color-surface-elevated);
color: var(--color-text-light);
border: 1px solid var(--color-border-dark);
}
.btn-secondary:hover {
background: var(--color-surface-card-hover);
border-color: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
color: #FFFFFF;
}
.btn-outline-white {
border: 1px solid rgba(255, 255, 255, 0.3);
color: #FFFFFF;
background: transparent;
}
.btn-outline-white:hover {
background: rgba(255, 255, 255, 0.1);
border-color: #FFFFFF;
transform: translateY(-2px);
}
.btn-outline-dark {
border: 1.5px solid var(--color-surface-dark);
color: var(--color-text-dark);
background: transparent;
}
.btn-outline-dark:hover {
background: var(--color-surface-dark);
color: #FFFFFF;
transform: translateY(-2px);
}
.btn-whatsapp {
background: var(--color-whatsapp);
color: #FFFFFF;
box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3);
}
.btn-whatsapp:hover {
background: var(--color-whatsapp-hover);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
color: #FFFFFF;
}
.btn-whatsapp:not(.btn-sm) svg {
width: 26px;
height: 26px;
}
.btn-ifood {
background: var(--color-ifood);
color: #FFFFFF;
box-shadow: 0 4px 14px rgba(234, 29, 44, 0.3);
}
.btn-ifood:hover {
background: var(--color-ifood-hover);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(234, 29, 44, 0.4);
color: #FFFFFF;
}
.btn-99 {
background: var(--color-99);
color: #1C1C1C;
box-shadow: 0 4px 14px rgba(255, 212, 0, 0.3);
}
.btn-99:hover {
background: var(--color-99-hover);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(255, 212, 0, 0.4);
color: #1C1C1C;
}
.btn-sm {
padding: 8px 16px;
font-size: 0.88rem;
}
.btn-lg {
padding: 16px 32px;
font-size: 1.08rem;
}
/* --- HEADER & NAVEGAÇÃO --- */
.site-header {
position: sticky;
top: 0;
z-index: 1000;
background: rgba(20, 20, 20, 0.92);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--color-border-dark);
transition: var(--transition-fast);
}
.site-header.scrolled {
background: rgba(18, 18, 18, 0.98);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 80px;
}
.logo-wrapper {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
}
.site-header .logo-wrapper {
gap: 0;
flex-shrink: 0;
transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.site-header .logo-wrapper:hover {
opacity: 0.94;
transform: scale(1.01);
}
.logo-img {
height: 68px;
width: auto;
max-width: 210px;
object-fit: contain;
border-radius: 0;
display: block;
}
.footer-logo-img {
width: 100%;
max-width: 280px;
height: auto;
object-fit: contain;
display: block;
margin-left: -15px;
}
.nav-desktop {
display: flex;
align-items: center;
gap: 24px;
}
.nav-link {
font-family: var(--font-heading);
font-size: 0.94rem;
font-weight: 500;
color: var(--color-text-light);
padding: 6px 0;
position: relative;
transition: var(--transition-fast);
}
.nav-link:hover,
.nav-link.active {
color: var(--color-primary);
}
.nav-link.active::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: var(--color-primary);
border-radius: 2px;
}
.header-cta {
display: flex;
align-items: center;
gap: 12px;
}
.mobile-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 40px;
height: 40px;
padding: 8px;
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-dark);
border-radius: var(--radius-sm);
color: #FFFFFF;
}
.mobile-toggle span {
display: block;
width: 100%;
height: 2px;
background: #FFFFFF;
transition: var(--transition-fast);
}
/* Mobile Nav Drawer */
.mobile-nav {
display: none;
position: fixed;
top: 80px;
left: 0;
width: 100%;
height: calc(100vh - 80px);
background: var(--color-surface-dark);
padding: 24px 20px;
overflow-y: auto;
z-index: 999;
border-top: 1px solid var(--color-border-dark);
}
.mobile-nav.open {
display: block;
}
.mobile-nav-list {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 28px;
}
.mobile-nav-link {
font-family: var(--font-heading);
font-size: 1.15rem;
font-weight: 600;
color: var(--color-text-light);
padding: 10px 0;
border-bottom: 1px solid var(--color-border-dark);
display: flex;
align-items: center;
justify-content: space-between;
}
.mobile-nav-link.active {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
}
@media (max-width: 992px) {
.nav-desktop, .header-cta .btn-text-only {
display: none;
}
.mobile-toggle {
display: flex;
}
.site-header .logo-img {
height: 58px;
max-width: 180px;
}
}
@media (max-width: 580px) {
.site-header .logo-img {
height: 52px;
max-width: 160px;
}
}
@media (max-width: 420px) {
.site-header .logo-img {
height: 46px;
max-width: 140px;
}
.header-cta .btn-whatsapp span {
display: none;
}
.header-cta .btn-whatsapp {
padding: 10px 14px;
}
}
/* --- HERO PRINCIPAL CINEMATOGRÁFICO COM VÍDEO GASTRONÔMICO --- */
.hero {
position: relative;
min-height: 640px;
display: flex;
align-items: center;
padding: 105px 0 95px 0;
overflow: hidden;
background-color: var(--color-bg-base);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
/* Background com Vídeo Nativo em Tela Cheia */
.hero-video-wrapper {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
pointer-events: none;
}
.hero-video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 72% 50%;
display: block;
}
/* Overlay com Gradiente Dinâmico e Não Destrutivo */
.hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
/* Contraste escuro lateral focado na área de texto */
linear-gradient(90deg,
rgba(14, 14, 14, 0.95) 0%,
rgba(14, 14, 14, 0.90) 32%,
rgba(14, 14, 14, 0.62) 56%,
rgba(14, 14, 14, 0.22) 80%,
rgba(14, 14, 14, 0.05) 100%
),
/* Integração com o header */
linear-gradient(180deg,
rgba(14, 14, 14, 0.72) 0%,
transparent 24%
),
/* Transição suave e contínua para a próxima seção */
linear-gradient(0deg,
var(--color-bg-base) 0%,
rgba(20, 20, 20, 0.85) 6%,
rgba(20, 20, 20, 0.3) 18%,
transparent 42%
),
/* Iluminação quente das brasas */
radial-gradient(ellipse at 78% 70%,
rgba(243, 107, 33, 0.12) 0%,
transparent 55%
);
}
/* Grid & Conteúdo do Hero */
.hero-container {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1.18fr 0.82fr;
gap: 40px;
align-items: center;
width: 100%;
}
.hero-content {
max-width: 660px;
}
/* Badge / Eyebrow Estilo Gastronomia Premium */
.hero-badge {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-heading);
font-size: 0.82rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-secondary);
margin-bottom: 22px;
}
.hero-badge-line {
display: inline-block;
width: 36px;
height: 2px;
background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
border-radius: 2px;
}
/* Título de Alto Impacto */
.hero-title {
font-family: var(--font-heading);
font-size: clamp(2.3rem, 4vw, 3.65rem);
font-weight: 800;
line-height: 1.14;
letter-spacing: -0.03em;
color: #FFFFFF;
margin-bottom: 22px;
text-shadow: 0 4px 24px rgba(0, 0, 0, 0.7);
}
.hero-title span {
display: block;
margin-top: 6px;
font-weight: 700;
background: linear-gradient(135deg, #FFA034 0%, #F6B72B 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: none;
filter: drop-shadow(0 2px 12px rgba(243, 107, 33, 0.3));
}
/* Descrição Elegante e Legível */
.hero-desc {
font-size: clamp(1.02rem, 1.2vw, 1.15rem);
line-height: 1.68;
color: #E8E8E8;
max-width: 620px;
margin-bottom: 34px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}
/* Ações / Botões do Hero */
.hero-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
margin-bottom: 42px;
}
/* CTA Principal: Pedido WhatsApp */
.btn-hero-whatsapp {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background: linear-gradient(135deg, var(--color-whatsapp) 0%, var(--color-whatsapp-hover) 100%);
color: #FFFFFF;
padding: 16px 30px;
border-radius: var(--radius-md);
font-family: var(--font-heading);
font-size: 1.02rem;
font-weight: 700;
letter-spacing: 0.01em;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4), 0 2px 6px rgba(0, 0, 0, 0.4);
text-decoration: none;
position: relative;
overflow: hidden;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-hero-whatsapp::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, transparent 60%);
opacity: 0;
transition: opacity 0.25s ease;
}
.btn-hero-whatsapp:hover {
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(37, 211, 102, 0.6), 0 4px 10px rgba(0, 0, 0, 0.5);
color: #FFFFFF;
}
.btn-hero-whatsapp:hover::before {
opacity: 1;
}
.btn-hero-whatsapp svg {
width: 22px;
height: 22px;
fill: currentColor;
flex-shrink: 0;
}
/* CTA Secundário: Ver Cardápio (Estilo Glassmorphism) */
.btn-hero-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background: rgba(26, 26, 26, 0.7);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: #FFFFFF;
padding: 16px 28px;
border-radius: var(--radius-md);
font-family: var(--font-heading);
font-size: 1.02rem;
font-weight: 600;
border: 1px solid rgba(255, 255, 255, 0.22);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
text-decoration: none;
transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.btn-hero-secondary:hover {
transform: translateY(-2px);
background: rgba(40, 40, 40, 0.85);
border-color: var(--color-primary);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(243, 107, 33, 0.3);
color: #FFFFFF;
}
.btn-hero-secondary svg {
width: 20px;
height: 20px;
flex-shrink: 0;
stroke: currentColor;
}
/* Faixa de Indicadores — transição entre o Hero e a Home */
.hero-stats-strip {
position: relative;
background: linear-gradient(180deg, #161616 0%, #121212 100%);
border-top: 1px solid rgba(243, 107, 33, 0.3);
}
.hero-stats-strip::before {
content: '';
position: absolute;
top: -1px;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(243, 107, 33, 0.7) 20%, rgba(246, 183, 43, 0.8) 50%, rgba(243, 107, 33, 0.7) 80%, transparent);
}
.hero-stats-strip-inner {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 36px;
padding: 26px 20px;
}
.strip-stat {
display: flex;
align-items: center;
gap: 14px;
}
.strip-icon {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%;
background: rgba(243, 107, 33, 0.1);
border: 1px solid rgba(243, 107, 33, 0.3);
color: var(--color-primary);
flex-shrink: 0;
}
.strip-icon svg {
width: 20px;
height: 20px;
}
.strip-text {
display: flex;
flex-direction: column;
gap: 1px;
}
.strip-value {
font-family: var(--font-heading);
font-size: 1.35rem;
font-weight: 800;
color: #FFFFFF;
line-height: 1.1;
letter-spacing: -0.01em;
}
.strip-label {
font-size: 0.8rem;
color: var(--color-text-muted);
line-height: 1.3;
}
.strip-divider {
width: 1px;
height: 40px;
background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.16), transparent);
flex-shrink: 0;
}
/* Responsividade: Tablets e Telas Médias */
@media (max-width: 992px) {
.hero {
min-height: auto;
padding: 75px 0 65px 0;
}
.hero-container {
grid-template-columns: 1fr;
gap: 32px;
}
.hero-video {
object-position: 60% 50%;
}
.hero-overlay {
background:
linear-gradient(180deg,
rgba(14, 14, 14, 0.92) 0%,
rgba(14, 14, 14, 0.84) 45%,
rgba(14, 14, 14, 0.68) 75%,
var(--color-bg-base) 100%
),
linear-gradient(90deg,
rgba(14, 14, 14, 0.75) 0%,
rgba(14, 14, 14, 0.35) 100%
);
}
.hero-title {
font-size: 2.4rem;
}
}
/* Responsividade: Smartphones */
@media (max-width: 640px) {
.hero {
padding: 55px 0 45px 0;
}
.hero-badge {
font-size: 0.74rem;
gap: 8px;
margin-bottom: 16px;
}
.hero-badge-line {
width: 24px;
}
.hero-title {
font-size: 1.88rem;
margin-bottom: 16px;
}
.hero-desc {
font-size: 0.98rem;
margin-bottom: 24px;
}
.hero-actions {
flex-direction: column;
align-items: stretch;
gap: 12px;
margin-bottom: 30px;
}
.btn-hero-whatsapp,
.btn-hero-secondary {
width: 100%;
padding: 14px 20px;
font-size: 0.98rem;
}
.hero-stats-strip-inner {
gap: 18px;
padding: 18px 16px;
}
.strip-stat {
flex-direction: column;
text-align: center;
gap: 8px;
flex: 1;
min-width: 0;
}
.strip-icon {
width: 36px;
height: 36px;
}
.strip-icon svg {
width: 17px;
height: 17px;
}
.strip-value {
font-size: 1.05rem;
}
.strip-label {
font-size: 0.68rem;
line-height: 1.25;
}
.strip-divider {
height: 34px;
}
}
@media (max-width: 380px) {
.hero-stats-strip-inner {
gap: 10px;
padding: 16px 10px;
}
.strip-divider {
height: 28px;
}
.strip-label {
font-size: 0.62rem;
}
}
@media (max-width: 768px) {
.hero-video,
.hero-video.is-mobile-video {
object-fit: cover;
object-position: center center;
}
}
/* Acessibilidade: Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
.hero-video {
display: none;
}
.hero-video-wrapper {
background-image: url('../video/hero-poster.webp');
background-size: cover;
background-position: 72% 50%;
}
}
@media (prefers-reduced-motion: reduce) and (max-width: 768px) {
.hero-video-wrapper {
background-image: url('../video/hero-mobile-poster.webp');
background-position: center center;
}
}
/* Page Banner / Hero Secundário com Suporte a Foto */
.page-hero {
padding: 70px 0;
background: radial-gradient(circle at 80% 20%, rgba(243, 107, 33, 0.09) 0%, transparent 60%),
radial-gradient(circle at 20% 80%, rgba(246, 183, 43, 0.05) 0%, transparent 50%),
var(--color-bg-base);
border-bottom: 1px solid var(--color-border-dark);
position: relative;
overflow: hidden;
}
.page-hero-grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 48px;
align-items: center;
}
.page-hero-content {
max-width: 640px;
}
.page-hero-media {
position: relative;
}
.page-hero-frame {
position: relative;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-lg), 0 0 0 1px var(--color-border-dark);
}
.page-hero-frame img {
width: 100%;
height: 400px;
object-fit: cover;
transition: transform 0.6s ease;
}
.page-hero-frame:hover img {
transform: scale(1.02);
}
.page-hero-badge {
position: absolute;
bottom: 16px;
left: 16px;
background: rgba(20, 20, 20, 0.9);
backdrop-filter: blur(8px);
color: var(--color-secondary);
font-family: var(--font-heading);
font-size: 0.82rem;
font-weight: 700;
padding: 6px 14px;
border-radius: var(--radius-full);
border: 1px solid rgba(246, 183, 43, 0.3);
display: flex;
align-items: center;
gap: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.breadcrumb-nav {
margin-bottom: 16px;
}
.breadcrumbs {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
font-size: 0.85rem;
color: var(--color-text-muted);
}
.breadcrumbs a {
color: var(--color-text-muted);
}
.breadcrumbs a:hover {
color: var(--color-primary);
}
.breadcrumbs .sep {
opacity: 0.4;
}
.breadcrumbs .current {
color: var(--color-text-white);
font-weight: 500;
}
.page-hero-title {
font-family: var(--font-heading);
font-size: 2.65rem;
font-weight: 800;
color: #FFFFFF;
line-height: 1.18;
letter-spacing: -0.5px;
margin-bottom: 16px;
}
.page-hero-desc {
font-size: 1.08rem;
color: var(--color-text-muted);
max-width: 680px;
line-height: 1.65;
}
@media (max-width: 992px) {
.page-hero {
padding: 50px 0;
}
.page-hero-grid {
grid-template-columns: 1fr;
gap: 36px;
}
.page-hero-title {
font-size: 2.05rem;
}
.page-hero-frame img {
height: 320px;
}
}
@media (max-width: 580px) {
.page-hero-title {
font-size: 1.75rem;
}
.page-hero-frame img {
height: 260px;
}
}
/* --- CARDS & GRIDS --- */
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
.grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
@media (max-width: 992px) {
.grid-3, .grid-4 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.grid-2, .grid-3, .grid-4 {
grid-template-columns: 1fr;
gap: 20px;
}
}
/* Card Escuro Padrão */
.feature-card {
background: var(--color-surface-card);
border: 1px solid var(--color-border-dark);
border-radius: var(--radius-lg);
padding: 32px 28px;
transition: var(--transition-base);
display: flex;
flex-direction: column;
}
.feature-card:hover {
background: var(--color-surface-card-hover);
border-color: var(--color-border-glow);
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.feature-icon {
width: 52px;
height: 52px;
border-radius: var(--radius-md);
background: rgba(243, 107, 33, 0.12);
color: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.feature-icon svg {
width: 28px;
height: 28px;
}
.feature-card h3 {
font-family: var(--font-heading);
font-size: 1.3rem;
font-weight: 700;
color: #FFFFFF;
margin-bottom: 12px;
}
.feature-card p {
color: var(--color-text-muted);
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 20px;
flex-grow: 1;
}
.feature-card .card-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-heading);
font-weight: 600;
font-size: 0.92rem;
color: var(--color-primary);
}
.feature-card .card-link:hover {
color: var(--color-secondary);
gap: 12px;
}
/* Flip Cards (Destaques da Home) */
.flip-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px;
}
.flip-card {
height: 400px;
perspective: 1600px;
cursor: pointer;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.55s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.flip-card-front,
.flip-card-back {
position: absolute;
inset: 0;
border-radius: var(--radius-lg);
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}
.flip-card-front {
background: #111;
isolation: isolate;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.flip-card-front img {
position: absolute;
inset: 0;
z-index: -1;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.flip-card-front img.flip-photo-bisteca { object-position: 48% 55%; }
.flip-card-front img.flip-photo-pao-de-alho { object-position: 45% 55%; }
.flip-card-front img.flip-photo-fraldinha { object-position: 45% 55%; }
.flip-card-front img.flip-photo-marmita-churrasco { object-position: 58% 50%; }
.flip-card-caption {
padding: 72px 28px 24px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0) 100%);
display: flex;
flex-direction: column;
gap: 6px;
}
.flip-card-name {
font-family: var(--font-heading);
font-size: 1.55rem;
font-weight: 700;
line-height: 1.2;
color: #FFFFFF;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
.flip-card-toggle {
align-self: flex-start;
padding: 0;
background: none;
border: 0;
font-family: var(--font-heading);
font-size: 0.9rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.82);
cursor: pointer;
}
/* O botão cobre toda a frente: tocar/clicar em qualquer ponto vira o card */
.flip-card-toggle::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
}
.flip-card-toggle:focus-visible {
outline: none;
}
.flip-card-toggle:focus-visible::after {
outline: 2px solid var(--color-primary);
outline-offset: -4px;
border-radius: var(--radius-lg);
}
.flip-card-back {
transform: rotateY(180deg);
background: var(--color-surface-card);
border: 1px solid var(--color-border-dark);
padding: 40px 40px 36px;
display: flex;
flex-direction: column;
justify-content: center;
}
.flip-card .flip-card-back h3 {
font-family: var(--font-heading);
font-size: 1.6rem;
font-weight: 700;
line-height: 1.25;
color: #FFFFFF;
margin-bottom: 16px;
}
.flip-card .flip-card-back p {
color: var(--color-text-muted);
font-size: 1rem;
line-height: 1.7;
margin-bottom: 28px;
max-width: 440px;
}
.flip-card-cta {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-heading);
font-weight: 600;
font-size: 1rem;
color: var(--color-primary);
padding-bottom: 4px;
border-bottom: 1px solid rgba(243, 107, 33, 0.4);
transition: var(--transition-base);
}
.flip-card-cta:hover,
.flip-card-cta:focus-visible {
color: var(--color-secondary);
border-bottom-color: var(--color-secondary);
gap: 12px;
}
/* Desktop (mouse): vira no hover e no foco via teclado */
@media (hover: hover) and (pointer: fine) {
.flip-card:hover .flip-card-inner,
.flip-card:focus-within .flip-card-inner {
transform: rotateY(180deg);
}
}
/* Touch: vira ao tocar (classe aplicada pelo main.js) */
@media (hover: none), (pointer: coarse) {
.flip-card.is-flipped .flip-card-inner {
transform: rotateY(180deg);
}
}
@media (max-width: 992px) {
.flip-grid {
gap: 22px;
}
.flip-card {
height: 380px;
}
.flip-card-back {
padding: 32px 28px;
}
}
@media (max-width: 720px) {
.flip-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.flip-card {
height: 380px;
}
.flip-card-caption {
padding: 64px 22px 20px;
}
.flip-card-name {
font-size: 1.4rem;
}
.flip-card-back {
padding: 28px 24px;
}
.flip-card .flip-card-back h3 {
font-size: 1.4rem;
}
}
/* Movimento reduzido: troca o giro 3D por um fade simples */
@media (prefers-reduced-motion: reduce) {
.flip-card-inner,
.flip-card:hover .flip-card-inner,
.flip-card:focus-within .flip-card-inner,
.flip-card.is-flipped .flip-card-inner {
transform: none;
transition: none;
}
.flip-card-front,
.flip-card-back {
transition: opacity 0.25s ease, visibility 0.25s ease;
}
.flip-card-back {
transform: none;
opacity: 0;
visibility: hidden;
}
}
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
.flip-card:hover .flip-card-front,
.flip-card:focus-within .flip-card-front {
opacity: 0;
}
.flip-card:hover .flip-card-back,
.flip-card:focus-within .flip-card-back {
opacity: 1;
visibility: visible;
}
}
@media (prefers-reduced-motion: reduce) and (hover: none), (prefers-reduced-motion: reduce) and (pointer: coarse) {
.flip-card.is-flipped .flip-card-front {
opacity: 0;
}
.flip-card.is-flipped .flip-card-back {
opacity: 1;
visibility: visible;
}
}
/* Card Gastronômico com Imagem */
.dish-card {
background: var(--color-surface-card);
border: 1px solid var(--color-border-dark);
border-radius: var(--radius-lg);
overflow: hidden;
transition: var(--transition-base);
display: flex;
flex-direction: column;
}
.dish-card:hover {
border-color: var(--color-border-glow);
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.dish-card-img {
position: relative;
height: 240px;
overflow: hidden;
background: #111;
}
.dish-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.dish-card-img img.dish-img-espetinhos {
object-position: 45% 55%;
}
/* Fotos verticais: enquadra o prato dentro da área horizontal do card */
.dish-card-img img.dish-img-restaurante {
object-position: center 56%;
}
.dish-card-img img.dish-img-marmita {
object-position: center 58%;
}
.dish-card:hover .dish-card-img img {
transform: scale(1.04);
}
.dish-badge {
position: absolute;
top: 14px;
right: 14px;
background: rgba(20, 20, 20, 0.88);
backdrop-filter: blur(8px);
color: var(--color-secondary);
font-family: var(--font-heading);
font-size: 0.78rem;
font-weight: 700;
padding: 4px 10px;
border-radius: var(--radius-full);
border: 1px solid rgba(246, 183, 43, 0.3);
}
.dish-card-body {
padding: 24px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.dish-card-title {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 700;
color: #FFFFFF;
margin-bottom: 8px;
}
.dish-card-desc {
font-size: 0.92rem;
color: var(--color-text-muted);
line-height: 1.55;
margin-bottom: 18px;
flex-grow: 1;
}
.dish-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 16px;
border-top: 1px solid var(--color-border-dark);
}
/* Card em Seção Clara */
.section-light .dish-card {
background: #FFFFFF;
border-color: var(--color-border-light);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}
.section-light .dish-card:hover {
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
border-color: rgba(243, 107, 33, 0.3);
}
.section-light .dish-card-title {
color: var(--color-text-dark);
}
.section-light .dish-card-desc {
color: var(--color-text-dark-muted);
}
.section-light .dish-card-footer {
border-top-color: var(--color-border-light);
}
/* --- SEÇÃO "PEÇA DO SEU JEITO" (DELIVERY) --- */
.delivery-section {
background: linear-gradient(180deg, var(--color-surface-dark) 0%, var(--color-bg-base) 100%);
border-top: 1px solid var(--color-border-dark);
border-bottom: 1px solid var(--color-border-dark);
}
.delivery-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.delivery-card {
background: var(--color-surface-card);
border: 1px solid var(--color-border-dark);
border-radius: var(--radius-lg);
padding: 32px 24px;
text-align: center;
transition: var(--transition-base);
display: flex;
flex-direction: column;
align-items: center;
position: relative;
overflow: hidden;
}
.delivery-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
}
.delivery-card.card-whatsapp:hover {
border-color: rgba(37, 211, 102, 0.4);
}
.delivery-card.card-ifood:hover {
border-color: rgba(234, 29, 44, 0.4);
}
.delivery-card.card-99:hover {
border-color: rgba(255, 212, 0, 0.4);
}
.delivery-card.card-whatsmenu:hover {
border-color: rgba(243, 107, 33, 0.4);
}
.delivery-icon {
width: 64px;
height: 64px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
}
.card-whatsapp .delivery-icon {
background: rgba(37, 211, 102, 0.15);
color: var(--color-whatsapp);
}
.card-ifood .delivery-icon {
background: rgba(234, 29, 44, 0.15);
color: var(--color-ifood);
}
.card-99 .delivery-icon {
background: rgba(255, 212, 0, 0.15);
color: var(--color-99);
}
.card-whatsmenu .delivery-icon {
background: rgba(243, 107, 33, 0.15);
color: var(--color-primary);
}
.delivery-card h3 {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 700;
color: #FFFFFF;
margin-bottom: 8px;
}
.delivery-card p {
font-size: 0.9rem;
color: var(--color-text-muted);
line-height: 1.5;
margin-bottom: 22px;
flex-grow: 1;
}
.delivery-card .btn {
width: 100%;
}
@media (max-width: 992px) {
.delivery-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 580px) {
.delivery-grid {
grid-template-columns: 1fr;
}
}
/* Grid de canais com 3 cards (página Espetinho, sem WhatsMenu) */
.delivery-grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 768px) {
.delivery-grid--3 {
grid-template-columns: minmax(0, 1fr);
}
}
/* Refinamento da Home: seção mais compacta e cards uniformes */
.delivery-section--home {
padding: 64px 0 56px;
}
.delivery-section--home .section-header {
margin-bottom: 36px;
}
.delivery-section--home .delivery-grid {
gap: 20px;
}
.delivery-section--home .delivery-card {
padding: 24px 20px;
}
.delivery-section--home .delivery-icon {
width: 56px;
height: 56px;
margin-bottom: 14px;
}
.delivery-section--home .delivery-card h3 {
font-size: 1.15rem;
margin-bottom: 6px;
}
.delivery-section--home .delivery-card p {
margin-bottom: 18px;
}
.delivery-section--home .delivery-card .btn {
min-height: 46px;
justify-content: center;
}
/* Hover discreto só em dispositivos com mouse */
.delivery-section--home .delivery-card:hover {
transform: none;
box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
.delivery-section--home .delivery-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
}
@media (max-width: 768px) {
.delivery-section--home {
padding: 48px 0 44px;
}
.delivery-section--home .section-header {
margin-bottom: 28px;
}
}
@media (max-width: 580px) {
.delivery-section--home .delivery-grid {
gap: 14px;
}
.delivery-section--home .delivery-card {
padding: 20px 18px;
}
.delivery-section--home .delivery-icon {
width: 48px;
height: 48px;
margin-bottom: 10px;
}
.delivery-section--home .delivery-card p {
margin-bottom: 14px;
}
}
/* --- GALERIA DE MARMITAS (PÁGINA DEDICADA) --- */
.marmitas-gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.gallery-item {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
background: #111;
aspect-ratio: 9 / 16;
max-height: 480px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
cursor: pointer;
border: 1px solid var(--color-border-dark);
transition: var(--transition-base);
}
.section-light .gallery-item {
border-color: var(--color-border-light);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.gallery-item:hover img {
transform: scale(1.05);
}
.gallery-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 50%);
display: flex;
align-items: flex-end;
padding: 20px;
opacity: 0;
transition: var(--transition-fast);
}
.gallery-item:hover .gallery-overlay {
opacity: 1;
}
.gallery-overlay span {
display: inline-flex;
align-items: center;
gap: 6px;
color: #FFFFFF;
font-family: var(--font-heading);
font-size: 0.88rem;
font-weight: 600;
background: rgba(243, 107, 33, 0.9);
padding: 6px 12px;
border-radius: var(--radius-sm);
}
@media (max-width: 992px) {
.marmitas-gallery-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 580px) {
.marmitas-gallery-grid {
grid-template-columns: 1fr;
max-width: 360px;
margin: 0 auto;
}
.gallery-overlay {
opacity: 1;
}
}
/* Lightbox Modal */
.lightbox-modal {
display: none;
position: fixed;
inset: 0;
z-index: 2000;
background: rgba(0, 0, 0, 0.92);
backdrop-filter: blur(8px);
align-items: center;
justify-content: center;
padding: 20px;
}
.lightbox-modal.active {
display: flex;
}
.lightbox-content {
position: relative;
max-width: 90vw;
max-height: 90vh;
display: flex;
align-items: center;
justify-content: center;
}
.lightbox-content img {
max-width: 100%;
max-height: 88vh;
object-fit: contain;
border-radius: var(--radius-md);
box-shadow: 0 10px 40px rgba(0,0,0,0.8);
}
.lightbox-close {
position: absolute;
top: -45px;
right: 0;
background: rgba(255, 255, 255, 0.15);
color: #FFFFFF;
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
transition: var(--transition-fast);
}
.lightbox-close:hover {
background: var(--color-primary);
}
.lightbox-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.15);
color: #FFFFFF;
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition-fast);
}
.lightbox-btn:hover {
background: var(--color-primary);
}
.lightbox-prev {
left: 20px;
}
.lightbox-next {
right: 20px;
}
/* --- CARDÁPIO & FILTROS POR ABA --- */
.menu-nav-tabs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-bottom: 40px;
}
.menu-tab-btn {
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 600;
padding: 10px 22px;
border-radius: var(--radius-full);
background: var(--color-surface-elevated);
color: var(--color-text-light);
border: 1px solid var(--color-border-dark);
transition: var(--transition-fast);
}
.menu-tab-btn:hover {
border-color: var(--color-primary);
color: #FFFFFF;
}
.menu-tab-btn.active {
background: var(--color-primary);
border-color: var(--color-primary);
color: #FFFFFF;
box-shadow: 0 4px 14px rgba(243, 107, 33, 0.35);
}
.menu-category-panel {
display: none;
}
.menu-category-panel.active {
display: block;
}
.menu-items-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.menu-item-row {
background: var(--color-surface-card);
border: 1px solid var(--color-border-dark);
border-radius: var(--radius-md);
padding: 18px 20px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
transition: var(--transition-fast);
}
.menu-item-row:hover {
background: var(--color-surface-card-hover);
border-color: rgba(243, 107, 33, 0.3);
}
.menu-item-info h4 {
font-family: var(--font-heading);
font-size: 1.12rem;
font-weight: 700;
color: #FFFFFF;
margin-bottom: 4px;
}
.menu-item-info p {
font-size: 0.88rem;
color: var(--color-text-muted);
line-height: 1.45;
}
.menu-item-tag {
font-family: var(--font-heading);
font-size: 0.75rem;
font-weight: 700;
padding: 3px 8px;
border-radius: var(--radius-sm);
background: rgba(246, 183, 43, 0.15);
color: var(--color-secondary);
border: 1px solid rgba(246, 183, 43, 0.25);
white-space: nowrap;
}
@media (max-width: 768px) {
.menu-items-list {
grid-template-columns: 1fr;
}
}
/* Página Espetinho: destaques com fotos maiores + CTA integrado */
.espetos-destaques .dish-card-img {
height: 280px;
}
.espetos-destaques .espetos-destaque-carne { object-position: 45% 50%; }
.espetos-destaques .espetos-destaque-frango-bacon { object-position: 50% 55%; }
.espetos-destaques .espetos-destaque-linguica { object-position: 50% 60%; }
.espetos-destaques .espetos-destaque-pao-alho { object-position: 50% 58%; }
.espetos-cta {
margin-top: 40px;
padding-top: 32px;
border-top: 1px solid var(--color-border-dark);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 16px 24px;
text-align: center;
}
.espetos-cta .espetos-cta-text {
font-family: var(--font-heading);
font-size: 1.2rem;
font-weight: 600;
color: #FFFFFF;
margin: 0;
}
.espetos-cta .espetos-cta-sub {
font-size: 0.95rem;
color: var(--color-text-muted);
margin: 4px 0 0;
}
/* Faixa de conversão com foto ao fundo (fim da variedade de espetinhos) */
.espetos-cta-band {
margin-top: 48px;
padding: 56px 32px;
border-radius: var(--radius-lg);
border: 1px solid var(--color-border-dark);
background:
linear-gradient(180deg, rgba(12, 12, 12, 0.66) 0%, rgba(12, 12, 12, 0.82) 100%),
url('../Imagens/galeria/espeto-fraldinha-dourados.webp') center 62% / cover no-repeat;
display: flex;
flex-direction: column;
align-items: center;
gap: 22px;
text-align: center;
overflow: hidden;
}
.espetos-cta-band .espetos-cta-text {
font-family: var(--font-heading);
font-size: 1.6rem;
font-weight: 700;
color: #FFFFFF;
margin: 0;
}
.espetos-cta-band .espetos-cta-sub {
font-size: 1rem;
color: rgba(255, 255, 255, 0.82);
margin: 6px 0 0;
}
/* Página Espetinho: listagem limpa, sem selos */
.espetos-variedade .menu-items-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Desktop: item ímpar final centralizado, com a mesma largura dos demais */
@media (min-width: 769px) {
.espetos-variedade .menu-item-row:last-child:nth-child(odd) {
grid-column: 1 / -1;
justify-self: center;
width: calc(50% - 10px);
}
}
.espetos-variedade .menu-item-row {
border-left: 3px solid rgba(243, 107, 33, 0.55);
padding: 18px 22px;
}
.espetos-variedade .menu-item-info {
min-width: 0;
}
.espetos-variedade .menu-item-info h3 {
font-family: var(--font-heading);
font-size: 1.12rem;
font-weight: 700;
color: #FFFFFF;
margin-bottom: 4px;
}
@media (max-width: 992px) {
.espetos-destaques .dish-card-img {
height: 260px;
}
}
@media (max-width: 768px) {
.espetos-variedade .menu-items-list {
grid-template-columns: minmax(0, 1fr);
gap: 14px;
}
.espetos-cta-band {
margin-top: 36px;
padding: 40px 20px;
}
.espetos-cta-band .espetos-cta-text {
font-size: 1.35rem;
}
.espetos-cta-band .btn {
width: 100%;
max-width: 360px;
white-space: normal;
}
}
@media (max-width: 640px) {
.espetos-destaques .dish-card-img {
height: 240px;
}
.espetos-cta {
margin-top: 32px;
padding-top: 28px;
}
.espetos-cta .btn {
width: 100%;
white-space: normal;
}
}
/* Página Restaurante: seção do almoço (conteúdo + mosaico de fotos reais) */
.almoco-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: 64px;
align-items: center;
}
/* Desktop: fotos à esquerda e conteúdo à direita (quebra a repetição do hero) */
.almoco-grid .almoco-mosaic {
order: -1;
}
.almoco-section .almoco-title {
font-family: var(--font-heading);
font-size: 2.1rem;
line-height: 1.2;
color: #FFFFFF;
margin: 12px 0 18px;
}
.almoco-content > p {
font-size: 1.02rem;
line-height: 1.7;
color: var(--color-text-muted);
margin-bottom: 14px;
}
.almoco-content > p.almoco-lead {
color: var(--color-text-light);
}
.almoco-infos {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 26px 0 26px;
}
.almoco-info {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
background: var(--color-surface-card);
border: 1px solid var(--color-border-dark);
border-radius: var(--radius-md);
}
.almoco-info-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(243, 107, 33, 0.12);
color: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.almoco-info-icon svg {
width: 18px;
height: 18px;
}
.almoco-info h3 {
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 700;
color: var(--color-secondary);
margin: 0 0 2px;
}
.almoco-info p {
font-size: 0.86rem;
line-height: 1.45;
color: var(--color-text-muted);
margin: 0;
}
.almoco-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
border: 1px solid rgba(243, 107, 33, 0.45);
border-radius: var(--radius-md);
font-family: var(--font-heading);
font-weight: 600;
font-size: 0.95rem;
color: var(--color-primary);
transition: var(--transition-fast);
}
.almoco-link:hover {
background: rgba(243, 107, 33, 0.1);
border-color: var(--color-primary);
color: var(--color-primary);
}
/* Mosaico: foto larga do buffet em cima + duas fotos lado a lado embaixo */
.almoco-mosaic {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
max-width: 500px;
margin-right: auto;
}
.almoco-mosaic img {
display: block;
width: 100%;
object-fit: cover;
border-radius: var(--radius-lg);
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.4);
}
.almoco-foto-principal {
aspect-ratio: 16 / 10;
}
.almoco-mosaic-linha {
display: flex;
gap: 12px;
min-width: 0;
}
.almoco-mosaic-linha img {
flex: 1 1 0;
min-width: 0;
aspect-ratio: 1 / 1;
}
.almoco-foto-principal { object-position: 50% 60%; }
.almoco-foto-saladas { object-position: 50% 62%; }
.almoco-foto-prato { object-position: 50% 52%; }
/* Microinteração dos cards: elevação + brilho laranja difuso ao redor */
.almoco-info {
transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.45s ease;
}
.almoco-info-icon {
transition: background-color 0.35s ease, transform 0.35s ease;
}
@media (hover: hover) and (pointer: fine) {
.almoco-info:hover {
transform: translateY(-4px);
border-color: rgba(243, 107, 33, 0.3);
box-shadow: 0 12px 28px -8px rgba(243, 107, 33, 0.18), 0 0 26px rgba(243, 107, 33, 0.07);
}
.almoco-info:hover .almoco-info-icon {
background: rgba(243, 107, 33, 0.2);
transform: scale(1.06);
}
}
@media (prefers-reduced-motion: reduce) {
.almoco-info,
.almoco-info-icon {
transition: none;
}
.almoco-info:hover,
.almoco-info:hover .almoco-info-icon {
transform: none;
}
}
@media (max-width: 860px) {
/* Mobile/tablet: conteúdo → fotos → cards → CTA (sem duplicar HTML) */
.almoco-grid {
display: flex;
flex-direction: column;
gap: 0;
}
.almoco-grid .almoco-content {
display: contents;
}
.almoco-content > .section-tag {
align-self: flex-start;
}
.almoco-grid .almoco-mosaic {
order: 1;
width: 100%;
max-width: 560px;
margin: 12px auto 0;
}
.almoco-grid .almoco-infos {
order: 2;
margin: 28px 0 24px;
}
.almoco-grid .almoco-link {
order: 3;
align-self: flex-start;
}
}
@media (max-width: 480px) {
.almoco-section .almoco-title {
font-size: 1.6rem;
}
.almoco-infos {
grid-template-columns: minmax(0, 1fr);
}
.almoco-link {
width: 100%;
justify-content: center;
padding: 12px 14px;
font-size: 0.9rem;
}
}
/* Página Restaurante: seção do jantar (cards refinados + CTA de fechamento) */
.jantar-cards .dish-card {
transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.45s ease;
}
.jantar-cards .dish-card:hover {
transform: none;
box-shadow: none;
border-color: var(--color-border-dark);
}
.jantar-cards .dish-card:hover .dish-card-img img {
transform: none;
}
@media (hover: hover) and (pointer: fine) {
.jantar-cards .dish-card:hover {
transform: translateY(-4px);
border-color: rgba(243, 107, 33, 0.3);
box-shadow: 0 14px 30px -10px rgba(243, 107, 33, 0.18), 0 0 26px rgba(243, 107, 33, 0.07);
}
.jantar-cards .dish-card:hover .dish-card-img img {
transform: scale(1.03);
}
}
.jantar-cards .dish-card-footer {
margin-top: auto;
padding-top: 14px;
}
/* Fotos com mais protagonismo: 4:3, integradas ao corpo do card */
.jantar-cards .dish-card-img {
height: auto;
aspect-ratio: 4 / 3;
}
.jantar-cards .dish-card-img::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 28%;
background: linear-gradient(to bottom, rgba(34, 34, 34, 0) 0%, rgba(34, 34, 34, 0.55) 70%, var(--color-surface-card) 100%);
pointer-events: none;
}
.jantar-cards .dish-card-img img {
display: block;
transition: transform 0.6s ease;
}
.jantar-cards .jantar-foto-bisteca { object-position: 40% 55%; }
.jantar-cards .jantar-foto-frango { object-position: 50% 45%; }
.jantar-cards .jantar-foto-picanha { object-position: 62% 55%; }
.jantar-cards .dish-card-body {
padding-top: 18px;
}
/* Selos: discretos sobre a foto */
.jantar-cards .dish-badge {
top: 12px;
right: 12px;
z-index: 1;
padding: 3px 10px;
font-size: 0.7rem;
letter-spacing: 0.04em;
background: rgba(18, 18, 18, 0.82);
border-color: rgba(246, 183, 43, 0.35);
}
/* Selos inferiores: secundários em relação ao título */
.jantar-cards .menu-item-tag {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.01em;
padding: 5px 12px;
background: rgba(20, 20, 20, 0.6);
color: var(--color-secondary);
border-color: rgba(246, 183, 43, 0.3);
}
.jantar-cta {
margin-top: 48px;
padding-top: 36px;
border-top: 1px solid var(--color-border-dark);
text-align: center;
}
.jantar-cta .jantar-cta-text {
font-family: var(--font-heading);
font-size: 1.2rem;
font-weight: 600;
color: #FFFFFF;
margin: 0 0 20px;
}
.jantar-cta-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
}
@media (prefers-reduced-motion: reduce) {
.jantar-cards .dish-card,
.jantar-cards .dish-card-img img {
transition: none;
}
.jantar-cards .dish-card:hover,
.jantar-cards .dish-card:hover .dish-card-img img {
transform: none;
}
}
/* Tablet: 2 colunas com o terceiro card centralizado */
@media (min-width: 641px) and (max-width: 992px) {
.jantar-cards .dish-card:last-child {
grid-column: 1 / -1;
width: calc(50% - 14px);
justify-self: center;
}
}
@media (max-width: 580px) {
.jantar-cta {
margin-top: 36px;
padding-top: 28px;
}
.jantar-cta .jantar-cta-text {
font-size: 1.05rem;
}
.jantar-cta-actions .btn {
width: 100%;
white-space: normal;
}
}
/* Página Restaurante: seção Nosso Espaço (fotos reais, estrutura, pagamentos) */
.espaco-intro {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: 64px;
align-items: center;
}
.espaco-section {
padding-bottom: 60px;
}
@media (max-width: 768px) {
.espaco-section {
padding-bottom: 44px;
}
}
.espaco-section .espaco-titulo {
font-family: var(--font-heading);
font-size: 2.1rem;
line-height: 1.2;
color: var(--color-text-dark);
margin: 12px 0 16px;
}
.espaco-texto > p {
font-size: 1.05rem;
line-height: 1.7;
color: var(--color-text-dark-muted);
margin-bottom: 20px;
}
.espaco-section .espaco-endereco {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 0 0 0 14px;
border-left: 2px solid var(--color-primary);
font-size: 0.95rem;
font-weight: 500;
line-height: 1.45;
color: var(--color-text-dark);
margin: 4px 0 0;
}
.espaco-endereco svg {
width: 34px;
height: 34px;
padding: 8px;
border-radius: 50%;
background: rgba(243, 107, 33, 0.1);
flex-shrink: 0;
color: var(--color-primary);
}
/* Fotos lado a lado com alturas e alinhamentos diferentes */
.espaco-fotos {
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
gap: 14px;
align-items: end;
}
.espaco-fotos img {
display: block;
width: 100%;
object-fit: cover;
border-radius: var(--radius-lg);
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14);
}
.espaco-foto-fachada {
aspect-ratio: 4 / 3;
object-position: 50% 50%;
}
.espaco-foto-salao {
aspect-ratio: 3 / 4;
object-position: 50% 55%;
margin-bottom: -36px;
}
/* Banner fotográfico com os diferenciais (foto do frango na chapa ao fundo) */
.espaco-banner {
margin-top: 72px;
min-height: 320px;
padding: 40px 44px 34px;
display: flex;
flex-direction: column;
justify-content: flex-end;
border-radius: var(--radius-lg);
background:
linear-gradient(180deg, rgba(12, 12, 12, 0.2) 0%, rgba(12, 12, 12, 0.5) 40%, rgba(12, 12, 12, 0.82) 100%),
linear-gradient(rgba(12, 12, 12, 0.35), rgba(12, 12, 12, 0.35)),
url('../Imagens/galeria/frango-acebolado-na-chapa-eder-espetos-dourados.webp') 50% 45% / cover no-repeat;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
overflow: hidden;
}
.espaco-paineis {
width: 100%;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin: 0;
padding: 0;
list-style: none;
}
.espaco-painel {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 4px 32px;
border-left: 1px solid rgba(255, 255, 255, 0.18);
}
.espaco-painel:first-child {
padding-left: 0;
border-left: 0;
}
.espaco-painel:last-child {
padding-right: 0;
}
.espaco-painel-icon {
width: 40px;
height: 40px;
border-radius: var(--radius-md);
background: rgba(243, 107, 33, 0.18);
border: 1px solid rgba(243, 107, 33, 0.35);
color: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.espaco-painel-icon svg {
width: 20px;
height: 20px;
}
.espaco-painel-texto {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
}
.espaco-section .espaco-painel h3 {
font-family: var(--font-heading);
font-size: 1.05rem;
font-weight: 700;
color: #FFFFFF;
margin: 0 0 6px;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
.espaco-section .espaco-painel p {
font-size: 0.9rem;
line-height: 1.55;
color: rgba(255, 255, 255, 0.88);
margin: 0;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.espaco-banner-cta {
display: flex;
justify-content: center;
margin-top: 28px;
padding-top: 24px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.espaco-painel-icon {
background: rgba(243, 107, 33, 0.22);
}
/* Formas de pagamento: leves, direto sobre o fundo claro */
.pagamentos {
margin: 44px auto 0;
text-align: center;
}
.espaco-section .pagamentos h3 {
font-family: var(--font-heading);
font-size: 1.2rem;
font-weight: 700;
color: var(--color-text-dark);
margin: 0 0 6px;
}
.espaco-section .pagamentos h3::after {
content: '';
display: block;
width: 36px;
height: 2px;
margin: 10px auto 0;
border-radius: 2px;
background: var(--color-primary);
}
.espaco-section .pagamentos > p {
font-size: 0.95rem;
color: var(--color-text-dark-muted);
margin: 12px 0 26px;
}
.pagamentos-lista {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
max-width: 1120px;
margin: 0 auto;
padding: 0;
list-style: none;
}
.pagamento-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 4px 8px;
border-left: 1px solid rgba(0, 0, 0, 0.09);
font-size: 0.9rem;
font-weight: 500;
line-height: 1.35;
color: var(--color-text-dark);
text-align: center;
white-space: nowrap;
}
.pagamento-item:first-child {
border-left: 0;
}
.pagamento-icon {
width: auto;
height: auto;
color: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
}
.pagamento-icon svg {
width: 30px;
height: 30px;
stroke-width: 1.6;
}
@media (max-width: 992px) {
.espaco-intro {
grid-template-columns: minmax(0, 1fr);
gap: 40px;
}
.espaco-fotos {
max-width: 640px;
width: 100%;
margin: 0 auto;
}
.espaco-banner {
margin-top: 64px;
min-height: 380px;
padding: 32px;
}
.espaco-paineis {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 24px;
}
.espaco-painel:nth-child(2) {
padding-right: 0;
}
.espaco-paineis .espaco-painel:last-child {
grid-column: 1 / -1;
padding: 20px 0 0;
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.pagamentos-lista {
grid-template-columns: repeat(3, minmax(0, 1fr));
row-gap: 26px;
max-width: 560px;
}
.pagamento-item,
.pagamento-item:first-child {
border-left: 0;
}
}
@media (max-width: 600px) {
.espaco-section .espaco-titulo {
font-size: 1.6rem;
}
.espaco-fotos {
grid-template-columns: minmax(0, 1fr);
align-items: stretch;
}
.espaco-foto-salao {
aspect-ratio: 4 / 3;
object-position: 50% 45%;
margin-bottom: 0;
}
.espaco-banner {
margin-top: 36px;
min-height: 0;
padding: 190px 20px 24px;
background:
linear-gradient(180deg, rgba(12, 12, 12, 0.05) 0%, rgba(12, 12, 12, 0.6) 26%, rgba(12, 12, 12, 0.9) 45%, rgba(12, 12, 12, 0.94) 100%),
url('../Imagens/galeria/frango-acebolado-na-chapa-eder-espetos-dourados.webp') 50% 0 / auto 300px no-repeat,
#151515;
}
.espaco-paineis {
grid-template-columns: minmax(0, 1fr);
row-gap: 0;
}
.espaco-paineis .espaco-painel,
.espaco-paineis .espaco-painel:last-child {
grid-column: auto;
padding: 18px 0;
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.espaco-paineis .espaco-painel:first-child {
border-top: 0;
padding-top: 0;
}
.espaco-paineis .espaco-painel:last-child {
padding-bottom: 0;
}
.espaco-banner-cta {
margin-top: 20px;
padding-top: 20px;
}
.espaco-banner-cta .btn {
width: 100%;
max-width: 320px;
}
.espaco-section .espaco-endereco {
align-items: flex-start;
font-size: 0.9rem;
}
.pagamentos {
margin-top: 36px;
}
.pagamentos-lista {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 22px;
column-gap: 8px;
}
.pagamento-item {
font-size: 0.88rem;
padding: 0 4px;
}
.pagamento-icon svg {
width: 26px;
height: 26px;
}
}
/* ==========================================================================
PÁGINA MARMITAS EM DOURADOS
========================================================================== */
.page-hero--marmitas {
padding-bottom: 56px;
border-bottom: 1px solid rgba(243, 107, 33, 0.14);
}
.marmita-opcoes-section {
background: var(--color-surface-dark);
padding-top: 72px;
}
@media (max-width: 768px) {
.page-hero--marmitas {
padding-bottom: 44px;
}
.marmita-opcoes-section {
padding-top: 52px;
}
}
.hero-ctas {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 24px;
}
.marmita-hero-principal { object-position: 50% 62%; }
.marmita-hero-carne { object-position: 50% 45%; }
.marmita-hero-frango { object-position: 50% 58%; }
.marmita-titulo {
font-family: var(--font-heading);
font-size: 2.1rem;
line-height: 1.2;
margin: 12px 0 16px;
}
.section-dark .marmita-titulo { color: #FFFFFF; }
.section-light .marmita-titulo { color: var(--color-text-dark); }
/* Opções de marmitas: lista editorial + foto */
.marmita-opcoes-grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
gap: 64px;
align-items: center;
}
.marmita-opcoes-conteudo > p {
font-size: 1.03rem;
line-height: 1.7;
color: var(--color-text-muted);
margin-bottom: 26px;
}
.marmita-opcoes {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px 28px;
margin: 0 0 28px;
padding: 0;
list-style: none;
}
.marmita-opcao {
display: flex;
align-items: flex-start;
gap: 14px;
padding-top: 18px;
border-top: 1px solid var(--color-border-dark);
}
.marmita-opcao-icon {
width: 40px;
height: 40px;
border-radius: var(--radius-md);
background: rgba(243, 107, 33, 0.12);
color: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.marmita-opcao-icon svg {
width: 20px;
height: 20px;
}
.marmita-opcao h3 {
font-family: var(--font-heading);
font-size: 1.05rem;
font-weight: 700;
color: #FFFFFF;
margin: 0 0 4px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.marmita-opcao-titulo {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0 0 4px;
}
.marmita-opcao-titulo h3 {
margin: 0;
}
.marmita-opcao-tag {
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 2px 8px;
border-radius: var(--radius-full);
color: var(--color-secondary);
border: 1px solid rgba(246, 183, 43, 0.35);
}
.marmita-opcao p {
font-size: 0.9rem;
line-height: 1.55;
color: var(--color-text-muted);
margin: 0;
}
.marmita-opcoes-conteudo {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.marmita-opcoes {
align-self: stretch;
}
.marmita-link {
align-self: center;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border: 1px solid rgba(243, 107, 33, 0.45);
border-radius: var(--radius-md);
font-family: var(--font-heading);
font-weight: 600;
font-size: 0.95rem;
color: var(--color-primary);
transition: var(--transition-fast);
}
.marmita-link:hover {
background: rgba(243, 107, 33, 0.1);
border-color: var(--color-primary);
color: var(--color-primary);
}
.marmita-opcoes-foto img {
display: block;
width: 100%;
max-width: 420px;
margin-left: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
object-position: 50% 62%;
border-radius: var(--radius-lg);
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}
/* Marmitas do dia: trio escalonado de fotos + conteúdo */
.marmita-dia-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: 64px;
align-items: center;
}
.marmita-dia-fotos {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.marmita-dia-fotos img {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: var(--radius-md);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.marmita-dia-conteudo > p {
font-size: 1.03rem;
line-height: 1.7;
color: var(--color-text-dark-muted);
margin-bottom: 24px;
}
.marmita-destaques {
margin: 0 0 28px;
padding: 0;
list-style: none;
}
.marmita-destaques li {
padding: 14px 0 14px 18px;
border-left: 2px solid var(--color-primary);
border-bottom: 1px solid var(--color-border-light);
}
.marmita-destaques li:last-child {
border-bottom: 0;
}
.marmita-destaques h3 {
font-family: var(--font-heading);
font-size: 1.02rem;
font-weight: 700;
color: var(--color-text-dark);
margin: 0 0 2px;
}
.marmita-destaques p {
font-size: 0.92rem;
color: var(--color-text-dark-muted);
margin: 0;
}
.marmita-dia-cta-wrap {
display: flex;
justify-content: center;
margin-top: 48px;
}
.section-light .marmita-dia-cta {
background: var(--color-surface-dark);
color: #FFFFFF;
border-color: var(--color-surface-dark);
}
.section-light .marmita-dia-cta:hover {
background: #000000;
color: #FFFFFF;
}
/* Entrega ou retirada: dois modos abertos + faixa "monte sua marmita" */
.marmita-modos {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
max-width: 880px;
margin: 0 auto;
}
.marmita-modo {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 4px 48px;
}
.marmita-modo:first-child {
padding-left: 0;
}
.marmita-modo:last-child {
padding-right: 0;
}
.marmita-modo + .marmita-modo {
border-left: 1px solid var(--color-border-dark);
}
.marmita-modo-icon {
width: 48px;
height: 48px;
border-radius: var(--radius-md);
background: rgba(243, 107, 33, 0.12);
color: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.marmita-modo-icon svg {
width: 24px;
height: 24px;
}
.marmita-modo h3 {
font-family: var(--font-heading);
font-size: 1.3rem;
font-weight: 700;
color: #FFFFFF;
margin: 0 0 10px;
}
.marmita-modo p {
font-size: 0.97rem;
line-height: 1.65;
color: var(--color-text-muted);
margin: 0 0 12px;
}
.marmita-modo .marmita-modo-info {
margin-top: auto;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--color-secondary);
margin: 0;
}
.marmita-monte {
max-width: 880px;
margin: 44px auto 0;
padding: 36px 0 0;
border-top: 1px solid var(--color-border-dark);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.marmita-monte h3 {
font-family: var(--font-heading);
font-size: 1.15rem;
font-weight: 700;
color: #FFFFFF;
margin: 0 0 6px;
}
.marmita-monte p {
font-size: 0.97rem;
line-height: 1.6;
color: var(--color-text-muted);
margin: 0 0 22px;
max-width: 560px;
}
@media (max-width: 992px) {
.marmita-opcoes-grid,
.marmita-dia-grid {
grid-template-columns: minmax(0, 1fr);
gap: 40px;
}
.marmita-opcoes-foto img {
max-width: 560px;
margin: 0 auto;
aspect-ratio: 4 / 3;
}
.marmita-dia-conteudo {
order: -1;
}
.marmita-dia-fotos {
max-width: 600px;
width: 100%;
margin: 0 auto;
}
}
@media (max-width: 640px) {
.marmita-titulo {
font-size: 1.6rem;
}
.marmita-opcoes {
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
.marmita-opcao {
padding: 14px 0;
}
.marmita-dia-cta-wrap {
margin-top: 32px;
}
.hero-ctas .btn {
width: 100%;
justify-content: center;
white-space: normal;
}
.marmita-dia-fotos {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.marmita-monte .btn {
width: 100%;
justify-content: center;
padding-left: 14px;
padding-right: 14px;
font-size: 0.92rem;
white-space: nowrap;
}
.marmita-modos {
grid-template-columns: minmax(0, 1fr);
}
.marmita-modo,
.marmita-modo:first-child,
.marmita-modo:last-child {
padding: 22px 0;
}
.marmita-modo + .marmita-modo {
border-left: 0;
border-top: 1px solid var(--color-border-dark);
}
.marmita-monte {
margin-top: 24px;
}
}
/* Opções: no tablet/celular a foto entra entre o texto e a lista */
@media (max-width: 992px) {
.marmita-opcoes-grid {
display: flex;
flex-direction: column;
gap: 0;
align-items: stretch;
}
.marmita-opcoes-conteudo {
display: contents;
}
.marmita-opcoes-conteudo > .section-tag {
align-self: flex-start;
}
.marmita-opcoes-foto {
order: 1;
width: 100%;
margin: 4px 0 28px;
}
.marmita-opcoes {
order: 2;
}
.marmita-link {
order: 3;
align-self: center;
}
/* Marmitas do dia: conteúdo → fotos → CTA */
.marmita-dia-grid {
display: flex;
flex-direction: column;
gap: 0;
align-items: stretch;
}
.marmita-dia-conteudo {
display: contents;
}
.marmita-dia-conteudo > .section-tag {
align-self: flex-start;
}
.marmita-dia-fotos {
order: 1;
}
}
/* ==========================================================================
PÁGINA NOSSA HISTÓRIA
========================================================================== */
.page-hero--sobre {
padding-bottom: 56px;
border-bottom: 1px solid rgba(243, 107, 33, 0.14);
}
.hero-mosaic--sobre {
grid-template-rows: 280px 170px;
}
.sobre-hero-fachada { object-position: 55% 45%; }
.sobre-hero-salao { object-position: 50% 55%; }
.sobre-hero-marmita { object-position: 50% 62%; }
.sobre-titulo {
font-family: var(--font-heading);
font-size: 2.1rem;
line-height: 1.2;
margin: 12px 0 18px;
}
.section-light .sobre-titulo { color: var(--color-text-dark); }
.sobre-inicio-section .sobre-titulo { color: #FFFFFF; }
/* Como tudo começou */
.sobre-inicio-section {
background: var(--color-surface-dark);
padding-top: 72px;
}
.sobre-inicio-grid {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
gap: 64px;
align-items: center;
}
.sobre-inicio-texto > p {
font-size: 1.04rem;
line-height: 1.75;
color: var(--color-text-muted);
margin-bottom: 16px;
}
.sobre-inicio-texto strong {
color: #FFFFFF;
}
.sobre-fatos {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
margin: 30px 0 0;
padding-top: 24px;
border-top: 1px solid var(--color-border-dark);
}
.sobre-fatos div {
padding-left: 16px;
border-left: 2px solid var(--color-primary);
}
.sobre-fatos dt {
font-family: var(--font-heading);
font-size: 1.9rem;
font-weight: 800;
line-height: 1.1;
color: #FFFFFF;
}
.sobre-fatos dd {
margin: 4px 0 0;
font-size: 0.9rem;
color: var(--color-text-muted);
}
.sobre-inicio-foto,
.sobre-pao-foto {
margin: 0;
}
.sobre-inicio-foto img {
display: block;
width: 100%;
max-width: 400px;
margin-left: auto;
aspect-ratio: 3 / 4;
object-fit: cover;
object-position: 55% 55%;
border-radius: var(--radius-lg);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
/* Timeline */
.timeline {
position: relative;
max-width: 760px;
margin: 0 auto;
padding: 0;
list-style: none;
}
.timeline::before {
content: '';
position: absolute;
top: 8px;
bottom: 8px;
left: 27px;
width: 1px;
background: linear-gradient(to bottom, rgba(243, 107, 33, 0.6), rgba(243, 107, 33, 0.1));
}
.timeline-item {
position: relative;
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
gap: 24px;
padding-bottom: 36px;
}
.timeline-item:last-child {
padding-bottom: 0;
}
.timeline-num {
position: relative;
z-index: 1;
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-bg-base);
border: 1px solid rgba(243, 107, 33, 0.55);
font-family: var(--font-heading);
font-size: 1.05rem;
font-weight: 700;
color: var(--color-primary);
}
.timeline-body {
padding-top: 12px;
}
.timeline-body h3 {
font-family: var(--font-heading);
font-size: 1.2rem;
font-weight: 700;
color: #FFFFFF;
margin: 0 0 6px;
}
.timeline-body p {
font-size: 0.98rem;
line-height: 1.65;
color: var(--color-text-muted);
margin: 0;
}
/* Pão de alho 50/50 */
.sobre-pao-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 64px;
align-items: center;
}
.sobre-pao-foto img {
display: block;
width: 100%;
max-width: 440px;
aspect-ratio: 4 / 5;
object-fit: cover;
object-position: 50% 45%;
border-radius: var(--radius-lg);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
}
.sobre-inicio-foto img.sobre-inicio-brasa {
object-position: 50% 55%;
}
.sobre-pao-texto .btn {
margin-top: 8px;
}
.sobre-pao-texto > p {
font-size: 1.05rem;
line-height: 1.75;
color: var(--color-text-dark-muted);
margin-bottom: 16px;
}
.sobre-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 8px;
padding: 12px 22px;
border: 1px solid rgba(243, 107, 33, 0.5);
border-radius: var(--radius-md);
font-family: var(--font-heading);
font-weight: 600;
font-size: 0.95rem;
color: var(--color-primary);
transition: var(--transition-fast);
}
.sobre-link:hover {
background: rgba(243, 107, 33, 0.08);
border-color: var(--color-primary);
color: var(--color-primary);
}
/* Identidade da casa: três colunas abertas */
.identidade-lista {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin: 0;
padding: 0;
list-style: none;
}
.identidade-item {
padding: 4px 36px;
text-align: center;
}
.identidade-item + .identidade-item {
border-left: 1px solid var(--color-border-dark);
}
.identidade-icon {
width: 48px;
height: 48px;
margin: 0 auto 16px;
border-radius: 50%;
background: rgba(243, 107, 33, 0.12);
color: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
}
.identidade-icon svg {
width: 22px;
height: 22px;
}
.identidade-item h3 {
font-family: var(--font-heading);
font-size: 1.15rem;
font-weight: 700;
color: #FFFFFF;
margin: 0 0 8px;
}
.identidade-item p {
font-size: 0.95rem;
line-height: 1.6;
color: var(--color-text-muted);
margin: 0;
}
@media (max-width: 992px) {
.sobre-inicio-grid,
.sobre-pao-grid {
grid-template-columns: minmax(0, 1fr);
gap: 40px;
}
.sobre-inicio-foto img,
.sobre-pao-foto img {
max-width: 480px;
margin: 0 auto;
aspect-ratio: 4 / 3;
}
.identidade-item {
padding: 4px 20px;
}
}
@media (max-width: 768px) {
.page-hero--sobre {
padding-bottom: 44px;
}
.sobre-inicio-section {
padding-top: 52px;
}
}
@media (max-width: 640px) {
.sobre-titulo {
font-size: 1.6rem;
}
.sobre-fatos dt {
font-size: 1.6rem;
}
.sobre-inicio-foto img {
aspect-ratio: 4 / 5;
}
.sobre-pao-foto img {
aspect-ratio: 4 / 5;
}
.timeline::before {
left: 21px;
}
.timeline-item {
grid-template-columns: 44px minmax(0, 1fr);
gap: 16px;
padding-bottom: 28px;
}
.timeline-num {
width: 44px;
height: 44px;
font-size: 0.95rem;
}
.timeline-body {
padding-top: 8px;
}
.sobre-link {
width: 100%;
justify-content: center;
}
.identidade-lista {
grid-template-columns: minmax(0, 1fr);
}
.identidade-item,
.identidade-item + .identidade-item {
padding: 22px 0;
border-left: 0;
}
.identidade-item + .identidade-item {
border-top: 1px solid var(--color-border-dark);
}
}
/* ==========================================================================
MOBILE: HEROES INTERNOS — foto logo após o texto, CTAs no fim
(só telas até 920px, onde o hero já vira uma coluna)
========================================================================== */
@media (max-width: 920px) {
.page-hero-grid:has(.page-hero-media) {
display: flex;
flex-direction: column;
gap: 0;
align-items: stretch;
}
.page-hero-grid:has(.page-hero-media) .page-hero-content {
display: contents;
}
.page-hero-grid:has(.page-hero-media) .breadcrumb-nav,
.page-hero-grid:has(.page-hero-media) .section-tag {
align-self: flex-start;
}
.page-hero-grid:has(.page-hero-media) .page-hero-desc {
margin-bottom: 24px;
}
.page-hero-grid .page-hero-media {
order: 1;
width: 100%;
}
.page-hero-grid .hero-ctas {
order: 2;
margin-top: 24px !important;
}
}
@media (max-width: 640px) {
.page-hero .hero-ctas {
flex-direction: column;
gap: 12px !important;
}
.page-hero .hero-ctas .btn {
width: 100%;
justify-content: center;
}
}
/* ==========================================================================
MOBILE: AJUSTES PONTUAIS (sem efeito no desktop)
========================================================================== */
@media (max-width: 640px) {
/* Contato: bairros em grade compacta */
.bairros-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.bairros-grid .highlight-box {
padding: 14px 10px;
}
.bairros-grid .highlight-box h4 {
font-size: 1rem;
}
.bairros-grid .highlight-box p {
font-size: 0.78rem;
}
/* Política: menos recuo interno para a coluna de texto respirar */
.politica-card {
padding: 26px 18px !important;
}
.politica-card h2 {
font-size: 1.25rem !important;
line-height: 1.35;
}
/* Footer: espaço para os botões flutuantes não cobrirem o final */
.footer-bottom {
padding-bottom: 72px;
}
}
/* Faixa informativa entre o hero e o almoço (página Restaurante) */
.info-strip {
background: #1B1B1B;
border-top: 1px solid rgba(243, 107, 33, 0.28);
border-bottom: 1px solid rgba(243, 107, 33, 0.28);
padding: 16px 0;
}
.info-strip-viewport {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.info-strip-track {
display: flex;
width: max-content;
animation: info-strip-scroll 60s linear infinite;
}
.info-strip-list {
display: flex;
align-items: center;
flex-shrink: 0;
margin: 0;
padding: 0;
list-style: none;
}
.info-strip-list li {
display: flex;
align-items: center;
font-family: var(--font-heading);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-text-light);
white-space: nowrap;
}
.info-strip-list li::after {
content: '';
width: 6px;
height: 6px;
margin: 0 28px;
border-radius: 50%;
background: var(--color-primary);
opacity: 0.85;
}
.info-strip-list li.info-strip-destaque {
color: var(--color-primary);
}
@keyframes info-strip-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* Movimento reduzido: faixa estática, com quebra de linha */
@media (prefers-reduced-motion: reduce) {
.info-strip-viewport {
-webkit-mask-image: none;
mask-image: none;
}
.info-strip-track {
display: block;
width: auto;
animation: none;
padding: 0 20px;
}
.info-strip-list {
flex-wrap: wrap;
flex-shrink: 1;
justify-content: center;
row-gap: 8px;
}
.info-strip-list[aria-hidden="true"] {
display: none;
}
.info-strip-list li:last-child::after {
display: none;
}
}
@media (max-width: 768px) {
.info-strip {
padding: 13px 0;
}
.info-strip-track {
animation-duration: 45s;
}
.info-strip-list li {
font-size: 0.74rem;
letter-spacing: 0.1em;
}
.info-strip-list li::after {
width: 5px;
height: 5px;
margin: 0 16px;
}
}
/* Página Espetinho: pão de alho + acompanhamentos com fotos reais */
.sabores-bloco {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 64px;
align-items: center;
}
.sabores-bloco + .sabores-bloco {
margin-top: 88px;
}
.sabores-bloco--invertido .sabores-fotos {
order: -1;
}
.sabores-casa .sabores-titulo {
font-family: var(--font-heading);
font-size: 2.1rem;
line-height: 1.2;
color: var(--color-text-dark);
margin: 12px 0 16px;
}
.sabores-casa .sabores-texto p {
font-size: 1.05rem;
line-height: 1.7;
color: var(--color-text-dark-muted);
margin-bottom: 18px;
}
.sabores-texto .btn {
margin-top: 8px;
}
.sabores-lista {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 14px;
margin-top: 6px;
}
.sabores-lista li {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
background: #FFFFFF;
border: 1px solid var(--color-border-light);
border-radius: var(--radius-md);
font-size: 0.95rem;
font-weight: 500;
color: var(--color-text-dark);
}
.sabores-lista li::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-primary);
flex-shrink: 0;
}
/* Composição: foto principal vertical + foto de apoio sobreposta */
.sabores-fotos {
position: relative;
width: 100%;
max-width: 520px;
margin: 0 auto;
padding-bottom: 12%;
}
.sabores-fotos img {
display: block;
object-fit: cover;
border-radius: var(--radius-lg);
}
.sabores-foto-principal {
width: 64%;
aspect-ratio: 3 / 4;
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
}
.sabores-foto-apoio {
position: absolute;
right: 0;
bottom: 0;
width: 52%;
aspect-ratio: 4 / 3;
border: 6px solid var(--color-bg-light);
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.2);
}
.sabores-bloco--invertido .sabores-fotos {
padding-bottom: 0;
padding-top: 12%;
}
.sabores-bloco--invertido .sabores-foto-principal {
margin-left: auto;
}
.sabores-bloco--invertido .sabores-foto-apoio {
top: 0;
left: 0;
right: auto;
bottom: auto;
}
.sabores-foto-pao { object-position: 50% 50%; }
.sabores-foto-pao-brasa { object-position: 50% 58%; }
.sabores-foto-jantinha { object-position: 50% 80%; }
.sabores-foto-buffet { object-position: 50% 45%; }
@media (max-width: 860px) {
.sabores-bloco {
grid-template-columns: minmax(0, 1fr);
gap: 36px;
}
.sabores-bloco + .sabores-bloco {
margin-top: 64px;
}
.sabores-bloco--invertido .sabores-fotos {
order: 0;
}
.sabores-fotos {
max-width: 480px;
}
}
@media (max-width: 580px) {
.sabores-casa .sabores-titulo {
font-size: 1.6rem;
}
.sabores-foto-principal {
width: 70%;
}
.sabores-foto-apoio {
width: 56%;
border-width: 4px;
}
.sabores-texto .btn {
width: 100%;
white-space: normal;
}
.sabores-lista {
gap: 8px;
}
.sabores-lista li {
padding: 10px 12px;
gap: 8px;
font-size: 0.9rem;
}
}
.menu-disclaimer-box {
background: rgba(246, 183, 43, 0.08);
border: 1px solid rgba(246, 183, 43, 0.25);
border-radius: var(--radius-md);
padding: 18px 24px;
margin-top: 36px;
display: flex;
align-items: center;
gap: 16px;
}
.menu-disclaimer-box svg {
width: 28px;
height: 28px;
color: var(--color-secondary);
flex-shrink: 0;
}
.menu-disclaimer-box p {
font-size: 0.92rem;
color: var(--color-text-light);
line-height: 1.5;
margin: 0;
}
/* --- FAQ ACCORDION --- */
.faq-accordion {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 14px;
}
.faq-item {
background: var(--color-surface-card);
border: 1px solid var(--color-border-dark);
border-radius: var(--radius-md);
overflow: hidden;
transition: var(--transition-fast);
}
.faq-item.active {
border-color: rgba(243, 107, 33, 0.4);
}
.faq-question {
width: 100%;
padding: 20px 24px;
text-align: left;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
font-family: var(--font-heading);
font-size: 1.06rem;
font-weight: 600;
color: #FFFFFF;
}
.faq-item.active .faq-question {
color: var(--color-primary);
}
.faq-icon {
width: 22px;
height: 22px;
transition: transform var(--transition-fast);
color: var(--color-text-muted);
flex-shrink: 0;
}
.faq-item.active .faq-icon {
transform: rotate(180deg);
color: var(--color-primary);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
padding: 0 24px;
}
.faq-answer p {
padding-bottom: 20px;
font-size: 0.95rem;
color: var(--color-text-muted);
line-height: 1.6;
}
/* Pergunta do accordion dentro de um h3 (semântica), sem alterar o visual */
.faq-heading {
margin: 0;
font: inherit;
}
/* FAQ da Home no mobile: quebra natural e folga à direita para os botões flutuantes */
@media (max-width: 580px) {
.faq-home .faq-question,
.faq-espetos .faq-question,
.faq-restaurante .faq-question {
padding: 18px 48px 18px 18px;
font-size: 1rem;
}
.faq-home .faq-question span,
.faq-espetos .faq-question span,
.faq-restaurante .faq-question span {
min-width: 0;
overflow-wrap: break-word;
}
.faq-home .faq-answer,
.faq-espetos .faq-answer,
.faq-restaurante .faq-answer {
padding: 0 44px 0 18px;
}
.faq-home .faq-answer p,
.faq-espetos .faq-answer p,
.faq-restaurante .faq-answer p {
overflow-wrap: break-word;
}
}
/* FAQ em Seção Clara */
.section-light .faq-item {
background: #FFFFFF;
border-color: var(--color-border-light);
}
.section-light .faq-question {
color: var(--color-text-dark);
}
.section-light .faq-answer p {
color: var(--color-text-dark-muted);
}
/* --- SEÇÃO SOBRE & HISTÓRIA --- */
.story-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
}
.story-content h3,
.story-content h2.story-home-title {
font-family: var(--font-heading);
font-size: 1.85rem;
font-weight: 700;
color: #FFFFFF;
margin-bottom: 18px;
}
.story-content p {
font-size: 1.02rem;
color: var(--color-text-muted);
line-height: 1.7;
margin-bottom: 18px;
}
.story-highlights {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 28px;
}
.highlight-box {
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-dark);
border-radius: var(--radius-md);
padding: 16px;
}
.highlight-box h4,
.highlight-box h3 {
font-family: var(--font-heading);
font-size: 1.15rem;
font-weight: 700;
color: var(--color-secondary);
margin-bottom: 4px;
}
.highlight-box p {
font-size: 0.85rem;
color: var(--color-text-muted);
margin: 0;
}
@media (max-width: 860px) {
.story-grid {
grid-template-columns: 1fr;
gap: 36px;
}
}
/* História resumida da Home: texto + fotos reais (fachada e salão) */
.story-home {
padding-top: 64px;
padding-bottom: 40px;
}
@media (max-width: 768px) {
.story-home {
padding-top: 48px;
}
}
.story-home-grid {
display: grid;
grid-template-columns: 0.92fr 1.08fr;
column-gap: 56px;
align-items: center;
}
.story-home-grid .story-content {
grid-column: 1;
grid-row: 1;
}
.story-home-grid .story-extras {
grid-column: 1;
grid-row: 2;
}
.story-home-grid .story-gallery {
grid-column: 2;
grid-row: 1 / span 2;
}
.story-gallery {
position: relative;
padding-bottom: 16%;
}
.story-photo {
display: block;
object-fit: cover;
border-radius: var(--radius-lg);
}
.story-photo-facade {
width: 86%;
aspect-ratio: 4 / 3;
box-shadow: var(--shadow-md);
}
.story-photo-salon {
position: absolute;
right: 0;
bottom: 0;
width: 40%;
aspect-ratio: 3 / 4;
border: 6px solid var(--color-bg-base);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
@media (max-width: 860px) {
.story-home-grid {
grid-template-columns: 1fr;
row-gap: 32px;
}
.story-home-grid .story-content,
.story-home-grid .story-extras,
.story-home-grid .story-gallery {
grid-column: auto;
grid-row: auto;
}
.story-home-grid .story-gallery {
width: 100%;
max-width: 620px;
margin: 0 auto;
}
.story-extras .story-highlights {
margin-top: 0;
}
}
@media (max-width: 600px) {
.story-gallery {
padding-bottom: 0;
display: grid;
gap: 12px;
}
.story-photo-facade,
.story-photo-salon {
position: static;
width: 100%;
aspect-ratio: 4 / 3;
border: 0;
}
.story-photo-salon {
object-position: center 28%;
}
/* Mobile: espaçamentos verticais mais compactos */
.story-home {
padding-top: 40px;
padding-bottom: 32px;
}
.story-home-grid {
row-gap: 24px;
}
.story-home .story-content h3,
.story-home .story-content h2.story-home-title {
margin-bottom: 14px;
}
.story-home .story-content p {
margin-bottom: 14px;
}
.story-home .story-content p:last-child {
margin-bottom: 0;
}
.story-gallery {
gap: 10px;
}
.story-extras .btn {
width: 100%;
justify-content: center;
}
}
@media (max-width: 420px) {
.story-extras .story-highlights {
grid-template-columns: 1fr;
gap: 12px;
}
}
/* --- AVALIAÇÕES / DUAS FAIXAS GOOGLE --- */
.reviews-section {
position: relative;
overflow: hidden;
background: linear-gradient(180deg, #121212 0%, #0d0d0d 42%, #0a0a0a 100%);
padding: 100px 0 70px;
isolation: isolate;
}
.reviews-bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
/* CAMADA 1 — background-avaliacoes-churrasco.png: já foi criada escura,
com fumaça/brasas nas bordas e centro propositalmente limpo para o
texto e as faixas de avaliação. Cobre a seção inteira, sem escurecer
por cima — ela já resolve o contraste sozinha. */
.reviews-bg-atmosphere {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 25% 45%;
}
/* CAMADA 2 — espetos-destaque-direita.png: a foto nítida dos espetos.
Fica num wrapper limitado à altura do bloco superior (não desce até as
faixas de avaliação) e esse wrapper tem uma máscara vertical suave só
na borda de baixo. A própria ![]()
, dentro dele, tem uma máscara
horizontal que a apaga progressivamente pela esquerda. As duas máscaras
se combinam naturalmente (a do filho multiplica a do pai), então não é
preciso mask-composite — funciona em qualquer navegador. Isso evita
qualquer emenda/retângulo: o próprio pixel vira transparente e revela a
camada de atmosfera por baixo. */
.reviews-bg-feature-wrap {
position: absolute;
top: 0;
right: 0;
width: 46%;
height: 64%;
overflow: hidden;
-webkit-mask-image: linear-gradient(180deg, black 0%, black 80%, transparent 100%);
mask-image: linear-gradient(180deg, black 0%, black 80%, transparent 100%);
}
.reviews-bg-feature {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 70% 40%;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 12%, rgba(0, 0, 0, 0.4) 32%, black 58%, black 100%);
mask-image: linear-gradient(90deg, transparent 0%, transparent 12%, rgba(0, 0, 0, 0.4) 32%, black 58%, black 100%);
}
/* Só um leve reforço para garantir contraste do texto da esquerda e uma
transição final macia até as faixas de avaliação — nada de camada
preta forte por cima das imagens. */
.reviews-bg-overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(100deg, rgba(10, 8, 7, 0.35) 0%, rgba(10, 8, 7, 0.15) 22%, transparent 40%),
linear-gradient(180deg, transparent 0%, transparent 78%, rgba(10, 8, 7, 0.55) 92%, #0a0a0a 100%);
}
.reviews-ember {
position: absolute;
z-index: 2;
width: 90px;
height: 90px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 158, 66, 0.55), rgba(255, 110, 20, 0) 70%);
filter: blur(8px);
animation: ember-pulse 4.5s ease-in-out infinite;
pointer-events: none;
}
.reviews-ember-1 { top: 12%; right: 8%; animation-delay: 0s; }
.reviews-ember-2 { top: 38%; right: 22%; width: 56px; height: 56px; animation-delay: 1.8s; }
.reviews-ember-3 {
bottom: 6%;
left: 6%;
width: 130px;
height: 130px;
background: radial-gradient(circle, rgba(243, 107, 33, 0.28), rgba(243, 107, 33, 0) 70%);
animation-delay: 0.9s;
}
/* Faíscas: pequenos pontos de brasa espalhados, ao contrário dos brilhos
grandes e suaves acima. */
.reviews-spark {
position: absolute;
z-index: 2;
width: 3px;
height: 3px;
border-radius: 50%;
background: #FFB86B;
box-shadow: 0 0 6px 1px rgba(255, 158, 66, 0.9);
animation: spark-twinkle 3.2s ease-in-out infinite;
pointer-events: none;
}
.reviews-spark--lg { width: 4px; height: 4px; }
@keyframes spark-twinkle {
0%, 100% { opacity: 0.15; transform: scale(0.7); }
50% { opacity: 1; transform: scale(1.3); }
}
@keyframes ember-pulse {
0%, 100% { opacity: 0.3; transform: scale(0.9); }
50% { opacity: 0.8; transform: scale(1.15); }
}
.reviews-top {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1.15fr auto auto 1.05fr;
align-items: center;
gap: 36px;
margin-bottom: 56px;
}
.reviews-vertical-divider {
width: 1px;
min-height: 150px;
align-self: stretch;
background: linear-gradient(180deg, transparent, rgba(246, 183, 43, 0.15) 15%, rgba(243, 107, 33, 0.6) 50%, rgba(246, 183, 43, 0.15) 85%, transparent);
box-shadow: 0 0 10px rgba(243, 107, 33, 0.3);
}
.reviews-heading .section-tag { margin-bottom: 16px; }
.reviews-title {
font-family: var(--font-heading);
font-size: 3.1rem;
font-weight: 800;
line-height: 1.12;
letter-spacing: -0.5px;
color: #FFFFFF;
margin-bottom: 16px;
}
.reviews-title span { color: var(--color-primary); }
.reviews-subtitle {
color: var(--color-text-muted);
font-size: 1.14rem;
line-height: 1.6;
max-width: 420px;
}
.reviews-google-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 4px;
padding: 0 12px;
margin: 0 auto;
}
.reviews-stars-row {
display: flex;
gap: 2px;
color: var(--color-secondary);
}
.reviews-google-label {
color: var(--color-text-muted);
font-size: 0.92rem;
margin-top: 2px;
}
.reviews-google-wordmark {
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.6rem;
letter-spacing: -0.5px;
margin-bottom: 16px;
}
.reviews-google-wordmark .g-blue { color: #4285F4; }
.reviews-google-wordmark .g-red { color: #EA4335; }
.reviews-google-wordmark .g-yellow { color: #FBBC05; }
.reviews-google-wordmark .g-green { color: #34A853; }
.btn-google-cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 22px;
border-radius: var(--radius-full);
border: 1.5px solid var(--color-primary);
background: rgba(243, 107, 33, 0.1);
color: #FFFFFF;
font-family: var(--font-heading);
font-weight: 600;
font-size: 0.92rem;
transition: var(--transition-fast);
box-shadow: 0 0 0 1px rgba(243, 107, 33, 0.18), 0 0 18px rgba(243, 107, 33, 0.5), 0 0 4px rgba(255, 183, 94, 0.4);
}
.btn-google-cta svg { color: var(--color-secondary); flex-shrink: 0; }
.btn-google-cta:hover {
background: var(--color-primary);
color: #FFFFFF;
transform: translateY(-2px);
box-shadow: 0 0 0 1px rgba(243, 107, 33, 0.3), 0 0 28px rgba(243, 107, 33, 0.7), var(--shadow-glow);
}
.reviews-tagline {
font-family: 'Dancing Script', cursive;
font-size: 2.3rem;
font-weight: 700;
line-height: 1.2;
text-align: right;
justify-self: end;
transform: rotate(-4deg);
}
.reviews-tagline-1 {
color: #FDFBF5;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
.reviews-tagline-2 {
color: var(--color-primary);
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
.reviews-divider {
position: relative;
z-index: 2;
max-width: var(--container-max);
height: 1px;
margin: 0 auto 48px;
background: linear-gradient(90deg, transparent, rgba(243, 107, 33, 0.55) 18%, rgba(246, 183, 43, 0.55) 50%, rgba(243, 107, 33, 0.55) 82%, transparent);
box-shadow: 0 0 8px rgba(243, 107, 33, 0.3);
}
.reviews-row-divider {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--container-max);
height: 1px;
margin: 4px auto;
background: linear-gradient(90deg, transparent, rgba(243, 107, 33, 0.4) 18%, rgba(246, 183, 43, 0.4) 50%, rgba(243, 107, 33, 0.4) 82%, transparent);
}
.reviews-tracks {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: 22px;
margin-bottom: 56px;
}
.reviews-row-label {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 4px;
margin-bottom: 12px;
font-family: var(--font-heading);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--color-text-muted);
}
.reviews-row-label-end {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--color-primary);
}
.marquee {
overflow: hidden;
width: 100%;
cursor: grab;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee:active { cursor: grabbing; }
.marquee-track {
display: flex;
gap: 18px;
width: max-content;
will-change: transform;
}
.review-card {
flex: 0 0 auto;
max-width: 320px;
min-width: 250px;
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-dark);
border-radius: var(--radius-md);
padding: 13px 18px;
display: flex;
flex-direction: column;
gap: 6px;
user-select: none;
}
.review-card--sm { max-width: 255px; }
.review-card--md { max-width: 290px; }
.review-card--lg { max-width: 330px; }
.review-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.review-avatar {
width: 30px;
height: 30px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
display: block;
position: relative;
}
.review-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.review-avatar-fallback {
width: 100%;
height: 100%;
display: none;
align-items: center;
justify-content: center;
color: #FFFFFF;
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.8rem;
}
.review-stars {
display: flex;
gap: 2px;
color: var(--color-secondary);
flex-shrink: 0;
}
.review-text {
color: var(--color-text-light);
font-size: 0.87rem;
line-height: 1.42;
flex-grow: 1;
}
.review-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.review-name {
font-family: var(--font-heading);
font-weight: 600;
font-size: 0.8rem;
color: #FFFFFF;
}
.review-google-mark {
opacity: 0.85;
flex-shrink: 0;
}
.reviews-closing {
position: relative;
z-index: 2;
text-align: center;
padding-top: 8px;
}
.reviews-closing-divider {
display: block;
width: 64px;
height: 3px;
margin: 0 auto 20px;
border-radius: var(--radius-full);
background: linear-gradient(90deg, var(--color-secondary), var(--color-primary));
box-shadow: 0 0 16px rgba(243, 107, 33, 0.5);
}
.reviews-closing-text {
font-family: var(--font-heading);
font-weight: 800;
letter-spacing: 1px;
font-size: 1.7rem;
line-height: 1.3;
}
.reviews-closing-text .accent {
background: linear-gradient(90deg, var(--color-secondary), var(--color-primary));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-transform: uppercase;
letter-spacing: 2px;
}
.reviews-closing-text .plain {
color: var(--color-text-light);
font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
.marquee-track { transition: none !important; }
.reviews-ember,
.reviews-spark { animation: none; opacity: 0.6; }
.marquee {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-webkit-mask-image: none;
mask-image: none;
cursor: auto;
}
}
@media (max-width: 992px) {
.reviews-top {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
gap: 28px;
}
.reviews-subtitle { max-width: 100%; }
.reviews-tagline {
justify-self: center;
text-align: center;
transform: rotate(0deg);
}
.reviews-vertical-divider { display: none; }
}
@media (max-width: 768px) {
.reviews-section { padding: 72px 0 48px; }
.reviews-title { font-size: 2.3rem; }
.reviews-top { margin-bottom: 44px; }
}
@media (max-width: 580px) {
.reviews-title { font-size: 1.9rem; }
.reviews-closing-text { font-size: 1.3rem; }
.review-card,
.review-card--sm,
.review-card--md,
.review-card--lg {
max-width: 240px;
min-width: 210px;
}
}
/* --- LOCALIZAÇÃO & MAPA --- */
.location-card-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 36px;
align-items: stretch;
}
.location-info-panel {
background: var(--color-surface-card);
border: 1px solid var(--color-border-dark);
border-radius: var(--radius-lg);
padding: 36px 32px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.location-item {
display: flex;
gap: 16px;
margin-bottom: 24px;
}
.location-item svg {
width: 24px;
height: 24px;
color: var(--color-primary);
flex-shrink: 0;
margin-top: 2px;
}
.location-item h4,
.location-item h3 {
font-family: var(--font-heading);
font-size: 1.08rem;
font-weight: 700;
color: #FFFFFF;
margin-bottom: 4px;
}
.location-item p {
font-size: 0.92rem;
color: var(--color-text-muted);
line-height: 1.5;
}
.map-wrapper {
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--color-border-dark);
min-height: 380px;
}
.map-wrapper iframe {
width: 100%;
height: 100%;
min-height: 380px;
border: 0;
}
@media (max-width: 860px) {
.location-card-grid {
grid-template-columns: 1fr;
}
}
/* Localização da Home: leitura, CTA único e responsividade sem overflow */
.location-home {
padding-bottom: 64px;
}
.location-home .section-header {
max-width: 820px;
}
.location-home .location-card-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
gap: 32px;
}
.location-home .location-info-panel,
.location-home .map-wrapper {
min-width: 0;
}
.location-home .location-info-panel {
padding: 32px;
}
.location-home .location-item {
padding-bottom: 18px;
margin-bottom: 18px;
border-bottom: 1px solid var(--color-border-dark);
}
.location-home .location-item:last-child {
margin-bottom: 0;
border-bottom: 0;
}
.location-home .location-item > div {
min-width: 0;
}
.location-home .location-item p {
overflow-wrap: break-word;
}
.location-home .location-item strong {
white-space: nowrap;
}
.location-route-btn {
width: 100%;
margin-top: 24px;
white-space: normal;
}
.location-route-btn svg {
flex-shrink: 0;
}
.location-home .map-wrapper,
.location-home .map-wrapper iframe {
display: block;
min-height: 420px;
}
@media (max-width: 860px) {
.location-home .location-card-grid {
grid-template-columns: minmax(0, 1fr);
gap: 20px;
}
.location-home .map-wrapper,
.location-home .map-wrapper iframe {
min-height: 320px;
}
}
@media (max-width: 600px) {
.location-home {
padding-bottom: 48px;
}
.location-home .section-header {
margin-bottom: 28px;
}
.location-home .section-title {
font-size: 1.5rem;
letter-spacing: -0.3px;
}
.location-home .location-info-panel {
padding: 22px 18px;
}
.location-home .location-item {
gap: 12px;
padding-bottom: 14px;
margin-bottom: 14px;
}
.location-home .location-item h4,
.location-home .location-item h3 {
font-size: 1rem;
}
.location-route-btn {
margin-top: 20px;
min-height: 48px;
}
.location-home .map-wrapper,
.location-home .map-wrapper iframe {
min-height: 280px;
}
}
/* --- BANNER CTA FINAL --- */
.cta-banner {
background: linear-gradient(135deg, rgba(243, 107, 33, 0.15) 0%, rgba(20, 20, 20, 0.95) 100%),
var(--color-surface-dark);
border-top: 1px solid rgba(243, 107, 33, 0.25);
border-bottom: 1px solid var(--color-border-dark);
padding: 70px 0;
text-align: center;
}
.cta-banner-content {
max-width: 700px;
margin: 0 auto;
}
.cta-banner-title {
font-family: var(--font-heading);
font-size: 2.35rem;
font-weight: 800;
color: #FFFFFF;
margin-bottom: 14px;
}
.cta-banner-desc {
font-size: 1.1rem;
color: var(--color-text-muted);
margin-bottom: 28px;
}
.cta-banner-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
}
/* CTA final da página Restaurante: título em uma linha no desktop */
.cta-banner--restaurante .cta-banner-content {
max-width: 860px;
}
.cta-banner--restaurante .cta-banner-title {
font-size: clamp(1.75rem, 3.2vw, 2.35rem);
line-height: 1.2;
text-wrap: balance;
}
@media (max-width: 580px) {
.cta-banner--restaurante .cta-banner-actions .btn {
width: 100%;
white-space: normal;
}
}
/* --- FOOTER --- */
.site-footer {
background: var(--color-surface-dark);
border-top: 1px solid var(--color-border-dark);
padding: 70px 0 30px 0;
color: var(--color-text-muted);
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
gap: 40px;
margin-bottom: 50px;
}
.footer-col-brand p {
font-size: 0.92rem;
line-height: 1.6;
margin-bottom: 16px;
}
.footer-cnpj {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.4);
}
.footer-col h4,
.footer-col .footer-title {
font-family: var(--font-heading);
font-size: 1.12rem;
font-weight: 700;
color: #FFFFFF;
margin-bottom: 18px;
}
.footer-links {
display: flex;
flex-direction: column;
gap: 10px;
}
.footer-links a {
font-size: 0.92rem;
color: var(--color-text-muted);
transition: var(--transition-fast);
}
.footer-links a:hover {
color: var(--color-primary);
padding-left: 4px;
}
.footer-contact-item {
display: flex;
gap: 12px;
margin-bottom: 12px;
font-size: 0.92rem;
}
.footer-contact-item svg {
width: 18px;
height: 18px;
color: var(--color-primary);
flex-shrink: 0;
margin-top: 3px;
}
.social-links-row {
display: flex;
gap: 12px;
margin-top: 18px;
}
.social-btn {
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-dark);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-light);
transition: var(--transition-fast);
}
.social-btn:hover {
background: var(--color-primary);
color: #FFFFFF;
border-color: var(--color-primary);
transform: translateY(-2px);
}
.footer-bottom {
padding-top: 24px;
border-top: 1px solid var(--color-border-dark);
text-align: center;
font-size: 0.88rem;
color: var(--color-text-muted);
}
.footer-bottom a {
color: var(--color-text-muted);
text-decoration: underline;
}
.footer-bottom a:hover {
color: var(--color-primary);
}
@media (max-width: 992px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 32px;
}
}
@media (max-width: 580px) {
.footer-grid {
grid-template-columns: 1fr;
gap: 28px;
}
}
/* --- BOTÕES FLUTUANTES (WHATSAPP + IFOOD) --- */
.floating-actions {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 990;
display: flex;
flex-direction: column;
gap: 14px;
}
.float-btn {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
position: relative;
text-decoration: none;
}
.float-btn:hover {
transform: scale(1.08) translateY(-2px);
}
.float-btn svg {
width: 40px;
height: 40px;
}
.float-whatsapp {
background: var(--color-whatsapp);
color: #FFFFFF;
}
.float-whatsapp:hover {
box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
}
.float-ifood {
background: var(--color-ifood);
color: #FFFFFF;
border-radius: 50%;
padding: 0;
overflow: hidden;
}
.float-ifood:hover {
box-shadow: 0 8px 24px rgba(234, 29, 44, 0.45);
}
.float-ifood-logo {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.float-tooltip {
position: absolute;
right: 68px;
background: rgba(20, 20, 20, 0.95);
color: #FFFFFF;
padding: 6px 12px;
border-radius: var(--radius-sm);
font-family: var(--font-heading);
font-size: 0.8rem;
font-weight: 600;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transform: translateX(8px);
transition: opacity 0.2s ease, transform 0.2s ease;
border: 1px solid var(--color-border-dark);
box-shadow: var(--shadow-sm);
}
.float-btn:hover .float-tooltip {
opacity: 1;
transform: translateX(0);
}
@media (max-width: 580px) {
.floating-actions {
bottom: 16px;
right: 10px;
gap: 10px;
}
.float-btn {
width: 44px;
height: 44px;
}
.float-btn svg {
width: 28px;
height: 28px;
}
.float-tooltip {
display: none;
}
}
/* ==========================================================================
HERO DAS PÁGINAS INTERNAS & BREADCRUMBS
========================================================================== */
.page-hero {
position: relative;
background: radial-gradient(circle at 80% 20%, rgba(243, 107, 33, 0.12) 0%, transparent 60%),
radial-gradient(circle at 10% 80%, rgba(201, 42, 42, 0.08) 0%, transparent 50%),
var(--color-bg-dark);
padding: 56px 0 64px 0;
border-bottom: 1px solid var(--color-border-dark);
}
.breadcrumb-nav {
margin-bottom: 18px;
}
.breadcrumbs {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font-size: 0.86rem;
color: var(--color-text-muted);
}
.breadcrumbs a {
color: var(--color-text-muted);
transition: color 0.2s ease;
text-decoration: none;
}
.breadcrumbs a:hover {
color: var(--color-primary);
}
.breadcrumbs .sep {
color: rgba(255, 255, 255, 0.3);
font-size: 0.8rem;
}
.breadcrumbs .current {
color: var(--color-text-light);
font-weight: 500;
}
.page-hero-title {
font-family: var(--font-heading);
font-size: clamp(2rem, 3.8vw, 2.9rem);
font-weight: 800;
color: #FFFFFF;
line-height: 1.2;
margin: 12px 0 16px 0;
letter-spacing: -0.02em;
}
.page-hero-desc {
font-size: 1.08rem;
line-height: 1.7;
color: var(--color-text-muted);
max-width: 680px;
margin-bottom: 28px;
}
/* Hero Dividido com Fotografia Gastronômica */
.page-hero-grid {
display: grid;
grid-template-columns: 1.15fr 0.95fr;
gap: 48px;
align-items: center;
}
.page-hero-media {
position: relative;
}
.page-hero-frame {
position: relative;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(243, 107, 33, 0.25);
background: var(--color-surface-card);
}
.page-hero-frame img {
width: 100%;
height: 380px;
object-fit: cover;
display: block;
transition: transform 0.6s ease;
}
.page-hero-frame:hover img {
transform: scale(1.03);
}
.page-hero-badge {
position: absolute;
bottom: 16px;
left: 16px;
background: rgba(20, 20, 20, 0.92);
backdrop-filter: blur(8px);
border: 1px solid rgba(243, 107, 33, 0.4);
padding: 8px 16px;
border-radius: var(--radius-full);
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-heading);
font-size: 0.82rem;
font-weight: 700;
color: #FFFFFF;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.page-hero-badge .badge-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-primary);
box-shadow: 0 0 8px var(--color-primary);
}
/* Mosaico gastronômico do hero (Espetinho em Dourados) */
.hero-mosaic {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: 290px 150px;
gap: 10px;
}
.hero-mosaic img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--radius-lg);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
.hero-mosaic-main {
grid-column: 1 / -1;
object-position: 45% 45%;
}
.hero-mosaic-linguica {
object-position: 50% 60%;
}
.hero-mosaic-pao-alho {
object-position: 50% 55%;
}
@media (max-width: 920px) {
.hero-mosaic {
grid-template-rows: 300px 160px;
}
}
@media (max-width: 580px) {
.hero-mosaic {
grid-template-rows: 220px 116px;
gap: 8px;
}
.hero-mosaic img {
border-radius: var(--radius-md);
}
}
/* Mosaico do hero (Restaurante em Dourados): fotos reais verticais */
.hero-mosaic--restaurante,
.hero-mosaic--vertical {
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
grid-template-rows: 215px 215px;
}
.hero-mosaic--restaurante .hero-mosaic-main,
.hero-mosaic--vertical .hero-mosaic-main {
grid-column: 1;
grid-row: 1 / span 2;
}
.hero-mosaic-salao { object-position: 55% 62%; }
.hero-mosaic-jantinha { object-position: 50% 78%; }
.hero-mosaic-saladas { object-position: 50% 45%; }
@media (max-width: 920px) {
.hero-mosaic--restaurante,
.hero-mosaic--vertical {
grid-template-rows: 230px 230px;
}
}
@media (max-width: 580px) {
.hero-mosaic--restaurante,
.hero-mosaic--vertical {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: 250px 150px;
}
.hero-mosaic--restaurante .hero-mosaic-main,
.hero-mosaic--vertical .hero-mosaic-main {
grid-column: 1 / -1;
grid-row: 1;
}
}
.btn-icon-wrapper {
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-icon-wrapper svg {
flex-shrink: 0;
}
@media (max-width: 920px) {
.page-hero-grid {
grid-template-columns: 1fr;
gap: 32px;
}
.page-hero-frame img {
height: 300px;
}
}
@media (max-width: 580px) {
.page-hero {
padding: 40px 0 48px 0;
}
.page-hero-frame img {
height: 240px;
}
}
/* Espetinho (pão de alho e acompanhamentos) no mobile — precisa vir após as regras-base */
@media (max-width: 860px) {
/* Espetinho, pão de alho: texto → fotos → CTA */
.sabores-bloco {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
}
.sabores-bloco .sabores-texto {
display: contents;
}
.sabores-texto > .section-tag {
align-self: flex-start;
}
.sabores-bloco .sabores-fotos {
order: 1;
margin-top: 12px;
}
.sabores-texto > .btn,
.sabores-texto > .sabores-lista {
order: 2;
}
.sabores-texto > .btn {
margin-top: 32px;
}
.sabores-texto > .sabores-lista {
margin-top: 28px;
}
}
/* Marmitas no mobile: canais em coluna única, no mesmo padrão dos cards da Home */
@media (max-width: 768px) {
.marmita-canais .delivery-grid {
grid-template-columns: minmax(0, 1fr);
}
.marmita-opcoes-foto img {
max-width: none;
width: 100%;
}
}
/* ==========================================================================
PÁGINA CONTATO
========================================================================== */
.page-hero--contato .contato-hero-fachada {
object-position: 55% 50%;
}
.location-item .location-item-title {
font-family: var(--font-heading);
font-size: 1.08rem;
font-weight: 700;
color: #FFFFFF;
margin-bottom: 4px;
}
.bairro-card {
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 84px;
transition: transform 0.3s ease, box-shadow 0.35s ease, border-color 0.3s ease;
}
.bairro-card h3 {
font-family: var(--font-heading);
font-size: 1.15rem;
font-weight: 700;
color: var(--color-secondary);
margin: 0;
}
.bairro-card p {
margin-top: 4px;
}
@media (hover: hover) and (pointer: fine) {
.bairro-card:hover {
transform: translateY(-3px);
border-color: rgba(243, 107, 33, 0.3);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}
}
@media (hover: none) {
.bairro-card:active {
border-color: rgba(243, 107, 33, 0.3);
}
}
@media (prefers-reduced-motion: reduce) {
.bairro-card { transition: none; }
.bairro-card:hover { transform: none; }
}
.bairros-nota {
max-width: 640px;
margin: 32px auto 0;
text-align: center;
font-size: 0.95rem;
line-height: 1.6;
color: var(--color-text-muted);
}
.bairros-nota a {
color: var(--color-primary);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
.bairros-nota a:hover {
color: var(--color-secondary);
}
@media (max-width: 640px) {
.bairro-card {
min-height: 60px;
}
.bairro-card h3 {
font-size: 1rem;
}
.bairros-nota {
margin-top: 24px;
font-size: 0.9rem;
}
}
.location-item .nowrap {
white-space: nowrap;
}
.bairros-nota .br-mobile {
display: none;
}
@media (max-width: 640px) {
.bairros-nota .br-mobile {
display: inline;
}
}
/* Telefone clicável no footer, com o mesmo visual do texto */
.footer-contact-item a {
color: inherit;
}
.footer-contact-item a:hover {
color: var(--color-primary);
}
/* Espetinhos: Acompanhamentos da Casa integrados ao bloco escuro da variedade */
.espetos-acompanhamentos {
margin-top: 80px;
padding-top: 72px;
border-top: 1px solid var(--color-border-dark);
}
.espetos-acompanhamentos .sabores-titulo {
font-family: var(--font-heading);
font-size: 2.1rem;
line-height: 1.2;
color: #FFFFFF;
margin: 0 0 16px;
}
.espetos-acompanhamentos .sabores-texto p {
font-size: 1.05rem;
line-height: 1.7;
color: var(--color-text-muted);
margin-bottom: 18px;
}
.espetos-acompanhamentos .sabores-lista li {
background: var(--color-surface-card);
border-color: var(--color-border-dark);
color: var(--color-text-light);
}
.espetos-acompanhamentos .sabores-foto-principal {
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}
.espetos-acompanhamentos .sabores-foto-apoio {
border-color: var(--color-surface-dark);
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
}
@media (max-width: 860px) {
.espetos-acompanhamentos {
margin-top: 56px;
padding-top: 48px;
}
}
@media (max-width: 580px) {
.espetos-acompanhamentos .sabores-titulo {
font-size: 1.6rem;
}
}
/* Acompanhamentos da Casa: espetos em destaque + acompanhamentos, lado a lado e escalonados */
.espetos-acompanhamentos .acomp-fotos {
order: -1;
}
.acomp-fotos {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
gap: 14px;
align-items: end;
padding-bottom: 36px;
}
.acomp-fotos img {
display: block;
width: 100%;
object-fit: cover;
border-radius: var(--radius-lg);
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}
.acomp-foto-espetos {
aspect-ratio: 4 / 5;
object-position: 42% 50%;
}
.acomp-foto-buffet {
position: relative;
z-index: 1;
aspect-ratio: 3 / 4;
object-position: 50% 45%;
/* sobrepõe ~18px a borda direita da foto dos espetos (14px de gap + 18px) */
transform: translate(-32px, 36px);
outline: 4px solid var(--color-surface-dark);
}
@media (max-width: 860px) {
.espetos-acompanhamentos .acomp-fotos {
order: 1;
width: 100%;
max-width: 560px;
margin: 12px auto 0;
}
}
@media (max-width: 580px) {
.acomp-fotos {
gap: 10px;
padding-bottom: 24px;
}
.acomp-foto-buffet {
transform: translateY(24px);
outline: 0;
}
.acomp-fotos img {
border-radius: var(--radius-md);
}
}
/* Acompanhamentos da Casa no mobile: espeto em destaque + acompanhamentos sobreposto no canto inferior direito */
@media (max-width: 580px) {
.espetos-acompanhamentos .acomp-fotos {
display: block;
position: relative;
padding-bottom: 56px;
}
.espetos-acompanhamentos .acomp-foto-espetos {
width: 78%;
aspect-ratio: 4 / 5;
}
.espetos-acompanhamentos .acomp-foto-buffet {
position: absolute;
right: 0;
bottom: 0;
width: 42%;
aspect-ratio: 3 / 4;
transform: none;
outline: 4px solid var(--color-surface-dark);
border-radius: var(--radius-md);
}
}
/* Home: mapa no mobile com altura explícita (evita bloco vazio) e fundo de carregamento */
@media (max-width: 860px) {
.location-home .map-wrapper {
position: relative;
height: 320px;
min-height: 0;
background: var(--color-surface-card);
}
.location-home .map-wrapper::before {
content: 'Carregando mapa…';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
color: var(--color-text-muted);
}
.location-home .map-wrapper iframe {
position: relative;
z-index: 1;
height: 100%;
min-height: 0;
}
}
@media (max-width: 600px) {
.location-home .map-wrapper {
height: 280px;
}
}
/* Marmitas: foto principal da seção de opções mais alta no celular, valorizando a marmita */
@media (max-width: 640px) {
.marmita-opcoes-foto img {
aspect-ratio: 4 / 5;
object-position: 50% 58%;
}
}