/* ============================================================ Rei do Parmegiana — style.css (consolidado) Gerado a partir de style-homepage/quem-somos/cardapio/unidades.css Cada bloco é escopado por classe no (page-home, page-quem-somos, page-cardapio, page-unidades) para evitar conflitos de seletores. ============================================================ */ /* -------- GLOBAL (variáveis, reset, keyframes, seletores compartilhados) -------- */ :root { --amber-primary: #F2A71B; --amber-light: #FFB818; --burnt-orange: #D97218; --deep-orange: #BF4417; --crimson-red: #A61B1B; --off-white: #F2F2F2; --near-black: #0D0D0D; --surface: #161616; --muted: #8A8A8A; --border: #2A2A2A; --font-display: 'Bebas Neue', 'Impact', sans-serif; --font-body: 'Nunito', system-ui, sans-serif; --font-mm: 'acumin-pro-extra-condensed', 'Barlow Condensed', 'Bebas Neue', sans-serif; --nav-h: 140px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--near-black); color: var(--off-white); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--near-black); } ::-webkit-scrollbar-thumb { background: var(--amber-primary); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--amber-light); } * { scrollbar-width: thin; scrollbar-color: var(--amber-primary) var(--near-black); } @keyframes mmLinkIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes reel-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes ifood-glow { 0%, 100% { box-shadow: 0 0 8px rgba(220, 0, 0, 0.3), 0 4px 16px rgba(0,0,0,0.25); } 50% { box-shadow: 0 0 20px rgba(220, 0, 0, 0.58), 0 4px 20px rgba(0,0,0,0.3); } } :root { --amber-primary: #F2A71B; --amber-light: #FFB818; --burnt-orange: #D97218; --deep-orange: #BF4417; --crimson-red: #A61B1B; --off-white: #F2F2F2; --near-black: #0D0D0D; --surface: #161616; --surface-2: #1f1f1f; --muted: #8A8A8A; --border: #2A2A2A; --dark-hover: #222; --menu-border: #ddd; --menu-blue: #1A3A8C; --footer-bg: #0a0a0a; --footer-muted: #555; --font-display: 'Bebas Neue', 'Impact', sans-serif; --font-body: 'Nunito', system-ui, sans-serif; --font-mm: 'acumin-pro-extra-condensed', 'Barlow Condensed', 'Bebas Neue', sans-serif; --nav-h: 140px; } img { display: block; max-width: 100%; } button { font: inherit; } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #1A1A1A; } ::-webkit-scrollbar-thumb { background: #F2A71B; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #FFB818; } html { scrollbar-width: thin; scrollbar-color: #F2A71B #1A1A1A; } :root { --amber-primary: #F2A71B; --amber-light: #FFB818; --burnt-orange: #D97218; --deep-orange: #BF4417; --crimson-red: #A61B1B; --off-white: #F2F2F2; --near-black: #0D0D0D; --surface: #161616; --surface-2: #1f1f1f; --muted: #8A8A8A; --border: #2A2A2A; --dark-hover: #222; --menu-border: #ddd; --menu-blue: #1A3A8C; --footer-bg: #0a0a0a; --footer-muted: #555; --font-display: 'Bebas Neue', 'Impact', sans-serif; --font-body: 'Nunito', system-ui, sans-serif; --font-mm: 'acumin-pro-extra-condensed', 'Barlow Condensed', 'Bebas Neue', sans-serif; --nav-h: 140px; } :root { --amber-primary: #F2A71B; --amber-light: #FFB818; --burnt-orange: #D97218; --deep-orange: #BF4417; --crimson-red: #A61B1B; --off-white: #F2F2F2; --near-black: #0D0D0D; --surface: #161616; --surface-2: #1f1f1f; --muted: #8A8A8A; --border: #2A2A2A; --dark-hover: #222; --menu-border: #ddd; --menu-blue: #1A3A8C; --footer-bg: #0a0a0a; --font-display: 'Bebas Neue', 'Impact', sans-serif; --font-body: 'Nunito', system-ui, sans-serif; --font-mm: 'acumin-pro-extra-condensed', 'Barlow Condensed', 'Bebas Neue', sans-serif; --nav-h: 140px; } /* ============================================================ assets/css/style-homepage.css → body.page-home ============================================================ */ /* CUSTOM SCROLLBAR */ /* NAV */ body.page-home .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h); background: rgba(13,13,13,0.85); border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 10px clamp(20px, 4vw, 56px); transition: background 0.35s ease, backdrop-filter 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; } body.page-home .nav.scrolled { background: rgba(13,13,13,0.72); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border-bottom-color: rgba(255,255,255,0.07); box-shadow: 0 4px 32px rgba(0,0,0,0.45); } body.page-home .nav-left { display: flex; align-items: center; gap: 28px; } body.page-home .nav-logo { display: flex; justify-content: center; } body.page-home .nav-logo img { height: 120px; width: 120px; object-fit: contain; } body.page-home .nav-right { display: flex; justify-content: flex-end; } body.page-home .nav-cta { background: var(--amber-primary); color: var(--near-black); font-family: var(--font-body); font-weight: 800; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; padding: 10px 24px; border-radius: 100px; transition: background 0.2s, transform 0.15s; white-space: nowrap; } body.page-home .nav-cta:hover { background: var(--amber-light); transform: translateY(-1px); } body.page-home .nav-burger { display: flex; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; flex-shrink: 0; } body.page-home .nav-burger span { display: block; width: 24px; height: 2px; background: var(--off-white); border-radius: 2px; transition: background 0.2s; } body.page-home .nav-text-links { display: flex; align-items: center; gap: 24px; list-style: none; } body.page-home .nav-text-links a { font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--off-white); transition: color 0.2s; white-space: nowrap; } body.page-home .nav-text-links a:hover { color: var(--amber-primary); } /* When mega menu is open, main nav links + burger turn black (mega covers nav, but keep it consistent) */ body.page-home.menu-open .nav-text-links a { color: var(--near-black); } body.page-home.menu-open .nav-burger span { background: var(--near-black); } @media (max-width: 768px) { body.page-home .nav-text-links { display: none; } } /* MEGA MENU OVERLAY */ body.page-home .mm-overlay { position: fixed; inset: 0; z-index: 190; background: rgba(0,0,0,0); pointer-events: none; transition: background 0.4s ease; } body.page-home .mm-overlay.open { background: rgba(0,0,0,0.55); pointer-events: all; } /* MEGA MENU PANEL */ body.page-home .mega-menu { position: fixed; top: 0; left: 0; right: 0; bottom: auto; z-index: 200; background: var(--off-white); display: flex; flex-direction: column; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: transform 0.42s cubic-bezier(0.22,1,0.36,1), opacity 0.3s ease; max-height: 80vh; overflow-y: auto; box-shadow: 0 24px 64px rgba(0,0,0,0.35); } body.page-home .mega-menu.open { transform: translateY(0); opacity: 1; pointer-events: all; } body.page-home .mega-menu-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 clamp(20px, 4vw, 56px); height: var(--nav-h); border-bottom: 1px solid #ddd; flex-shrink: 0; } body.page-home .mm-left { display: flex; align-items: center; gap: 32px; } body.page-home .mm-logo { justify-self: center; } body.page-home .mm-logo img { height: 90px; width: 90px; object-fit: contain; } body.page-home .mm-right { justify-self: end; } body.page-home .mega-menu-header .mm-top-links { display: flex; gap: 32px; list-style: none; } body.page-home .mega-menu-header .mm-top-links a { font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--near-black); transition: color 0.2s; } body.page-home .mega-menu-header .mm-top-links a:hover { color: var(--crimson-red); } body.page-home .mm-close { background: none; border: none; cursor: pointer; color: var(--near-black); font-size: 28px; line-height: 1; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; transition: color 0.2s, transform 0.2s; } body.page-home .mm-close:hover { color: var(--crimson-red); transform: rotate(90deg); } body.page-home .mega-menu-cta { background: var(--crimson-red); color: var(--off-white); font-family: var(--font-body); font-weight: 800; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; padding: 10px 24px; border-radius: 100px; transition: background 0.2s; } body.page-home .mega-menu-cta:hover { background: #8B1111; } body.page-home .mega-menu-body { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; padding: clamp(32px, 5vw, 60px) clamp(20px, 4vw, 56px) clamp(32px, 5vw, 60px); } body.page-home .mm-col { display: flex; flex-direction: column; gap: 8px; } body.page-home .mm-col-title { font-family: var(--font-mm); font-size: clamp(32px, 4vw, 58px); font-weight: 900; color: var(--crimson-red); letter-spacing: 0.01em; transition: color 0.15s; line-height: 1.1; text-transform: uppercase; } body.page-home .mm-col-title:hover { color: var(--amber-primary); } /* Animation: stagger each link on open */ body.page-home .mega-menu.open .mm-col-title { animation: mmLinkIn 0.5s cubic-bezier(0.22,1,0.36,1) both; } body.page-home .mm-col:nth-child(1) .mm-col-title:nth-child(1) { animation-delay: 0.05s; } body.page-home .mm-col:nth-child(1) .mm-col-title:nth-child(2) { animation-delay: 0.10s; } body.page-home .mm-col:nth-child(1) .mm-col-title:nth-child(3) { animation-delay: 0.15s; } body.page-home .mm-col:nth-child(1) .mm-col-title:nth-child(4) { animation-delay: 0.20s; } body.page-home .mm-col:nth-child(2) .mm-col-title:nth-child(1) { animation-delay: 0.08s; } body.page-home .mm-col:nth-child(2) .mm-col-title:nth-child(2) { animation-delay: 0.13s; } body.page-home .mm-col:nth-child(2) .mm-col-title:nth-child(3) { animation-delay: 0.18s; } body.page-home .mm-col:nth-child(2) .mm-col-title:nth-child(4) { animation-delay: 0.23s; } body.page-home .mm-col:nth-child(3) .mm-col-title { animation-delay: 0.12s; } /* Instagram column video */ body.page-home .mm-ig-video { margin-top: 20px; width: 100%; max-width: 220px; aspect-ratio: 1/1; border-radius: 12px; overflow: hidden; background: #ddd; } body.page-home .mm-ig-video video { width: 100%; height: 100%; object-fit: cover; display: block; } body.page-home .mega-menu.open .mm-ig-video { animation: mmLinkIn 0.5s cubic-bezier(0.22,1,0.36,1) 0.22s both; } body.page-home .mm-mobile-body { display: none; } body.page-home .mega-menu-footer { display: flex; align-items: center; justify-content: space-between; padding: 20px clamp(20px, 4vw, 56px); border-top: 1px solid #ddd; flex-shrink: 0; } body.page-home .mm-socials { display: flex; gap: 24px; align-items: center; } body.page-home .mm-socials a { color: var(--near-black); font-size: 20px; transition: color 0.2s; } body.page-home .mm-socials a:hover { color: var(--crimson-red); } body.page-home .mm-footer-links { display: flex; gap: 40px; } body.page-home .mm-footer-links a { font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--near-black); transition: color 0.2s; } body.page-home .mm-footer-links a:hover { color: var(--crimson-red); } /* UTILITIES */ body.page-home .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); } body.page-home .section { padding: clamp(60px, 8vw, 120px) 0; } body.page-home .eyebrow { font-family: var(--font-body); font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--amber-primary); } body.page-home .section-subtitle { font-family: var(--font-body); font-size: clamp(15px, 1.5vw, 18px); color: var(--muted); line-height: 1.6; } body.page-home .btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--amber-primary); color: var(--near-black); font-family: var(--font-body); font-weight: 800; font-size: 14px; letter-spacing: 0.03em; text-transform: uppercase; padding: 14px 32px; border-radius: 100px; border: none; cursor: pointer; transition: background 0.2s, transform 0.15s; white-space: nowrap; } body.page-home .btn-primary:hover { background: var(--amber-light); transform: translateY(-2px); } body.page-home .btn-secondary { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--off-white); font-family: var(--font-body); font-weight: 800; font-size: 14px; letter-spacing: 0.03em; text-transform: uppercase; padding: 12px 30px; border-radius: 100px; border: 2px solid rgba(242,242,242,0.4); cursor: pointer; transition: border-color 0.2s, color 0.2s, transform 0.15s; white-space: nowrap; } body.page-home .btn-secondary:hover { border-color: var(--amber-primary); color: var(--amber-primary); transform: translateY(-2px); } body.page-home .btn-dark { display: inline-flex; align-items: center; gap: 8px; background: var(--near-black); color: var(--off-white); font-family: var(--font-body); font-weight: 800; font-size: 14px; letter-spacing: 0.03em; text-transform: uppercase; padding: 14px 32px; border-radius: 100px; border: none; cursor: pointer; transition: background 0.2s, transform 0.15s; white-space: nowrap; } body.page-home .btn-dark:hover { background: #222; transform: translateY(-2px); } /* ── TICKER ── */ body.page-home .ticker-wrap { overflow: hidden; background: var(--amber-primary); padding: 16px 0; border-top: 2px solid rgba(0,0,0,0.12); border-bottom: 2px solid rgba(0,0,0,0.12); } body.page-home .ticker-track { display: flex; white-space: nowrap; animation: ticker-scroll 32s linear infinite; } body.page-home .ticker-track span { font-family: var(--font-display); font-size: clamp(15px, 1.4vw, 19px); letter-spacing: 0.08em; text-transform: uppercase; color: var(--near-black); padding: 0 clamp(24px, 3vw, 48px); flex-shrink: 0; } @media (prefers-reduced-motion: reduce) { body.page-home .ticker-track { animation: none; } } /* HERO */ body.page-home .hero { position: relative; min-height: 100svh; background: var(--near-black); display: flex; align-items: center; overflow: hidden; padding-top: var(--nav-h); } body.page-home .hero-bg { position: absolute; inset: 0; z-index: 0; } body.page-home .hero-bg video { width: 100%; height: 100%; object-fit: cover; opacity: 1; } body.page-home .hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(13,13,13,0.90) 0%, rgba(13,13,13,0.80) 35%, rgba(13,13,13,0.18) 62%, transparent 100%); } body.page-home .hero-content { position: relative; z-index: 1; max-width: 720px; } body.page-home .hero-eyebrow { font-family: var(--font-body); font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--amber-primary); margin-bottom: 16px; } body.page-home .hero h1 { font-family: var(--font-display); font-size: clamp(56px, 9vw, 120px); line-height: 1; letter-spacing: 0.02em; color: var(--off-white); margin-bottom: 24px; } body.page-home .hero h1 span { color: var(--amber-primary); } body.page-home .hero-lead { font-family: var(--font-body); font-size: clamp(15px, 1.5vw, 18px); line-height: 1.7; color: rgba(242,242,242,0.8); margin-bottom: 40px; max-width: 520px; } body.page-home .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; } /* DIFERENCIAIS */ body.page-home .diferenciais { background: #A21916; border-top: none; border-bottom: none; padding-block: 0; } body.page-home .diferenciais-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } body.page-home .diferencial-item { padding: clamp(32px, 4vw, 56px) clamp(20px, 3vw, 40px); border-right: 1px solid rgba(255,255,255,0.15); display: flex; flex-direction: column; gap: 16px; } body.page-home .diferencial-item:last-child { border-right: none; } body.page-home .diferencial-img { width: 100%; aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; } body.page-home .diferencial-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; } body.page-home .diferencial-item:hover .diferencial-img img { transform: scale(1.05); } body.page-home .diferencial-item h2 { font-family: var(--font-display); font-size: clamp(22px, 2.5vw, 32px); letter-spacing: 0.02em; color: var(--amber-primary); line-height: 1.05; } body.page-home .diferencial-item p { font-size: 14px; color: rgba(255,255,255,0.8); line-height: 1.6; } /* SOBRE */ body.page-home .sobre { background: #F2F2F2; } body.page-home .sobre-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; } body.page-home .sobre-img { aspect-ratio: 4/5; border-radius: 16px; overflow: hidden; position: relative; } body.page-home .sobre-img img { width: 100%; height: 100%; object-fit: cover; } body.page-home .sobre-img::after { content: ''; position: absolute; inset: 0; border-radius: 16px; border: 1px solid rgba(13,13,13,0.1); } body.page-home .sobre-text { display: flex; flex-direction: column; gap: 24px; } body.page-home .sobre-text h2 { font-family: var(--font-display); font-size: clamp(40px, 5vw, 72px); line-height: 1; letter-spacing: 0.02em; color: var(--near-black); } body.page-home .sobre-subtitle { font-family: var(--font-body); font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #A21916; } body.page-home .sobre-text p { font-size: 16px; line-height: 1.7; color: rgba(13,13,13,0.65); } body.page-home .sobre-quote { border-left: 3px solid var(--amber-primary); padding-left: 24px; font-family: var(--font-display); font-size: clamp(20px, 2vw, 28px); color: var(--near-black); letter-spacing: 0.02em; line-height: 1.3; } /* CARDÁPIO */ body.page-home .cardapio { background: var(--off-white); } body.page-home .cardapio-header { text-align: center; margin-bottom: clamp(40px, 5vw, 72px); } body.page-home .cardapio-header h2 { font-family: var(--font-display); font-size: clamp(32px, 4.5vw, 64px); letter-spacing: 0.02em; margin-bottom: 16px; color: var(--near-black); } body.page-home .cardapio .section-subtitle { color: #555; } body.page-home .cardapio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); } body.page-home .cardapio-card { background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid rgba(0,0,0,0.09); transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; } body.page-home .cardapio-card:hover { transform: translateY(-4px); border-color: var(--amber-primary); box-shadow: 0 8px 32px rgba(0,0,0,0.10); } body.page-home .cardapio-card-img { width: 100%; aspect-ratio: 16/9; overflow: hidden; } body.page-home .cardapio-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; } body.page-home .cardapio-card:hover .cardapio-card-img img { transform: scale(1.05); } body.page-home .cardapio-card-body { padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 16px; } body.page-home .cardapio-card h3 { font-family: var(--font-display); font-size: clamp(28px, 3vw, 40px); letter-spacing: 0.02em; color: var(--near-black); } body.page-home .cardapio-card p { font-size: 15px; color: #555; line-height: 1.6; } /* DEPOIMENTOS */ body.page-home .depoimentos { background: #A21916; } body.page-home .depoimentos-header { text-align: center; margin-bottom: clamp(40px, 5vw, 72px); } body.page-home .depoimentos-header h2 { font-family: var(--font-display); font-size: clamp(32px, 4.5vw, 64px); letter-spacing: 0.02em; margin-bottom: 16px; } body.page-home .depoimentos .section-subtitle { color: rgba(255,255,255,0.75); } body.page-home .depoimentos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.5vw, 32px); } body.page-home .depoimento-card { background: var(--near-black); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 16px; } body.page-home .depoimento-stars { color: var(--amber-primary); font-size: 18px; letter-spacing: 2px; } body.page-home .depoimento-text { font-size: 15px; line-height: 1.7; color: rgba(242,242,242,0.85); font-style: italic; flex: 1; } body.page-home .depoimento-autor { font-family: var(--font-body); font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.55); letter-spacing: 0.04em; } /* COMO PEDIR */ body.page-home .como-pedir { background: var(--off-white); } body.page-home .como-pedir-header { text-align: center; margin-bottom: clamp(40px, 5vw, 72px); } body.page-home .como-pedir-badge { display: inline-block; background: rgba(0,0,0,0.07); color: #555; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 16px; border-radius: 100px; margin-bottom: 24px; } body.page-home .como-pedir-header h2 { font-family: var(--font-display); font-size: clamp(32px, 4.5vw, 64px); letter-spacing: 0.02em; color: var(--near-black); } body.page-home .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); margin-bottom: clamp(48px, 6vw, 96px); } body.page-home .step { display: flex; flex-direction: column; gap: 16px; position: relative; } body.page-home .step::after { content: '→'; position: absolute; right: -24px; top: 20px; font-size: 24px; color: rgba(0,0,0,0.2); } body.page-home .step:last-child::after { display: none; } body.page-home .step h3 { font-family: var(--font-display); font-size: clamp(48px, 6vw, 80px); line-height: 1; letter-spacing: 0.02em; color: var(--amber-primary); } body.page-home .step-title { font-family: var(--font-display); font-size: clamp(20px, 2.5vw, 28px); letter-spacing: 0.02em; color: var(--near-black); } body.page-home .step p { font-size: 15px; color: #555; line-height: 1.6; } body.page-home .como-pedir-cta { text-align: center; border-top: 1px solid rgba(0,0,0,0.1); padding-top: clamp(40px, 5vw, 72px); display: flex; flex-direction: column; align-items: center; gap: 24px; } body.page-home .como-pedir-cta h4 { font-family: var(--font-display); font-size: clamp(22px, 3vw, 36px); letter-spacing: 0.02em; max-width: 560px; color: var(--near-black); } body.page-home .como-pedir-cta p { font-size: 15px; color: #555; max-width: 480px; } /* TARJA */ body.page-home .tarja { background: var(--amber-primary); padding: clamp(56px, 8vw, 100px) 0; } body.page-home .tarja-inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 720px; margin: 0 auto; } body.page-home .tarja h2 { font-family: var(--font-display); font-size: clamp(48px, 7vw, 96px); color: var(--near-black); line-height: 0.92; letter-spacing: 0.02em; } body.page-home .tarja p { font-size: clamp(16px, 1.6vw, 20px); font-weight: 700; color: rgba(13,13,13,0.78); line-height: 1.6; } /* FOOTER */ body.page-home .footer { background: #0a0a0a; border-top: 1px solid var(--border); padding: clamp(48px, 6vw, 96px) 0 clamp(24px, 3vw, 40px); } body.page-home .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.5fr; gap: clamp(32px, 4vw, 64px); margin-bottom: clamp(40px, 5vw, 72px); } body.page-home .footer-col h5 { font-family: var(--font-body); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber-primary); margin-bottom: 24px; } body.page-home .footer-logo { margin-bottom: 10px; } body.page-home .footer-logo img { height: 80px; width: auto; } body.page-home .footer-col p { font-size: 14px; color: var(--muted); line-height: 1.7; } body.page-home .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; } body.page-home .footer-col ul li a { font-size: 14px; color: var(--muted); transition: color 0.2s; } body.page-home .footer-col ul li a:hover { color: var(--amber-primary); } body.page-home .footer-social-links { display: flex; flex-direction: column; gap: 12px; } body.page-home .footer-social-link { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); transition: color 0.2s; } body.page-home .footer-social-link:hover { color: var(--amber-primary); } body.page-home .footer-ifood-links { display: flex; flex-direction: column; gap: 8px; } body.page-home .footer-ifood-link { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-size: 13px; font-weight: 700; color: var(--off-white); transition: border-color 0.2s, background 0.2s; } body.page-home .footer-ifood-link:hover { border-color: var(--amber-primary); background: rgba(242,167,27,0.08); } body.page-home .footer-ifood-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber-primary); flex-shrink: 0; } body.page-home .footer-bottom { border-top: 1px solid var(--border); padding-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } body.page-home .footer-bottom p { font-size: 12px; color: #555; } body.page-home .footer-bottom img { height: 48px; width: auto; } /* RESPONSIVE */ @media (max-width: 1024px) { body.page-home .diferenciais-grid { grid-template-columns: repeat(2, 1fr); } body.page-home .diferencial-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.15); } body.page-home .diferencial-item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.15); } body.page-home .diferencial-item:nth-last-child(-n+2) { border-bottom: none; } body.page-home .footer-grid { grid-template-columns: 1fr 1fr; } body.page-home .mega-menu-body { grid-template-columns: 1fr 1fr; } body.page-home .mm-col:nth-child(3) { display: none; } } @media (max-width: 920px) { body.page-home .sobre-grid { grid-template-columns: 1fr; } body.page-home .sobre-img { aspect-ratio: 16/9; order: -1; } body.page-home .cardapio-grid { grid-template-columns: 1fr; } body.page-home .depoimentos-grid { grid-template-columns: 1fr; } body.page-home .steps-grid { grid-template-columns: 1fr; } body.page-home .step::after { display: none; } } @media (max-width: 768px) { :root { --nav-h: 80px; } /* Mega menu – mobile full-screen */ body.page-home .mega-menu { height: 100dvh; max-height: 100dvh; overflow-y: auto; } body.page-home .mega-menu-body { display: none; } body.page-home .mega-menu-footer { display: none; } body.page-home .mega-menu-header .mm-top-links { display: none; } body.page-home .mm-left { gap: 0; } body.page-home .mega-menu-cta { font-size: 11px; padding: 8px 14px; } body.page-home .mega-menu-header { height: 72px; } body.page-home .mm-logo img { height: 46px; width: 46px; } body.page-home .nav { padding-block: 0; } body.page-home .nav-logo img { height: 68px; width: 68px; } body.page-home .nav-right .nav-cta { display: none; } body.page-home .mm-mobile-body { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 24px 28px 32px; justify-content: space-between; } body.page-home .mm-mobile-nav { display: flex; flex-direction: column; } body.page-home .mm-mobile-link { font-family: var(--font-mm); font-size: clamp(34px, 9vw, 48px); font-weight: 900; letter-spacing: 0.01em; text-transform: uppercase; color: var(--crimson-red); display: block; padding: 9px 0; border-bottom: 1px solid rgba(13,13,13,0.1); transition: color 0.15s ease, padding-left 0.2s ease; line-height: 1.1; } body.page-home .mm-mobile-link:hover { color: var(--amber-primary); padding-left: 10px; } body.page-home .mm-mobile-sep { display: block; height: 2px; background: rgba(13,13,13,0.12); margin: 10px 0; border-radius: 2px; } body.page-home .mm-mobile-footer { display: flex; flex-direction: column; gap: 16px; padding-top: 20px; } body.page-home .mm-mobile-cta { display: block; text-align: center; background: var(--crimson-red); color: #fff; font-family: var(--font-body); font-weight: 800; font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; padding: 14px 24px; border-radius: 100px; transition: background 0.2s; } body.page-home .mm-mobile-cta:hover { background: #8B1111; } body.page-home .mm-mobile-socials { display: flex; gap: 24px; justify-content: center; align-items: center; } body.page-home .mm-mobile-socials a { color: var(--near-black); transition: color 0.2s; } body.page-home .mm-mobile-socials a:hover { color: var(--crimson-red); } body.page-home .mega-menu.open .mm-mobile-link { animation: mmLinkIn 0.4s cubic-bezier(0.22,1,0.36,1) both; } body.page-home .mm-mobile-nav a:nth-of-type(1) { animation-delay: 0.04s; } body.page-home .mm-mobile-nav a:nth-of-type(2) { animation-delay: 0.09s; } body.page-home .mm-mobile-nav a:nth-of-type(3) { animation-delay: 0.14s; } body.page-home .mm-mobile-nav a:nth-of-type(4) { animation-delay: 0.19s; } body.page-home .mm-mobile-nav a:nth-of-type(5) { animation-delay: 0.24s; } body.page-home .mm-mobile-nav a:nth-of-type(6) { animation-delay: 0.29s; } body.page-home .mm-mobile-nav a:nth-of-type(7) { animation-delay: 0.34s; } body.page-home .mm-mobile-nav a:nth-of-type(8) { animation-delay: 0.39s; } body.page-home .step { align-items: center; text-align: center; } } /* VIDEO REEL */ body.page-home .video-reel { background: var(--near-black); padding: clamp(40px, 5vw, 72px) 0; overflow: hidden; } body.page-home .video-reel-header { display: flex; align-items: flex-end; justify-content: space-between; padding: 0 clamp(20px, 4vw, 56px); margin-bottom: 32px; } body.page-home .video-reel-header h2 { font-family: var(--font-display); font-size: clamp(28px, 4vw, 52px); letter-spacing: 0.02em; line-height: 1; } body.page-home .video-reel-header .eyebrow { margin-bottom: 8px; } body.page-home .reel-track-outer { overflow: hidden; width: 100%; cursor: grab; } body.page-home .reel-track-outer:active { cursor: grabbing; } body.page-home .reel-track { display: flex; gap: clamp(12px, 1.5vw, 20px); width: max-content; will-change: transform; } body.page-home .reel-track.playing { animation: reel-scroll 32s linear infinite; } body.page-home .reel-track.playing:hover { animation-play-state: paused; } body.page-home .reel-card { width: clamp(220px, 22vw, 320px); aspect-ratio: 4/5; border-radius: 16px; overflow: hidden; flex-shrink: 0; background: #111; position: relative; } body.page-home .reel-card video { width: 100%; height: 100%; object-fit: cover; } body.page-home .reel-footer { display: flex; align-items: center; justify-content: space-between; padding: 24px clamp(20px, 4vw, 56px) 0; } body.page-home .reel-controls { display: flex; align-items: center; gap: 12px; } body.page-home .reel-pause-btn { background: none; border: 1px solid var(--border); color: var(--off-white); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 10px; transition: border-color 0.2s, color 0.2s; letter-spacing: 1px; } body.page-home .reel-pause-btn:hover { border-color: var(--amber-primary); color: var(--amber-primary); } body.page-home .reel-socials { display: flex; gap: 20px; align-items: center; } body.page-home .reel-socials a { color: var(--muted); transition: color 0.2s; display: flex; } body.page-home .reel-socials a:hover { color: var(--amber-primary); } @media (max-width: 640px) { body.page-home .diferenciais-grid { grid-template-columns: 1fr; } body.page-home .diferencial-item { border-right: none !important; } body.page-home .diferencial-item:last-child { border-bottom: none; } body.page-home .footer-grid { grid-template-columns: 1fr; } body.page-home .hero-actions { flex-direction: column; } body.page-home .hero-actions .btn-primary, body.page-home .hero-actions .btn-secondary { justify-content: center; } body.page-home .footer-bottom { flex-direction: column; text-align: center; } } /* ── IFOOD FLUTUANTE ── */ body.page-home .ifood-float { position: fixed; bottom: 24px; right: 24px; z-index: 9998; display: block; width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 0 10px rgba(220, 0, 0, 0.35), 0 4px 18px rgba(0,0,0,0.28); transition: transform 0.3s ease, box-shadow 0.3s ease; animation: ifood-glow 2.8s ease-in-out infinite; } body.page-home .ifood-float img { width: 100%; height: 100%; border-radius: 50%; display: block; } body.page-home .ifood-float:hover { transform: scale(1.1); box-shadow: 0 0 28px rgba(220, 0, 0, 0.65), 0 6px 24px rgba(0,0,0,0.35); animation: none; } /* ── LGPD BANNER ── */ body.page-home .lgpd-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: #1a1a1a; border-top: 1px solid #2A2A2A; padding: 16px clamp(20px, 4vw, 56px); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; box-shadow: 0 -4px 32px rgba(0,0,0,0.5); transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.22,1,0.36,1); } body.page-home .lgpd-banner.visible { transform: translateY(0); } body.page-home .lgpd-banner p { font-size: 13px; color: rgba(242,242,242,0.8); line-height: 1.5; flex: 1; min-width: 240px; } body.page-home .lgpd-banner p a { color: #F2A71B; text-decoration: underline; } body.page-home .lgpd-banner-actions { display: flex; gap: 12px; flex-shrink: 0; } body.page-home .lgpd-btn-accept { background: #F2A71B; color: #0D0D0D; border: none; border-radius: 100px; padding: 10px 24px; font-family: inherit; font-weight: 800; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: background 0.2s; } body.page-home .lgpd-btn-accept:hover { background: #FFB818; } @media (max-width: 480px) { body.page-home .lgpd-banner { flex-direction: column; align-items: flex-start; } body.page-home .lgpd-banner-actions { width: 100%; } body.page-home .lgpd-btn-accept { width: 100%; text-align: center; } } /* ============================================================ assets/css/style-quem-somos.css → body.page-quem-somos ============================================================ */ body.page-quem-somos video, body.page-quem-somos svg { display: block; max-width: 100%; } /* ─── UTILITIES ─── */ body.page-quem-somos .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); } body.page-quem-somos .section { padding: clamp(64px, 8vw, 120px) 0; } body.page-quem-somos .eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--amber-primary); } body.page-quem-somos .section-title { font-family: var(--font-display); font-size: clamp(42px, 6vw, 86px); line-height: 0.96; letter-spacing: 0.02em; } body.page-quem-somos .section-subtitle { max-width: 720px; color: rgba(242,242,242,0.74); font-size: clamp(15px, 1.5vw, 18px); line-height: 1.7; } body.page-quem-somos .btn-primary, body.page-quem-somos .btn-secondary, body.page-quem-somos .btn-dark { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 100px; font-weight: 800; font-size: 14px; letter-spacing: 0.03em; text-transform: uppercase; padding: 14px 32px; transition: transform 0.15s, background 0.2s, color 0.2s, border-color 0.2s; white-space: nowrap; cursor: pointer; } body.page-quem-somos .btn-primary { background: var(--amber-primary); color: var(--near-black); border: 0; } body.page-quem-somos .btn-primary:hover { background: var(--amber-light); transform: translateY(-2px); } body.page-quem-somos .btn-secondary { background: transparent; color: var(--off-white); border: 2px solid rgba(242,242,242,0.38); } body.page-quem-somos .btn-secondary:hover { border-color: var(--amber-primary); color: var(--amber-primary); transform: translateY(-2px); } body.page-quem-somos .btn-dark { background: var(--near-black); color: var(--off-white); border: 0; } body.page-quem-somos .btn-dark:hover { background: var(--dark-hover); transform: translateY(-2px); } /* ─── NAV ─── */ body.page-quem-somos .nav { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--nav-h); background: rgba(13,13,13,0.86); border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 10px clamp(20px, 4vw, 56px); transition: background 0.35s, backdrop-filter 0.35s, border-color 0.35s, box-shadow 0.35s; } body.page-quem-somos .nav.scrolled { background: rgba(13,13,13,0.72); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border-bottom-color: rgba(255,255,255,0.07); box-shadow: 0 4px 32px rgba(0,0,0,0.45); } body.page-quem-somos .nav-logo { display: flex; justify-content: center; } body.page-quem-somos .nav-logo img { height: 120px; width: 120px; object-fit: contain; } body.page-quem-somos .nav-right { display: flex; justify-content: flex-end; } body.page-quem-somos .nav-cta { background: var(--amber-primary); color: var(--near-black); font-weight: 800; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; padding: 10px 24px; border-radius: 100px; transition: background 0.2s, transform 0.15s; } body.page-quem-somos .nav-cta:hover { background: var(--amber-light); transform: translateY(-1px); } body.page-quem-somos .nav-burger { width: 36px; display: flex; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; } body.page-quem-somos .nav-burger span { display: block; width: 24px; height: 2px; background: var(--off-white); border-radius: 2px; } /* ─── MEGA MENU ─── */ body.page-quem-somos .mm-overlay { position: fixed; inset: 0; z-index: 190; background: rgba(0,0,0,0); pointer-events: none; transition: background 0.4s; } body.page-quem-somos .mm-overlay.open { background: rgba(0,0,0,0.55); pointer-events: all; } body.page-quem-somos .mega-menu { position: fixed; inset: 0 0 auto; z-index: 200; background: var(--off-white); display: flex; flex-direction: column; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: transform 0.42s cubic-bezier(0.22,1,0.36,1), opacity 0.3s; max-height: 86vh; overflow-y: auto; box-shadow: 0 24px 64px rgba(0,0,0,0.35); } body.page-quem-somos .mega-menu.open { transform: translateY(0); opacity: 1; pointer-events: all; } body.page-quem-somos .mega-menu-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 clamp(20px, 4vw, 56px); height: var(--nav-h); border-bottom: 1px solid var(--menu-border); flex-shrink: 0; } body.page-quem-somos .mm-left { display: flex; align-items: center; gap: 32px; } body.page-quem-somos .mm-logo { justify-self: center; } body.page-quem-somos .mm-logo img { height: 90px; width: 90px; object-fit: contain; } body.page-quem-somos .mm-right { justify-self: end; } body.page-quem-somos .mm-top-links { display: flex; gap: 32px; list-style: none; } body.page-quem-somos .mm-top-links a { font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--near-black); transition: color 0.2s; } body.page-quem-somos .mm-top-links a:hover { color: var(--crimson-red); } body.page-quem-somos .mm-close { background: none; border: none; cursor: pointer; color: var(--near-black); font-size: 28px; line-height: 1; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transition: color 0.2s, transform 0.2s; } body.page-quem-somos .mm-close:hover { color: var(--crimson-red); transform: rotate(90deg); } body.page-quem-somos .mega-menu-cta { background: var(--crimson-red); color: var(--off-white); font-weight: 800; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; padding: 10px 24px; border-radius: 100px; transition: background 0.2s; } body.page-quem-somos .mega-menu-cta:hover { background: #8B1111; } body.page-quem-somos .mega-menu-body { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: clamp(32px, 5vw, 60px) clamp(20px, 4vw, 56px); } body.page-quem-somos .mm-col { display: flex; flex-direction: column; gap: 8px; } body.page-quem-somos .mm-col-title { font-family: var(--font-mm); font-size: clamp(32px, 4vw, 58px); font-weight: 900; color: var(--crimson-red); letter-spacing: 0.01em; line-height: 1.1; text-transform: uppercase; transition: color 0.15s; } body.page-quem-somos .mm-col-title:hover { color: var(--amber-primary); } body.page-quem-somos .mega-menu.open .mm-col-title { animation: mmLinkIn 0.5s cubic-bezier(0.22,1,0.36,1) both; } body.page-quem-somos .mm-col:nth-child(1) .mm-col-title:nth-child(1) { animation-delay: 0.05s; } body.page-quem-somos .mm-col:nth-child(1) .mm-col-title:nth-child(2) { animation-delay: 0.10s; } body.page-quem-somos .mm-col:nth-child(1) .mm-col-title:nth-child(3) { animation-delay: 0.15s; } body.page-quem-somos .mm-col:nth-child(1) .mm-col-title:nth-child(4) { animation-delay: 0.20s; } body.page-quem-somos .mm-col:nth-child(2) .mm-col-title:nth-child(1) { animation-delay: 0.08s; } body.page-quem-somos .mm-col:nth-child(2) .mm-col-title:nth-child(2) { animation-delay: 0.13s; } body.page-quem-somos .mm-col:nth-child(2) .mm-col-title:nth-child(3) { animation-delay: 0.18s; } body.page-quem-somos .mm-col:nth-child(2) .mm-col-title:nth-child(4) { animation-delay: 0.23s; } body.page-quem-somos .mm-col:nth-child(3) .mm-col-title { animation-delay: 0.12s; } body.page-quem-somos .mm-ig-video { margin-top: 20px; width: 100%; max-width: 220px; aspect-ratio: 1/1; border-radius: 12px; overflow: hidden; background: var(--menu-border); } body.page-quem-somos .mm-ig-video video { width: 100%; height: 100%; object-fit: cover; display: block; } body.page-quem-somos .mega-menu.open .mm-ig-video { animation: mmLinkIn 0.5s cubic-bezier(0.22,1,0.36,1) 0.22s both; } body.page-quem-somos .mm-mobile-body { display: none; } body.page-quem-somos .mega-menu-footer { display: flex; align-items: center; justify-content: space-between; padding: 20px clamp(20px, 4vw, 56px); border-top: 1px solid var(--menu-border); flex-shrink: 0; } body.page-quem-somos .mm-socials { display: flex; gap: 24px; align-items: center; } body.page-quem-somos .mm-socials a { color: var(--near-black); transition: color 0.2s; } body.page-quem-somos .mm-socials a:hover { color: var(--crimson-red); } body.page-quem-somos .mm-footer-links { display: flex; gap: 40px; } body.page-quem-somos .mm-footer-links a { font-size: 13px; font-weight: 700; color: var(--near-black); transition: color 0.2s; } body.page-quem-somos .mm-footer-links a:hover { color: var(--crimson-red); } /* ─── HERO ─── */ body.page-quem-somos .qs-hero { min-height: 82svh; padding-top: var(--nav-h); display: grid; align-items: end; position: relative; overflow: hidden; background: var(--near-black); } body.page-quem-somos .qs-hero-media { position: absolute; inset: 0; z-index: 0; } body.page-quem-somos .qs-hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.68; } body.page-quem-somos .qs-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(13,13,13,0.94), rgba(13,13,13,0.72) 45%, rgba(13,13,13,0.18)); } body.page-quem-somos .qs-hero-content { position: relative; z-index: 1; padding: clamp(72px, 10vw, 140px) 0; max-width: 860px; } body.page-quem-somos .qs-hero h1 { font-family: var(--font-display); font-size: clamp(64px, 10vw, 148px); line-height: 0.9; letter-spacing: 0.02em; margin: 14px 0 24px; } body.page-quem-somos .qs-hero h1 span { color: var(--amber-primary); } body.page-quem-somos .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 38px; } /* ─── NOSSA HISTÓRIA (CLEAN) ─── */ body.page-quem-somos .historia { background: var(--off-white); color: var(--near-black); border-bottom: 1px solid rgba(13,13,13,0.08); } body.page-quem-somos .historia-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 6vw, 96px); align-items: center; } body.page-quem-somos .historia-text { display: flex; flex-direction: column; gap: 20px; } body.page-quem-somos .historia-text .section-title { color: var(--near-black); } body.page-quem-somos .historia-text .eyebrow { color: var(--deep-orange); } body.page-quem-somos .historia-text p { color: rgba(13,13,13,0.72); font-size: clamp(15px, 1.5vw, 17px); line-height: 1.75; } body.page-quem-somos .historia-quote { border-left: 3px solid var(--amber-primary); padding-left: 24px; font-family: var(--font-display); font-size: clamp(22px, 2.5vw, 36px); line-height: 1.1; letter-spacing: 0.02em; color: var(--near-black); margin-top: 4px; } body.page-quem-somos .historia-media { aspect-ratio: 4/5; border-radius: 18px; overflow: hidden; border: 1px solid rgba(13,13,13,0.12); background: #e5e5e5; } body.page-quem-somos .historia-media img { width: 100%; height: 100%; object-fit: cover; } /* ─── TRAJETÓRIA (DARK/SURFACE) ─── */ body.page-quem-somos .trajetoria { background: #A21916; border-block: none; } body.page-quem-somos .trajetoria-head { margin-bottom: clamp(48px, 7vw, 80px); } body.page-quem-somos .trajetoria-head .section-title { color: var(--off-white); margin-top: 10px; } /* Timeline */ body.page-quem-somos .tl-wrap { position: relative; } body.page-quem-somos .tl-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,0.25); transform: translateX(-50%); z-index: 0; } body.page-quem-somos .tl-item { display: grid; grid-template-columns: minmax(0,1fr) 48px minmax(0,1fr); align-items: start; margin-bottom: clamp(48px, 6vw, 68px); position: relative; z-index: 1; } body.page-quem-somos .tl-item:last-child { margin-bottom: 0; } body.page-quem-somos .tl-node { display: flex; justify-content: center; padding-top: 14px; } body.page-quem-somos .tl-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--amber-primary); border: 3px solid #A21916; box-shadow: 0 0 0 3px rgba(242,167,27,0.35); flex-shrink: 0; } body.page-quem-somos .tl-card { background: var(--near-black); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; overflow: hidden; transition: border-color 0.25s, transform 0.25s; } body.page-quem-somos .tl-card:hover { border-color: var(--amber-primary); transform: translateY(-3px); } body.page-quem-somos .tl-card-img { aspect-ratio: 16/10; overflow: hidden; background: rgba(0,0,0,0.3); } body.page-quem-somos .tl-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; } body.page-quem-somos .tl-card:hover .tl-card-img img { transform: scale(1.04); } body.page-quem-somos .tl-card-body { padding: clamp(20px, 2.5vw, 28px); } body.page-quem-somos .tl-card h3 { font-family: var(--font-display); font-size: clamp(22px, 2.5vw, 32px); letter-spacing: 0.02em; line-height: 1.05; color: var(--off-white); margin-bottom: 8px; } body.page-quem-somos .tl-card p { color: rgba(242,242,242,0.65); font-size: 15px; line-height: 1.65; } /* odd: card esquerda, spacer direita */ body.page-quem-somos .tl-item.tl-left .tl-card { grid-column: 1; grid-row: 1; margin-right: 32px; } body.page-quem-somos .tl-item.tl-left .tl-node { grid-column: 2; grid-row: 1; } body.page-quem-somos .tl-item.tl-left .tl-spacer { grid-column: 3; grid-row: 1; } /* even: spacer esquerda, card direita */ body.page-quem-somos .tl-item.tl-right .tl-spacer { grid-column: 1; grid-row: 1; } body.page-quem-somos .tl-item.tl-right .tl-node { grid-column: 2; grid-row: 1; } body.page-quem-somos .tl-item.tl-right .tl-card { grid-column: 3; grid-row: 1; margin-left: 32px; } /* ─── QUALIDADE (CLEAN) ─── */ body.page-quem-somos .qualidade { background: var(--off-white); color: var(--near-black); border-bottom: 1px solid rgba(13,13,13,0.08); } body.page-quem-somos .qualidade-head { margin-bottom: clamp(36px, 5vw, 60px); } body.page-quem-somos .qualidade-head .section-title { color: var(--near-black); margin: 10px 0 16px; } body.page-quem-somos .qualidade-head .eyebrow { color: var(--deep-orange); } body.page-quem-somos .qualidade-head .section-subtitle { color: rgba(13,13,13,0.68); } body.page-quem-somos .qual-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(16px, 2vw, 24px); } body.page-quem-somos .qual-card { background: #fff; border: 1px solid rgba(13,13,13,0.10); border-radius: 16px; overflow: hidden; transition: border-color 0.2s, transform 0.25s; } body.page-quem-somos .qual-card:hover { border-color: var(--amber-primary); transform: translateY(-3px); } body.page-quem-somos .qual-card-img { aspect-ratio: 4/3; overflow: hidden; background: #e5e5e5; } body.page-quem-somos .qual-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; } body.page-quem-somos .qual-card:hover .qual-card-img img { transform: scale(1.04); } body.page-quem-somos .qual-card-body { padding: 20px 22px 24px; } body.page-quem-somos .qual-card h3 { font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 28px); letter-spacing: 0.02em; line-height: 1.05; color: var(--near-black); margin-bottom: 8px; } body.page-quem-somos .qual-card p { color: rgba(13,13,13,0.66); font-size: 14px; line-height: 1.65; } /* ─── POSICIONAMENTO ─── */ body.page-quem-somos .posicionamento { background: #A21916; border-top: none; } body.page-quem-somos .posicionamento-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; } body.page-quem-somos .posicionamento-text { display: flex; flex-direction: column; gap: 22px; } body.page-quem-somos .posicionamento-text .section-title { color: var(--off-white); } body.page-quem-somos .posicionamento-text p { color: rgba(255,255,255,0.80); font-size: clamp(15px, 1.5vw, 17px); line-height: 1.75; } body.page-quem-somos .posicionamento-media { aspect-ratio: 4/5; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.2); } body.page-quem-somos .posicionamento-media img { width: 100%; height: 100%; object-fit: cover; } /* ─── TARJA FINAL ─── */ body.page-quem-somos .final-strip { background: var(--amber-primary); color: var(--near-black); padding: clamp(56px, 8vw, 100px) 0; } body.page-quem-somos .final-strip-inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 720px; margin: 0 auto; } body.page-quem-somos .final-strip h2 { font-family: var(--font-display); font-size: clamp(48px, 7vw, 96px); line-height: 0.92; letter-spacing: 0.02em; } body.page-quem-somos .final-strip p { font-size: clamp(16px, 1.6vw, 20px); font-weight: 700; color: rgba(13,13,13,0.78); line-height: 1.6; } /* ─── FOOTER ─── */ body.page-quem-somos .footer { background: var(--footer-bg); border-top: 1px solid var(--border); padding: clamp(48px, 6vw, 96px) 0 clamp(24px, 3vw, 40px); } body.page-quem-somos .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.5fr; gap: clamp(32px, 4vw, 64px); margin-bottom: clamp(40px, 5vw, 72px); } body.page-quem-somos .footer-col h5 { font-family: var(--font-body); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber-primary); margin-bottom: 24px; } body.page-quem-somos .footer-logo { margin-bottom: 10px; } body.page-quem-somos .footer-logo img { height: 80px; width: auto; } body.page-quem-somos .footer-col p { font-size: 14px; color: var(--muted); line-height: 1.7; } body.page-quem-somos .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; } body.page-quem-somos .footer-col ul li a { font-size: 14px; color: var(--muted); transition: color 0.2s; } body.page-quem-somos .footer-col ul li a:hover { color: var(--amber-primary); } body.page-quem-somos .footer-social-links { display: flex; flex-direction: column; gap: 12px; } body.page-quem-somos .footer-social-link { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); transition: color 0.2s; } body.page-quem-somos .footer-social-link:hover { color: var(--amber-primary); } body.page-quem-somos .footer-ifood-links { display: flex; flex-direction: column; gap: 8px; } body.page-quem-somos .footer-ifood-link { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-size: 13px; font-weight: 700; color: var(--off-white); transition: border-color 0.2s, background 0.2s; } body.page-quem-somos .footer-ifood-link:hover { border-color: var(--amber-primary); background: rgba(242,167,27,0.08); } body.page-quem-somos .footer-ifood-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber-primary); flex-shrink: 0; } body.page-quem-somos .footer-bottom { border-top: 1px solid var(--border); padding-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } body.page-quem-somos .footer-bottom p { font-size: 12px; color: #555; } body.page-quem-somos .footer-bottom img { height: 48px; width: auto; } /* ─── RESPONSIVE ─── */ @media (max-width: 1024px) { body.page-quem-somos .footer-grid { grid-template-columns: 1fr 1fr; } body.page-quem-somos .qual-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } body.page-quem-somos .mega-menu-body { grid-template-columns: 1fr 1fr; } body.page-quem-somos .mm-col:nth-child(3) { display: none; } } @media (max-width: 920px) { body.page-quem-somos .historia-grid, body.page-quem-somos .posicionamento-inner { grid-template-columns: 1fr; } body.page-quem-somos .historia-media, body.page-quem-somos .posicionamento-media { aspect-ratio: 16/10; order: -1; } /* Timeline: virar left-aligned */ body.page-quem-somos .tl-line { left: 7px; transform: none; } body.page-quem-somos .tl-item { grid-template-columns: 40px 1fr; } body.page-quem-somos .tl-item.tl-left .tl-card, body.page-quem-somos .tl-item.tl-right .tl-card { grid-column: 2; grid-row: 1; margin-left: 0; margin-right: 0; } body.page-quem-somos .tl-item.tl-left .tl-node, body.page-quem-somos .tl-item.tl-right .tl-node { grid-column: 1; grid-row: 1; } body.page-quem-somos .tl-item.tl-left .tl-spacer, body.page-quem-somos .tl-item.tl-right .tl-spacer { display: none; } } @media (max-width: 768px) { /* Mega menu – mobile full-screen */ body.page-quem-somos .mega-menu { height: 100dvh; max-height: 100dvh; overflow-y: auto; } body.page-quem-somos .mega-menu-body { display: none; } body.page-quem-somos .mega-menu-footer { display: none; } body.page-quem-somos .mm-top-links { display: none; } body.page-quem-somos .mm-left { gap: 0; } body.page-quem-somos .mega-menu-cta { font-size: 11px; padding: 8px 14px; } :root { --nav-h: 80px; } body.page-quem-somos .mega-menu-header { height: 72px; } body.page-quem-somos .mm-logo img { height: 46px; width: 46px; } body.page-quem-somos .nav { padding-block: 0; } body.page-quem-somos .nav-logo img { height: 68px; width: 68px; } body.page-quem-somos .nav-right .nav-cta { display: none; } body.page-quem-somos .mm-mobile-body { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 24px 28px 32px; justify-content: space-between; } body.page-quem-somos .mm-mobile-nav { display: flex; flex-direction: column; } body.page-quem-somos .mm-mobile-link { font-family: var(--font-mm); font-size: clamp(34px, 9vw, 48px); font-weight: 900; letter-spacing: 0.01em; text-transform: uppercase; color: var(--crimson-red); display: block; padding: 9px 0; border-bottom: 1px solid rgba(13,13,13,0.1); transition: color 0.15s ease, padding-left 0.2s ease; line-height: 1.1; } body.page-quem-somos .mm-mobile-link:hover { color: var(--amber-primary); padding-left: 10px; } body.page-quem-somos .mm-mobile-sep { display: block; height: 2px; background: rgba(13,13,13,0.12); margin: 10px 0; border-radius: 2px; } body.page-quem-somos .mm-mobile-footer { display: flex; flex-direction: column; gap: 16px; padding-top: 20px; } body.page-quem-somos .mm-mobile-cta { display: block; text-align: center; background: var(--crimson-red); color: #fff; font-family: var(--font-body); font-weight: 800; font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; padding: 14px 24px; border-radius: 100px; transition: background 0.2s; } body.page-quem-somos .mm-mobile-cta:hover { background: #8B1111; } body.page-quem-somos .mm-mobile-socials { display: flex; gap: 24px; justify-content: center; align-items: center; } body.page-quem-somos .mm-mobile-socials a { color: var(--near-black); transition: color 0.2s; } body.page-quem-somos .mm-mobile-socials a:hover { color: var(--crimson-red); } body.page-quem-somos .mega-menu.open .mm-mobile-link { animation: mmLinkIn 0.4s cubic-bezier(0.22,1,0.36,1) both; } body.page-quem-somos .mm-mobile-nav a:nth-of-type(1) { animation-delay: 0.04s; } body.page-quem-somos .mm-mobile-nav a:nth-of-type(2) { animation-delay: 0.09s; } body.page-quem-somos .mm-mobile-nav a:nth-of-type(3) { animation-delay: 0.14s; } body.page-quem-somos .mm-mobile-nav a:nth-of-type(4) { animation-delay: 0.19s; } body.page-quem-somos .mm-mobile-nav a:nth-of-type(5) { animation-delay: 0.24s; } body.page-quem-somos .mm-mobile-nav a:nth-of-type(6) { animation-delay: 0.29s; } body.page-quem-somos .mm-mobile-nav a:nth-of-type(7) { animation-delay: 0.34s; } body.page-quem-somos .mm-mobile-nav a:nth-of-type(8) { animation-delay: 0.39s; } } @media (max-width: 640px) { body.page-quem-somos .nav-right .nav-cta { display: none; } body.page-quem-somos .qs-hero { min-height: 76svh; } body.page-quem-somos .hero-actions { flex-direction: column; } body.page-quem-somos .btn-primary, body.page-quem-somos .btn-secondary, body.page-quem-somos .btn-dark { width: 100%; } body.page-quem-somos .qual-grid, body.page-quem-somos .footer-grid { grid-template-columns: 1fr; } body.page-quem-somos .footer-bottom { flex-direction: column; text-align: center; } } /* ── IFOOD FLUTUANTE ── */ body.page-quem-somos .ifood-float { position: fixed; bottom: 24px; right: 24px; z-index: 9998; display: block; width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 0 10px rgba(220, 0, 0, 0.35), 0 4px 18px rgba(0,0,0,0.28); transition: transform 0.3s ease, box-shadow 0.3s ease; animation: ifood-glow 2.8s ease-in-out infinite; } body.page-quem-somos .ifood-float img { width: 100%; height: 100%; border-radius: 50%; display: block; } body.page-quem-somos .ifood-float:hover { transform: scale(1.1); box-shadow: 0 0 28px rgba(220, 0, 0, 0.65), 0 6px 24px rgba(0,0,0,0.35); animation: none; } /* ── LGPD BANNER ── */ body.page-quem-somos .lgpd-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: #1a1a1a; border-top: 1px solid #2A2A2A; padding: 16px clamp(20px, 4vw, 56px); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; box-shadow: 0 -4px 32px rgba(0,0,0,0.5); transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.22,1,0.36,1); } body.page-quem-somos .lgpd-banner.visible { transform: translateY(0); } body.page-quem-somos .lgpd-banner p { font-size: 13px; color: rgba(242,242,242,0.8); line-height: 1.5; flex: 1; min-width: 240px; } body.page-quem-somos .lgpd-banner p a { color: #F2A71B; text-decoration: underline; } body.page-quem-somos .lgpd-banner-actions { display: flex; gap: 12px; flex-shrink: 0; } body.page-quem-somos .lgpd-btn-accept { background: #F2A71B; color: #0D0D0D; border: none; border-radius: 100px; padding: 10px 24px; font-family: inherit; font-weight: 800; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: background 0.2s; } body.page-quem-somos .lgpd-btn-accept:hover { background: #FFB818; } @media (max-width: 480px) { body.page-quem-somos .lgpd-banner { flex-direction: column; align-items: flex-start; } body.page-quem-somos .lgpd-banner-actions { width: 100%; } body.page-quem-somos .lgpd-btn-accept { width: 100%; text-align: center; } } /* ── CUSTOM SCROLLBAR ── */ /* ============================================================ assets/css/style-cardapio.css → body.page-cardapio ============================================================ */ body.page-cardapio video, body.page-cardapio svg { display: block; max-width: 100%; } body.page-cardapio .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); } body.page-cardapio .section { padding: clamp(64px, 8vw, 120px) 0; } body.page-cardapio .eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--amber-primary); } body.page-cardapio .section-title { font-family: var(--font-display); font-size: clamp(42px, 6vw, 86px); line-height: 0.96; letter-spacing: 0.02em; } body.page-cardapio .section-subtitle { max-width: 640px; color: rgba(242,242,242,0.74); font-size: clamp(15px, 1.5vw, 18px); line-height: 1.7; } body.page-cardapio .btn-primary, body.page-cardapio .btn-secondary, body.page-cardapio .btn-dark { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 100px; font-weight: 800; font-size: 14px; letter-spacing: 0.03em; text-transform: uppercase; padding: 14px 32px; transition: transform 0.15s, background 0.2s, color 0.2s, border-color 0.2s; white-space: nowrap; cursor: pointer; } body.page-cardapio .btn-primary { background: var(--amber-primary); color: var(--near-black); border: 0; } body.page-cardapio .btn-primary:hover { background: var(--amber-light); transform: translateY(-2px); } body.page-cardapio .btn-secondary { background: transparent; color: var(--off-white); border: 2px solid rgba(242,242,242,0.38); } body.page-cardapio .btn-secondary:hover { border-color: var(--amber-primary); color: var(--amber-primary); transform: translateY(-2px); } body.page-cardapio .btn-dark { background: var(--near-black); color: var(--off-white); border: 0; } body.page-cardapio .btn-dark:hover { background: var(--dark-hover); transform: translateY(-2px); } body.page-cardapio .nav { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--nav-h); background: rgba(13,13,13,0.86); border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 10px clamp(20px, 4vw, 56px); transition: background 0.35s, backdrop-filter 0.35s, border-color 0.35s, box-shadow 0.35s; } body.page-cardapio .nav.scrolled { background: rgba(13,13,13,0.72); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border-bottom-color: rgba(255,255,255,0.07); box-shadow: 0 4px 32px rgba(0,0,0,0.45); } body.page-cardapio .nav-logo { display: flex; justify-content: center; } body.page-cardapio .nav-logo img { height: 120px; width: 120px; object-fit: contain; } body.page-cardapio .nav-right { display: flex; justify-content: flex-end; } body.page-cardapio .nav-cta { background: var(--amber-primary); color: var(--near-black); font-weight: 800; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; padding: 10px 24px; border-radius: 100px; transition: background 0.2s, transform 0.15s; } body.page-cardapio .nav-cta:hover { background: var(--amber-light); transform: translateY(-1px); } body.page-cardapio .nav-burger { width: 36px; display: flex; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; } body.page-cardapio .nav-burger span { display: block; width: 24px; height: 2px; background: var(--off-white); border-radius: 2px; } body.page-cardapio .mm-overlay { position: fixed; inset: 0; z-index: 190; background: rgba(0,0,0,0); pointer-events: none; transition: background 0.4s; } body.page-cardapio .mm-overlay.open { background: rgba(0,0,0,0.55); pointer-events: all; } body.page-cardapio .mega-menu { position: fixed; inset: 0 0 auto; z-index: 200; background: var(--off-white); display: flex; flex-direction: column; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: transform 0.42s cubic-bezier(0.22,1,0.36,1), opacity 0.3s; max-height: 86vh; overflow-y: auto; box-shadow: 0 24px 64px rgba(0,0,0,0.35); } body.page-cardapio .mega-menu.open { transform: translateY(0); opacity: 1; pointer-events: all; } body.page-cardapio .mega-menu-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 clamp(20px, 4vw, 56px); height: var(--nav-h); border-bottom: 1px solid var(--menu-border); flex-shrink: 0; } body.page-cardapio .mm-left { display: flex; align-items: center; gap: 32px; } body.page-cardapio .mm-logo { justify-self: center; } body.page-cardapio .mm-logo img { height: 90px; width: 90px; object-fit: contain; } body.page-cardapio .mm-right { justify-self: end; } body.page-cardapio .mm-top-links { display: flex; gap: 32px; list-style: none; } body.page-cardapio .mm-top-links a { font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--near-black); transition: color 0.2s; } body.page-cardapio .mm-top-links a:hover { color: var(--crimson-red); } body.page-cardapio .mm-close { background: none; border: none; cursor: pointer; color: var(--near-black); font-size: 28px; line-height: 1; width: 40px; height: 40px; transition: color 0.2s, transform 0.2s; } body.page-cardapio .mm-close:hover { color: var(--crimson-red); transform: rotate(90deg); } body.page-cardapio .mega-menu-cta { background: var(--crimson-red); color: var(--off-white); font-weight: 800; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; padding: 10px 24px; border-radius: 100px; } body.page-cardapio .mega-menu-body { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; padding: clamp(32px, 5vw, 60px) clamp(20px, 4vw, 56px); } body.page-cardapio .mm-col { display: flex; flex-direction: column; gap: 8px; } body.page-cardapio .mm-col-title { font-family: var(--font-mm); font-size: clamp(32px, 4vw, 58px); font-weight: 900; color: var(--crimson-red); letter-spacing: 0.01em; line-height: 1.1; text-transform: uppercase; transition: color 0.15s; } body.page-cardapio .mm-col-title:hover { color: var(--amber-primary); } body.page-cardapio .mm-ig-video { margin-top: 20px; width: 100%; max-width: 220px; aspect-ratio: 1/1; border-radius: 12px; overflow: hidden; background: var(--menu-border); } body.page-cardapio .mm-ig-video video { width: 100%; height: 100%; object-fit: cover; } body.page-cardapio .mm-mobile-body { display: none; } body.page-cardapio .mega-menu-footer { display: flex; align-items: center; justify-content: space-between; padding: 20px clamp(20px, 4vw, 56px); border-top: 1px solid var(--menu-border); } body.page-cardapio .mm-socials, body.page-cardapio .mm-footer-links { display: flex; gap: 24px; align-items: center; } body.page-cardapio .mm-socials a, body.page-cardapio .mm-footer-links a { color: var(--near-black); } body.page-cardapio .mm-footer-links a { font-size: 13px; font-weight: 700; } body.page-cardapio .menu-hero { min-height: 82svh; padding-top: var(--nav-h); display: grid; align-items: end; position: relative; overflow: hidden; background: var(--near-black); } body.page-cardapio .menu-hero-media { position: absolute; inset: 0; z-index: 0; } body.page-cardapio .menu-hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.72; } body.page-cardapio .menu-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(13,13,13,0.94), rgba(13,13,13,0.72) 45%, rgba(13,13,13,0.16)); } body.page-cardapio .menu-hero-content { position: relative; z-index: 1; padding: clamp(72px, 10vw, 140px) 0; max-width: 840px; } body.page-cardapio .menu-hero h1 { font-family: var(--font-display); font-size: clamp(64px, 10vw, 148px); line-height: 0.9; letter-spacing: 0.02em; margin: 14px 0 24px; } body.page-cardapio .menu-hero h1 span { color: var(--amber-primary); } body.page-cardapio .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 38px; } body.page-cardapio .category-strip { background: var(--surface); border-block: 1px solid var(--border); position: sticky; top: var(--nav-h); z-index: 80; } body.page-cardapio .category-inner { display: flex; gap: 12px; padding-block: 14px; overflow-x: auto; scrollbar-width: none; } body.page-cardapio .category-inner::-webkit-scrollbar { display: none; } body.page-cardapio .category-tab { flex: 0 0 auto; border: 1px solid var(--border); background: var(--near-black); color: var(--off-white); border-radius: 100px; padding: 10px 18px; font-weight: 800; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s; } body.page-cardapio .category-tab.active, body.page-cardapio .category-tab:hover { background: var(--amber-primary); border-color: var(--amber-primary); color: var(--near-black); } body.page-cardapio .intro-band { background: #A21916; border-bottom: none; } body.page-cardapio .intro-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(36px, 6vw, 96px); align-items: center; } body.page-cardapio .intro-copy { display: flex; flex-direction: column; gap: 22px; } body.page-cardapio .intro-note { border-left: 3px solid var(--amber-primary); padding-left: 24px; font-family: var(--font-display); font-size: clamp(24px, 3vw, 42px); line-height: 1.05; letter-spacing: 0.02em; color: var(--off-white); } body.page-cardapio .intro-media { aspect-ratio: 4/5; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.2); } body.page-cardapio .intro-media img { width: 100%; height: 100%; object-fit: cover; } body.page-cardapio .menu-section { background: var(--near-black); } body.page-cardapio .menu-section.clean { background: var(--off-white); color: var(--near-black); } body.page-cardapio .menu-section.clean .section-subtitle, body.page-cardapio .menu-section.clean .dish-card p { color: rgba(13,13,13,0.68); } body.page-cardapio .menu-section.clean .dish-card { background: var(--off-white); border-color: rgba(13,13,13,0.12); } body.page-cardapio .menu-section.clean .dish-card:hover { border-color: var(--amber-primary); } body.page-cardapio .menu-section.alt { background: #A21916; border-block: none; } body.page-cardapio .section-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: clamp(36px, 5vw, 64px); } body.page-cardapio .dish-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); } body.page-cardapio .dish-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; min-height: 100%; transition: transform 0.25s, border-color 0.25s; } body.page-cardapio .alt .dish-card { background: var(--near-black); border-color: rgba(255,255,255,0.12); } body.page-cardapio .alt .dish-tag { color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.2); } body.page-cardapio .dish-card:hover { transform: translateY(-4px); border-color: var(--amber-primary); } body.page-cardapio .dish-img { aspect-ratio: 4/3; overflow: hidden; background: var(--surface-2); } body.page-cardapio .dish-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; } body.page-cardapio .dish-card:hover .dish-img img { transform: scale(1.045); } body.page-cardapio .dish-body { padding: clamp(22px, 2.6vw, 34px); display: flex; flex-direction: column; gap: 14px; flex: 1; } body.page-cardapio .dish-kicker { color: var(--amber-primary); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } body.page-cardapio .dish-card h3 { font-family: var(--font-display); font-size: clamp(28px, 3vw, 42px); line-height: 1; letter-spacing: 0.02em; } body.page-cardapio .dish-card p { color: rgba(242,242,242,0.72); font-size: 15px; line-height: 1.65; } body.page-cardapio .dish-cta { margin-top: auto; padding-top: 12px; } body.page-cardapio .dish-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; } body.page-cardapio .dish-tag { color: var(--muted); border: 1px solid var(--border); border-radius: 100px; padding: 5px 10px; font-size: 12px; font-weight: 700; } body.page-cardapio .delivery-panel { background: var(--off-white); color: var(--near-black); overflow: hidden; } body.page-cardapio .delivery-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.72fr); gap: clamp(36px, 7vw, 112px); align-items: center; } body.page-cardapio .delivery-copy { max-width: 620px; } body.page-cardapio .delivery-panel .eyebrow { color: var(--deep-orange); } body.page-cardapio .delivery-panel .section-title { max-width: 720px; } body.page-cardapio .delivery-panel .section-subtitle { color: rgba(13,13,13,0.68); } body.page-cardapio .delivery-points { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 34px; border-top: 1px solid rgba(13,13,13,0.14); } body.page-cardapio .delivery-point { display: grid; grid-template-columns: 150px 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid rgba(13,13,13,0.14); } body.page-cardapio .delivery-point strong { display: block; font-family: var(--font-display); font-size: 24px; line-height: 1; letter-spacing: 0.02em; color: var(--near-black); } body.page-cardapio .delivery-point span { color: rgba(13,13,13,0.66); font-size: 15px; } body.page-cardapio .delivery-video { aspect-ratio: 4/5; border-radius: 16px; overflow: hidden; border: 1px solid rgba(13,13,13,0.12); background: var(--near-black); box-shadow: 0 18px 50px rgba(13,13,13,0.16); } body.page-cardapio .delivery-video video { width: 100%; height: 100%; object-fit: cover; } body.page-cardapio .units { background: var(--near-black); } body.page-cardapio .unit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 34px; } body.page-cardapio .unit-link { display: flex; align-items: center; justify-content: space-between; gap: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; transition: border-color 0.2s, background 0.2s, transform 0.15s; } body.page-cardapio .unit-link:hover { border-color: var(--amber-primary); background: rgba(242,167,27,0.08); transform: translateY(-2px); } body.page-cardapio .unit-link strong { font-size: 15px; } body.page-cardapio .unit-link span { color: var(--muted); font-size: 13px; } body.page-cardapio .unit-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--amber-primary); flex: 0 0 auto; } body.page-cardapio .final-strip { background: var(--amber-primary); color: var(--near-black); padding: clamp(56px, 8vw, 100px) 0; } body.page-cardapio .final-strip-inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 720px; margin: 0 auto; } body.page-cardapio .final-strip h2 { font-family: var(--font-display); font-size: clamp(48px, 7vw, 96px); line-height: 0.92; letter-spacing: 0.02em; } body.page-cardapio .final-strip p { font-size: clamp(16px, 1.6vw, 20px); font-weight: 700; color: rgba(13,13,13,0.78); line-height: 1.6; } body.page-cardapio .footer { background: var(--footer-bg); border-top: 1px solid var(--border); padding: clamp(48px, 6vw, 96px) 0 clamp(24px, 3vw, 40px); } body.page-cardapio .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.5fr; gap: clamp(32px, 4vw, 64px); margin-bottom: clamp(40px, 5vw, 72px); } body.page-cardapio .footer-col h5 { font-family: var(--font-body); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber-primary); margin-bottom: 24px; } body.page-cardapio .footer-logo { margin-bottom: 10px; } body.page-cardapio .footer-logo img { height: 80px; width: auto; } body.page-cardapio .footer-col p { font-size: 14px; color: var(--muted); line-height: 1.7; } body.page-cardapio .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; } body.page-cardapio .footer-col ul li a { font-size: 14px; color: var(--muted); transition: color 0.2s; } body.page-cardapio .footer-col ul li a:hover { color: var(--amber-primary); } body.page-cardapio .footer-social-links { display: flex; flex-direction: column; gap: 12px; } body.page-cardapio .footer-social-link { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); transition: color 0.2s; } body.page-cardapio .footer-social-link:hover { color: var(--amber-primary); } body.page-cardapio .footer-ifood-links { display: flex; flex-direction: column; gap: 8px; } body.page-cardapio .footer-ifood-link { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-size: 13px; font-weight: 700; color: var(--off-white); transition: border-color 0.2s, background 0.2s; } body.page-cardapio .footer-ifood-link:hover { border-color: var(--amber-primary); background: rgba(242,167,27,0.08); } body.page-cardapio .footer-ifood-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber-primary); flex-shrink: 0; } body.page-cardapio .footer-bottom { border-top: 1px solid var(--border); padding-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } body.page-cardapio .footer-bottom p { font-size: 12px; color: #555; } body.page-cardapio .footer-bottom img { height: 48px; width: auto; } @media (max-width: 1024px) { body.page-cardapio .dish-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.page-cardapio .footer-grid { grid-template-columns: 1fr 1fr; } body.page-cardapio .mega-menu-body { grid-template-columns: 1fr 1fr; } body.page-cardapio .mm-col:nth-child(3) { display: none; } } @media (max-width: 920px) { body.page-cardapio .intro-grid, body.page-cardapio .delivery-grid { grid-template-columns: 1fr; } body.page-cardapio .intro-media, body.page-cardapio .delivery-video { aspect-ratio: 16/10; order: -1; } body.page-cardapio .section-head { align-items: start; flex-direction: column; } } @media (max-width: 768px) { /* Mega menu – mobile full-screen */ body.page-cardapio .mega-menu { height: 100dvh; max-height: 100dvh; overflow-y: auto; } body.page-cardapio .mega-menu-body { display: none; } body.page-cardapio .mega-menu-footer { display: none; } body.page-cardapio .mm-top-links { display: none; } body.page-cardapio .mm-left { gap: 0; } body.page-cardapio .mega-menu-cta { font-size: 11px; padding: 8px 14px; } :root { --nav-h: 80px; } body.page-cardapio .mega-menu-header { height: 72px; } body.page-cardapio .mm-logo img { height: 46px; width: 46px; } body.page-cardapio .nav { padding-block: 0; } body.page-cardapio .nav-logo img { height: 68px; width: 68px; } body.page-cardapio .nav-right .nav-cta { display: none; } body.page-cardapio .mm-mobile-body { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 24px 28px 32px; justify-content: space-between; } body.page-cardapio .mm-mobile-nav { display: flex; flex-direction: column; } body.page-cardapio .mm-mobile-link { font-family: var(--font-mm); font-size: clamp(34px, 9vw, 48px); font-weight: 900; letter-spacing: 0.01em; text-transform: uppercase; color: var(--crimson-red); display: block; padding: 9px 0; border-bottom: 1px solid rgba(13,13,13,0.1); transition: color 0.15s ease, padding-left 0.2s ease; line-height: 1.1; } body.page-cardapio .mm-mobile-link:hover { color: var(--amber-primary); padding-left: 10px; } body.page-cardapio .mm-mobile-sep { display: block; height: 2px; background: rgba(13,13,13,0.12); margin: 10px 0; border-radius: 2px; } body.page-cardapio .mm-mobile-footer { display: flex; flex-direction: column; gap: 16px; padding-top: 20px; } body.page-cardapio .mm-mobile-cta { display: block; text-align: center; background: var(--crimson-red); color: #fff; font-family: var(--font-body); font-weight: 800; font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; padding: 14px 24px; border-radius: 100px; transition: background 0.2s; } body.page-cardapio .mm-mobile-cta:hover { background: #8B1111; } body.page-cardapio .mm-mobile-socials { display: flex; gap: 24px; justify-content: center; align-items: center; } body.page-cardapio .mm-mobile-socials a { color: var(--near-black); transition: color 0.2s; } body.page-cardapio .mm-mobile-socials a:hover { color: var(--crimson-red); } body.page-cardapio .mega-menu.open .mm-mobile-link { animation: mmLinkIn 0.4s cubic-bezier(0.22,1,0.36,1) both; } body.page-cardapio .mm-mobile-nav a:nth-of-type(1) { animation-delay: 0.04s; } body.page-cardapio .mm-mobile-nav a:nth-of-type(2) { animation-delay: 0.09s; } body.page-cardapio .mm-mobile-nav a:nth-of-type(3) { animation-delay: 0.14s; } body.page-cardapio .mm-mobile-nav a:nth-of-type(4) { animation-delay: 0.19s; } body.page-cardapio .mm-mobile-nav a:nth-of-type(5) { animation-delay: 0.24s; } body.page-cardapio .mm-mobile-nav a:nth-of-type(6) { animation-delay: 0.29s; } body.page-cardapio .mm-mobile-nav a:nth-of-type(7) { animation-delay: 0.34s; } body.page-cardapio .mm-mobile-nav a:nth-of-type(8) { animation-delay: 0.39s; } body.page-cardapio .section-head .section-subtitle { text-align: left !important; align-self: flex-start !important; } } @media (max-width: 640px) { body.page-cardapio .nav-right .nav-cta { display: none; } body.page-cardapio .menu-hero { min-height: 76svh; } body.page-cardapio .delivery-points, body.page-cardapio .unit-grid, body.page-cardapio .dish-grid, body.page-cardapio .footer-grid { grid-template-columns: 1fr; } body.page-cardapio .delivery-point { grid-template-columns: 1fr; gap: 6px; } body.page-cardapio .final-strip-grid { grid-template-columns: 1fr; } body.page-cardapio .hero-actions { flex-direction: column; } body.page-cardapio .btn-primary, body.page-cardapio .btn-secondary, body.page-cardapio .btn-dark { width: 100%; } body.page-cardapio .footer-bottom { flex-direction: column; text-align: center; } } /* ── IFOOD FLUTUANTE ── */ body.page-cardapio .ifood-float { position: fixed; bottom: 24px; right: 24px; z-index: 9998; display: block; width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 0 10px rgba(220, 0, 0, 0.35), 0 4px 18px rgba(0,0,0,0.28); transition: transform 0.3s ease, box-shadow 0.3s ease; animation: ifood-glow 2.8s ease-in-out infinite; } body.page-cardapio .ifood-float img { width: 100%; height: 100%; border-radius: 50%; display: block; } body.page-cardapio .ifood-float:hover { transform: scale(1.1); box-shadow: 0 0 28px rgba(220, 0, 0, 0.65), 0 6px 24px rgba(0,0,0,0.35); animation: none; } /* ── LGPD BANNER ── */ body.page-cardapio .lgpd-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: #1a1a1a; border-top: 1px solid #2A2A2A; padding: 16px clamp(20px, 4vw, 56px); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; box-shadow: 0 -4px 32px rgba(0,0,0,0.5); transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.22,1,0.36,1); } body.page-cardapio .lgpd-banner.visible { transform: translateY(0); } body.page-cardapio .lgpd-banner p { font-size: 13px; color: rgba(242,242,242,0.8); line-height: 1.5; flex: 1; min-width: 240px; } body.page-cardapio .lgpd-banner p a { color: #F2A71B; text-decoration: underline; } body.page-cardapio .lgpd-banner-actions { display: flex; gap: 12px; flex-shrink: 0; } body.page-cardapio .lgpd-btn-accept { background: #F2A71B; color: #0D0D0D; border: none; border-radius: 100px; padding: 10px 24px; font-family: inherit; font-weight: 800; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: background 0.2s; } body.page-cardapio .lgpd-btn-accept:hover { background: #FFB818; } @media (max-width: 480px) { body.page-cardapio .lgpd-banner { flex-direction: column; align-items: flex-start; } body.page-cardapio .lgpd-banner-actions { width: 100%; } body.page-cardapio .lgpd-btn-accept { width: 100%; text-align: center; } } /* ── CUSTOM SCROLLBAR ── */ /* ============================================================ assets/css/style-unidades.css → body.page-unidades ============================================================ */ body.page-unidades video, body.page-unidades svg { display: block; max-width: 100%; } /* ─── UTILITIES ─── */ body.page-unidades .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); } body.page-unidades .section { padding: clamp(64px, 8vw, 120px) 0; } body.page-unidades .eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--amber-primary); } body.page-unidades .section-title { font-family: var(--font-display); font-size: clamp(42px, 6vw, 86px); line-height: 0.96; letter-spacing: 0.02em; } body.page-unidades .section-subtitle { max-width: 720px; color: rgba(242,242,242,0.74); font-size: clamp(15px, 1.5vw, 18px); line-height: 1.7; } body.page-unidades .btn-primary, body.page-unidades .btn-secondary, body.page-unidades .btn-dark { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 100px; font-weight: 800; font-size: 14px; letter-spacing: 0.03em; text-transform: uppercase; padding: 14px 32px; transition: transform 0.15s, background 0.2s, color 0.2s, border-color 0.2s; white-space: nowrap; cursor: pointer; } body.page-unidades .btn-primary { background: var(--amber-primary); color: var(--near-black); border: 0; } body.page-unidades .btn-primary:hover { background: var(--amber-light); transform: translateY(-2px); } body.page-unidades .btn-secondary { background: transparent; color: var(--off-white); border: 2px solid rgba(242,242,242,0.38); } body.page-unidades .btn-secondary:hover { border-color: var(--amber-primary); color: var(--amber-primary); transform: translateY(-2px); } body.page-unidades .btn-dark { background: var(--near-black); color: var(--off-white); border: 0; } body.page-unidades .btn-dark:hover { background: var(--dark-hover); transform: translateY(-2px); } /* ─── NAV ─── */ body.page-unidades .nav { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--nav-h); background: rgba(13,13,13,0.86); border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 10px clamp(20px, 4vw, 56px); transition: background 0.35s, backdrop-filter 0.35s, border-color 0.35s, box-shadow 0.35s; } body.page-unidades .nav.scrolled { background: rgba(13,13,13,0.72); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border-bottom-color: rgba(255,255,255,0.07); box-shadow: 0 4px 32px rgba(0,0,0,0.45); } body.page-unidades .nav-logo { display: flex; justify-content: center; } body.page-unidades .nav-logo img { height: 120px; width: 120px; object-fit: contain; } body.page-unidades .nav-right { display: flex; justify-content: flex-end; } body.page-unidades .nav-cta { background: var(--amber-primary); color: var(--near-black); font-weight: 800; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; padding: 10px 24px; border-radius: 100px; transition: background 0.2s, transform 0.15s; } body.page-unidades .nav-cta:hover { background: var(--amber-light); transform: translateY(-1px); } body.page-unidades .nav-burger { width: 36px; display: flex; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; } body.page-unidades .nav-burger span { display: block; width: 24px; height: 2px; background: var(--off-white); border-radius: 2px; } /* ─── MEGA MENU ─── */ body.page-unidades .mm-overlay { position: fixed; inset: 0; z-index: 190; background: rgba(0,0,0,0); pointer-events: none; transition: background 0.4s; } body.page-unidades .mm-overlay.open { background: rgba(0,0,0,0.55); pointer-events: all; } body.page-unidades .mega-menu { position: fixed; inset: 0 0 auto; z-index: 200; background: var(--off-white); display: flex; flex-direction: column; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: transform 0.42s cubic-bezier(0.22,1,0.36,1), opacity 0.3s; max-height: 86vh; overflow-y: auto; box-shadow: 0 24px 64px rgba(0,0,0,0.35); } body.page-unidades .mega-menu.open { transform: translateY(0); opacity: 1; pointer-events: all; } body.page-unidades .mega-menu-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 clamp(20px, 4vw, 56px); height: var(--nav-h); border-bottom: 1px solid var(--menu-border); flex-shrink: 0; } body.page-unidades .mm-left { display: flex; align-items: center; gap: 32px; } body.page-unidades .mm-logo { justify-self: center; } body.page-unidades .mm-logo img { height: 90px; width: 90px; object-fit: contain; } body.page-unidades .mm-right { justify-self: end; } body.page-unidades .mm-top-links { display: flex; gap: 32px; list-style: none; } body.page-unidades .mm-top-links a { font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--near-black); transition: color 0.2s; } body.page-unidades .mm-top-links a:hover { color: var(--crimson-red); } body.page-unidades .mm-close { background: none; border: none; cursor: pointer; color: var(--near-black); font-size: 28px; line-height: 1; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transition: color 0.2s, transform 0.2s; } body.page-unidades .mm-close:hover { color: var(--crimson-red); transform: rotate(90deg); } body.page-unidades .mega-menu-cta { background: var(--crimson-red); color: var(--off-white); font-weight: 800; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; padding: 10px 24px; border-radius: 100px; transition: background 0.2s; } body.page-unidades .mega-menu-cta:hover { background: #8B1111; } body.page-unidades .mega-menu-body { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: clamp(32px, 5vw, 60px) clamp(20px, 4vw, 56px); } body.page-unidades .mm-col { display: flex; flex-direction: column; gap: 8px; } body.page-unidades .mm-col-title { font-family: var(--font-mm); font-size: clamp(32px, 4vw, 58px); font-weight: 900; color: var(--crimson-red); letter-spacing: 0.01em; line-height: 1.1; text-transform: uppercase; transition: color 0.15s; } body.page-unidades .mm-col-title:hover { color: var(--amber-primary); } body.page-unidades .mega-menu.open .mm-col-title { animation: mmLinkIn 0.5s cubic-bezier(0.22,1,0.36,1) both; } body.page-unidades .mm-col:nth-child(1) .mm-col-title:nth-child(1) { animation-delay: 0.05s; } body.page-unidades .mm-col:nth-child(1) .mm-col-title:nth-child(2) { animation-delay: 0.10s; } body.page-unidades .mm-col:nth-child(1) .mm-col-title:nth-child(3) { animation-delay: 0.15s; } body.page-unidades .mm-col:nth-child(1) .mm-col-title:nth-child(4) { animation-delay: 0.20s; } body.page-unidades .mm-col:nth-child(2) .mm-col-title:nth-child(1) { animation-delay: 0.08s; } body.page-unidades .mm-col:nth-child(2) .mm-col-title:nth-child(2) { animation-delay: 0.13s; } body.page-unidades .mm-col:nth-child(2) .mm-col-title:nth-child(3) { animation-delay: 0.18s; } body.page-unidades .mm-col:nth-child(2) .mm-col-title:nth-child(4) { animation-delay: 0.23s; } body.page-unidades .mm-col:nth-child(3) .mm-col-title { animation-delay: 0.12s; } body.page-unidades .mm-ig-video { margin-top: 20px; width: 100%; max-width: 220px; aspect-ratio: 1/1; border-radius: 12px; overflow: hidden; background: var(--menu-border); } body.page-unidades .mm-ig-video video { width: 100%; height: 100%; object-fit: cover; display: block; } body.page-unidades .mega-menu.open .mm-ig-video { animation: mmLinkIn 0.5s cubic-bezier(0.22,1,0.36,1) 0.22s both; } body.page-unidades .mm-mobile-body { display: none; } body.page-unidades .mega-menu-footer { display: flex; align-items: center; justify-content: space-between; padding: 20px clamp(20px, 4vw, 56px); border-top: 1px solid var(--menu-border); flex-shrink: 0; } body.page-unidades .mm-socials { display: flex; gap: 24px; align-items: center; } body.page-unidades .mm-socials a { color: var(--near-black); transition: color 0.2s; } body.page-unidades .mm-socials a:hover { color: var(--crimson-red); } body.page-unidades .mm-footer-links { display: flex; gap: 40px; } body.page-unidades .mm-footer-links a { font-size: 13px; font-weight: 700; color: var(--near-black); transition: color 0.2s; } body.page-unidades .mm-footer-links a:hover { color: var(--crimson-red); } /* ─── HERO ─── */ body.page-unidades .u-hero { min-height: 72svh; padding-top: var(--nav-h); display: grid; align-items: end; position: relative; overflow: hidden; background: var(--near-black); } body.page-unidades .u-hero-media { position: absolute; inset: 0; z-index: 0; } body.page-unidades .u-hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.65; } body.page-unidades .u-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(13,13,13,0.95), rgba(13,13,13,0.72) 45%, rgba(13,13,13,0.20)); } body.page-unidades .u-hero-content { position: relative; z-index: 1; padding: clamp(64px, 9vw, 120px) 0; max-width: 820px; } body.page-unidades .u-hero h1 { font-family: var(--font-display); font-size: clamp(58px, 9vw, 132px); line-height: 0.9; letter-spacing: 0.02em; margin: 14px 0 24px; } body.page-unidades .u-hero h1 span { color: var(--amber-primary); } body.page-unidades .u-hero .section-subtitle { color: rgba(242,242,242,0.78); } body.page-unidades .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 38px; } /* ─── UNIDADES (CLEAN) ─── */ body.page-unidades .unidades { background: var(--off-white); color: var(--near-black); } body.page-unidades .unidades-head { margin-bottom: clamp(40px, 5vw, 64px); } body.page-unidades .unidades-head .section-title { color: var(--near-black); margin-top: 10px; } body.page-unidades .unidades-head .eyebrow { color: var(--deep-orange); } body.page-unidades .units-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.5vw, 28px); } body.page-unidades .unit-card { background: #fff; border: 1px solid rgba(13,13,13,0.10); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s; } body.page-unidades .unit-card:hover { border-color: var(--amber-primary); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(13,13,13,0.10); } body.page-unidades .unit-card-img { aspect-ratio: 16/9; overflow: hidden; background: #e5e5e5; } body.page-unidades .unit-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; } body.page-unidades .unit-card:hover .unit-card-img img { transform: scale(1.04); } body.page-unidades .unit-card-body { padding: clamp(20px, 2.5vw, 28px); display: flex; flex-direction: column; gap: 10px; flex: 1; } body.page-unidades .unit-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase; color: var(--deep-orange); } body.page-unidades .unit-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber-primary); flex-shrink: 0; } body.page-unidades .unit-card h3 { font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 30px); letter-spacing: 0.02em; line-height: 1.05; color: var(--near-black); } body.page-unidades .unit-address { font-size: 13px; font-weight: 700; color: rgba(13,13,13,0.52); border-left: 2px solid var(--amber-primary); padding-left: 10px; line-height: 1.5; } body.page-unidades .unit-card p { font-size: 14px; line-height: 1.65; color: rgba(13,13,13,0.66); } body.page-unidades .unit-cta { margin-top: auto; padding-top: 14px; } /* ─── TARJA FINAL (âmbar) ─── */ body.page-unidades .final-strip { background: var(--amber-primary); color: var(--near-black); padding: clamp(56px, 8vw, 100px) 0; } body.page-unidades .final-strip-inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 720px; margin: 0 auto; } body.page-unidades .final-strip h2 { font-family: var(--font-display); font-size: clamp(48px, 7vw, 96px); line-height: 0.92; letter-spacing: 0.02em; } body.page-unidades .final-strip p { font-size: clamp(16px, 1.6vw, 20px); font-weight: 700; color: rgba(13,13,13,0.78); line-height: 1.6; } /* ─── FOOTER ─── */ body.page-unidades .footer { background: var(--footer-bg); border-top: 1px solid var(--border); padding: clamp(48px, 6vw, 96px) 0 clamp(24px, 3vw, 40px); } body.page-unidades .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.5fr; gap: clamp(32px, 4vw, 64px); margin-bottom: clamp(40px, 5vw, 72px); } body.page-unidades .footer-col h5 { font-family: var(--font-body); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber-primary); margin-bottom: 24px; } body.page-unidades .footer-logo { margin-bottom: 10px; } body.page-unidades .footer-logo img { height: 80px; width: auto; } body.page-unidades .footer-col p { font-size: 14px; color: var(--muted); line-height: 1.7; } body.page-unidades .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; } body.page-unidades .footer-col ul li a { font-size: 14px; color: var(--muted); transition: color 0.2s; } body.page-unidades .footer-col ul li a:hover { color: var(--amber-primary); } body.page-unidades .footer-social-links { display: flex; flex-direction: column; gap: 12px; } body.page-unidades .footer-social-link { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); transition: color 0.2s; } body.page-unidades .footer-social-link:hover { color: var(--amber-primary); } body.page-unidades .footer-ifood-links { display: flex; flex-direction: column; gap: 8px; } body.page-unidades .footer-ifood-link { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-size: 13px; font-weight: 700; color: var(--off-white); transition: border-color 0.2s, background 0.2s; } body.page-unidades .footer-ifood-link:hover { border-color: var(--amber-primary); background: rgba(242,167,27,0.08); } body.page-unidades .footer-ifood-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber-primary); flex-shrink: 0; } body.page-unidades .footer-bottom { border-top: 1px solid var(--border); padding-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } body.page-unidades .footer-bottom p { font-size: 12px; color: #555; } body.page-unidades .footer-bottom img { height: 48px; width: auto; } /* ─── RESPONSIVE ─── */ @media (max-width: 1024px) { body.page-unidades .units-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.page-unidades .unit-card:last-child:nth-child(3n+1) { grid-column: auto; } body.page-unidades .footer-grid { grid-template-columns: 1fr 1fr; } body.page-unidades .mega-menu-body { grid-template-columns: 1fr 1fr; } body.page-unidades .mm-col:nth-child(3) { display: none; } } @media (max-width: 768px) { /* Mega menu – mobile full-screen */ body.page-unidades .mega-menu { height: 100dvh; max-height: 100dvh; overflow-y: auto; } body.page-unidades .mega-menu-body { display: none; } body.page-unidades .mega-menu-footer { display: none; } body.page-unidades .mm-top-links { display: none; } body.page-unidades .mm-left { gap: 0; } body.page-unidades .mega-menu-cta { font-size: 11px; padding: 8px 14px; } :root { --nav-h: 80px; } body.page-unidades .mega-menu-header { height: 72px; } body.page-unidades .mm-logo img { height: 46px; width: 46px; } body.page-unidades .nav { padding-block: 0; } body.page-unidades .nav-logo img { height: 68px; width: 68px; } body.page-unidades .nav-right .nav-cta { display: none; } body.page-unidades .mm-mobile-body { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 24px 28px 32px; justify-content: space-between; } body.page-unidades .mm-mobile-nav { display: flex; flex-direction: column; } body.page-unidades .mm-mobile-link { font-family: var(--font-mm); font-size: clamp(34px, 9vw, 48px); font-weight: 900; letter-spacing: 0.01em; text-transform: uppercase; color: var(--crimson-red); display: block; padding: 9px 0; border-bottom: 1px solid rgba(13,13,13,0.1); transition: color 0.15s ease, padding-left 0.2s ease; line-height: 1.1; } body.page-unidades .mm-mobile-link:hover { color: var(--amber-primary); padding-left: 10px; } body.page-unidades .mm-mobile-sep { display: block; height: 2px; background: rgba(13,13,13,0.12); margin: 10px 0; border-radius: 2px; } body.page-unidades .mm-mobile-footer { display: flex; flex-direction: column; gap: 16px; padding-top: 20px; } body.page-unidades .mm-mobile-cta { display: block; text-align: center; background: var(--crimson-red); color: #fff; font-family: var(--font-body); font-weight: 800; font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; padding: 14px 24px; border-radius: 100px; transition: background 0.2s; } body.page-unidades .mm-mobile-cta:hover { background: #8B1111; } body.page-unidades .mm-mobile-socials { display: flex; gap: 24px; justify-content: center; align-items: center; } body.page-unidades .mm-mobile-socials a { color: var(--near-black); transition: color 0.2s; } body.page-unidades .mm-mobile-socials a:hover { color: var(--crimson-red); } body.page-unidades .mega-menu.open .mm-mobile-link { animation: mmLinkIn 0.4s cubic-bezier(0.22,1,0.36,1) both; } body.page-unidades .mm-mobile-nav a:nth-of-type(1) { animation-delay: 0.04s; } body.page-unidades .mm-mobile-nav a:nth-of-type(2) { animation-delay: 0.09s; } body.page-unidades .mm-mobile-nav a:nth-of-type(3) { animation-delay: 0.14s; } body.page-unidades .mm-mobile-nav a:nth-of-type(4) { animation-delay: 0.19s; } body.page-unidades .mm-mobile-nav a:nth-of-type(5) { animation-delay: 0.24s; } body.page-unidades .mm-mobile-nav a:nth-of-type(6) { animation-delay: 0.29s; } body.page-unidades .mm-mobile-nav a:nth-of-type(7) { animation-delay: 0.34s; } body.page-unidades .mm-mobile-nav a:nth-of-type(8) { animation-delay: 0.39s; } } @media (max-width: 640px) { body.page-unidades .nav-right .nav-cta { display: none; } body.page-unidades .u-hero { min-height: 70svh; } body.page-unidades .hero-actions { flex-direction: column; } body.page-unidades .btn-primary, body.page-unidades .btn-secondary, body.page-unidades .btn-dark { width: 100%; } body.page-unidades .units-grid { grid-template-columns: 1fr; } body.page-unidades .unit-card:last-child:nth-child(3n+1) { grid-column: auto; } body.page-unidades .footer-grid { grid-template-columns: 1fr; } body.page-unidades .footer-bottom { flex-direction: column; text-align: center; } } /* ── IFOOD FLUTUANTE ── */ body.page-unidades .ifood-float { position: fixed; bottom: 24px; right: 24px; z-index: 9998; display: block; width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 0 10px rgba(220, 0, 0, 0.35), 0 4px 18px rgba(0,0,0,0.28); transition: transform 0.3s ease, box-shadow 0.3s ease; animation: ifood-glow 2.8s ease-in-out infinite; } body.page-unidades .ifood-float img { width: 100%; height: 100%; border-radius: 50%; display: block; } body.page-unidades .ifood-float:hover { transform: scale(1.1); box-shadow: 0 0 28px rgba(220, 0, 0, 0.65), 0 6px 24px rgba(0,0,0,0.35); animation: none; } /* ── LGPD BANNER ── */ body.page-unidades .lgpd-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: #1a1a1a; border-top: 1px solid #2A2A2A; padding: 16px clamp(20px, 4vw, 56px); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; box-shadow: 0 -4px 32px rgba(0,0,0,0.5); transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.22,1,0.36,1); } body.page-unidades .lgpd-banner.visible { transform: translateY(0); } body.page-unidades .lgpd-banner p { font-size: 13px; color: rgba(242,242,242,0.8); line-height: 1.5; flex: 1; min-width: 240px; } body.page-unidades .lgpd-banner p a { color: #F2A71B; text-decoration: underline; } body.page-unidades .lgpd-banner-actions { display: flex; gap: 12px; flex-shrink: 0; } body.page-unidades .lgpd-btn-accept { background: #F2A71B; color: #0D0D0D; border: none; border-radius: 100px; padding: 10px 24px; font-family: inherit; font-weight: 800; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: background 0.2s; } body.page-unidades .lgpd-btn-accept:hover { background: #FFB818; } @media (max-width: 480px) { body.page-unidades .lgpd-banner { flex-direction: column; align-items: flex-start; } body.page-unidades .lgpd-banner-actions { width: 100%; } body.page-unidades .lgpd-btn-accept { width: 100%; text-align: center; } } /* ── CUSTOM SCROLLBAR ── */