/* =================================
CSS VARIABLES & RESET
================================= */
:root {
/* =================================
CORES (Color Tokens)
================================= */
--cor-primaria: #d4a574;
--cor-secundaria: #f4e8d8;
--cor-accent: #8b5a3c;
--cor-texto: #2c2c2c;
--cor-texto-secundario: #666666;
--cor-texto-hover: #1e40af;
--cor-texto-botao: #ffffff;
--cor-texto-botao-hover: #ffffff;
--cor-fundo-botao: var(--cor-primaria);
--cor-fundo-botao-hover: var(--cor-accent);
--cor-branco: #ffffff;
--color-surface: #fafafa;
--color-border: rgba(212, 165, 116, 0.12);
--color-text-muted: #666;
--gradiente-hero: linear-gradient(135deg, #d4a574 0%, #f4e8d8 100%);
/* =================================
SPACING SCALE (8pt System)
================================= */
--space-1: 4px; /* 0.25rem */
--space-2: 8px; /* 0.5rem */
--space-3: 12px; /* 0.75rem */
--space-4: 16px; /* 1rem */
--space-5: 20px; /* 1.25rem */
--space-6: 24px; /* 1.5rem */
--space-8: 32px; /* 2rem */
--space-10: 40px; /* 2.5rem */
--space-12: 48px; /* 3rem */
--space-16: 64px; /* 4rem */
--space-20: 80px; /* 5rem */
--space-24: 96px; /* 6rem */
/* Aliases para compatibilidade */
--spacing-xs: var(--space-2);
--spacing-sm: var(--space-3);
--spacing-md: var(--space-4);
--spacing-lg: var(--space-6);
--spacing-xl: var(--space-8);
--spacing-2xl: var(--space-12);
/* =================================
TYPOGRAPHY SCALE
================================= */
--text-xs: 12px;
--text-xs-lh: 1.5;
--text-sm: 14px;
--text-sm-lh: 1.55;
--text-md: 16px;
--text-md-lh: 1.6;
--text-lg: 18px;
--text-lg-lh: 1.65;
--heading-4: 18px;
--heading-4-lh: 1.3;
--heading-3: 22px;
--heading-3-lh: 1.25;
--heading-2: 28px;
--heading-2-lh: 1.2;
--heading-1: clamp(28px, 3.2vw, 44px);
--heading-1-lh: 1.1;
--letter-spacing-tight: -0.02em;
--letter-spacing-normal: 0;
/* =================================
LAYOUT CONSTRAINTS
================================= */
--container-max: 1240px;
--gutter-mobile: 16px;
--gutter-tablet: 24px;
--gutter-desktop: 32px;
--section-padding-mobile: 32px 0;
--section-padding-desktop: 80px 0;
--grid-gap-mobile: 12px;
--grid-gap-desktop: 24px;
--text-max-width: 65ch;
/* =================================
RADIUS SCALE
================================= */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-pill: 999px;
/* =================================
SHADOWS (Reutilizáveis)
================================= */
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
--sombra-suave: 0 8px 32px rgba(212, 165, 116, 0.1);
--sombra-card: var(--shadow-md);
--sombra-hover: var(--shadow-lg);
/* =================================
BORDERS
================================= */
--border-width: 1px;
--border-opacity: 0.12;
--border-radius: var(--radius-md);
--border-radius-small: var(--radius-sm);
/* =================================
TRANSITIONS & ANIMATIONS
================================= */
--transicao-padrao: all 0.3s ease;
--transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
/* =================================
LEGACY (Compatibilidade)
================================= */
--espaco-container: var(--space-8);
--espaco-secao: var(--space-20);
--max-width: var(--container-max);
/* Cabecalho (inspiração logo-centro) */
--cCab: #ffffff;
--cCabTxt: #885b2b;
--cCabIcones: #885b2b;
--cBusca: #ebeaea;
--cBuscaTxt: #7c5329;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
position: relative;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: var(--text-md);
line-height: var(--text-md-lh);
color: var(--cor-texto);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Typography normalization */
p {
max-width: var(--text-max-width);
line-height: var(--text-md-lh);
}
h1, h2, h3, h4, h5, h6 {
letter-spacing: var(--letter-spacing-tight);
}
h1 {
font-size: var(--heading-1);
line-height: var(--heading-1-lh);
}
h2 {
font-size: var(--heading-2);
line-height: var(--heading-2-lh);
}
h3 {
font-size: var(--heading-3);
line-height: var(--heading-3-lh);
}
h4 {
font-size: var(--heading-4);
line-height: var(--heading-4-lh);
}
img {
max-width: 100%;
/*height: 100%;*/
}
/* =================================
LAYOUT COMPONENTS
================================= */
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--espaco-container);
}
.section-header {
text-align: center;
margin-bottom: var(--space-12);
}
.section-header h2 {
font-size: var(--heading-2);
line-height: var(--heading-2-lh);
color: var(--cor-accent);
margin-bottom: var(--space-4);
font-weight: 700;
letter-spacing: var(--letter-spacing-tight);
}
.section-header p {
font-size: var(--text-lg);
line-height: var(--text-lg-lh);
color: var(--color-text-muted);
max-width: var(--text-max-width);
margin: 0 auto;
}
/* =================================
INFO-DESTAQUE (Barra topo)
================================= */
.info-destaque {
position: relative;
width: 100%;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(145, 121, 96);
color: #fff;
font-family: Montserrat, var(--font-family, inherit);
font-size: 12px;
line-height: normal;
z-index: 101;
overflow: hidden;
box-sizing: border-box;
white-space: nowrap;
}
.info-destaque a {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
color: #fff;
text-decoration: none;
padding: 0 12px;
transition: opacity 0.2s ease;
white-space: nowrap;
}
.info-destaque a:hover {
opacity: 0.9;
color: #fff;
}
.info-destaque .icone-place {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.info-destaque .icone-place svg {
width: 18px;
height: 18px;
fill: currentColor;
}
.info-destaque .info-texto {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: nowrap;
line-height: 1.2;
gap: 4px;
white-space: nowrap;
}
.info-destaque .info-texto strong {
font-weight: 600;
}
.info-destaque .info-texto span {
font-size: 12px;
}
/* =================================
CABECALHO (logo-centro – inspiração)
================================= */
#cabecalho.cabecalho.logo-centro {
position: relative;
width: 100%;
background: var(--cCab);
color: var(--cCabTxt);
border-bottom: 1px solid rgba(144, 144, 144, 0.13);
z-index: 100;
font-family: Montserrat, var(--font-family, inherit);
font-size: 12px;
line-height: normal;
box-sizing: border-box;
}
.cabecalho .container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--gutter-desktop);
}
.cabecalho-inside {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--space-4);
min-height: 72px;
padding: var(--space-3) 0;
}
.cabecalho-left {
display: flex;
align-items: center;
gap: var(--space-4);
justify-self: start;
width: 100%;
max-width: 360px;
}
.cabecalho-left .mobile-left {
display: none;
}
.cabecalho-left .busca-desktop {
display: block;
width: 100%;
}
.mobile-left {
display: flex;
align-items: center;
gap: var(--space-2);
}
.menu-mobile-button,
.busca-topo {
display: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: none;
background: none;
cursor: pointer;
color: var(--cCabIcones, var(--cor-accent));
transition: var(--transicao-padrao);
}
.menu-mobile-button:hover,
.busca-topo:hover {
opacity: 0.8;
}
.menu-mobile-button svg,
.busca-topo svg {
width: 22px;
height: 22px;
}
.logo {
margin: 0;
padding: 0;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
justify-self: center;
}
.logo a {
display: inline-block;
text-decoration: none;
color: inherit;
}
.logo img {
max-height: 36px;
width: auto;
max-width: 180px;
object-fit: contain;
vertical-align: middle;
}
.logo-texto {
font-size: var(--text-lg);
font-weight: 600;
color: var(--cCabTxt, var(--cor-accent));
}
.cabecalho-right {
display: flex;
align-items: center;
gap: var(--space-4);
justify-self: end;
}
.hamburger {
display: none;
padding: 0;
border: none;
background: none;
cursor: pointer;
color: var(--cCabIcones, var(--cor-accent));
}
.hamburger-box {
display: inline-block;
width: 24px;
height: 18px;
position: relative;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px;
}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
width: 24px;
height: 3px;
background: currentColor;
position: absolute;
left: 0;
border-radius: 2px;
transition: var(--transicao-padrao);
}
.hamburger-inner {
top: 50%;
margin-top: -1.5px;
}
.hamburger-inner::before,
.hamburger-inner::after {
content: '';
top: 0;
}
.hamburger-inner::before {
top: -6px;
}
.hamburger-inner::after {
top: 6px;
}
.hamburger--collapse.is-active .hamburger-inner {
transform: rotate(45deg);
}
.hamburger--collapse.is-active .hamburger-inner::before {
top: 0;
opacity: 0;
}
.hamburger--collapse.is-active .hamburger-inner::after {
top: 0;
transform: rotate(-90deg);
}
.busca-desktop {
width: 100%;
}
.cabecalho .busca.search-wrapper {
background: var(--cBusca);
border-radius: 50px;
border: 1px solid rgba(144, 144, 144, 0.12);
}
.cabecalho .search-input {
background: transparent;
color: var(--cBuscaTxt, var(--cor-texto));
border: none;
}
.cabecalho .search-input::placeholder {
color: var(--cBuscaTxt, var(--color-text-muted));
}
.painel {
display: flex;
align-items: center;
gap: var(--space-4);
justify-self: end;
}
.painel-item {
margin: 0;
padding: 0;
}
.painel-atendimento-link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--cCabTxt, var(--cor-accent));
text-decoration: none;
font-size: 12px;
font-weight: 500;
padding: 0.25rem 0.5rem;
border-radius: 50px;
transition: var(--transicao-padrao);
}
.painel-atendimento-link:hover {
color: var(--cor-texto-botao-hover);
background: var(--cor-fundo-botao-hover);
}
.painel-atendimento-icone {
display: flex;
align-items: center;
justify-content: center;
}
.painel-atendimento-icone svg {
width: 20px;
height: 20px;
}
.painel-categorias {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0.5rem 1rem;
font-size: 12px;
font-weight: 500;
color: var(--cCabTxt, var(--cor-accent));
background: none;
border: 1px solid rgba(136, 91, 43, 0.3);
border-radius: 50px;
cursor: pointer;
transition: var(--transicao-padrao);
font-family: inherit;
text-decoration: none;
}
.painel-categorias:hover {
background: var(--cor-fundo-botao-hover);
border-color: var(--cor-fundo-botao-hover);
color: var(--cor-texto-botao-hover);
text-decoration: none;
}
.painel-categorias svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
/* Menu mobile (drawer) */
.menu-mobile-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
min-height: 100vh;
background: rgba(255, 255, 255, 0.98);
z-index: 9998;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s ease, visibility 0.3s ease;
padding-top: 100px;
padding-bottom: 2rem;
}
.menu-mobile-overlay.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.menu-mobile-drawer {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--gutter-desktop);
}
.menu-mobile-lista {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.menu-mobile-lista a,
.menu-mobile-lista button {
display: block;
padding: 1rem;
font-size: 1.125rem;
font-weight: 500;
color: var(--cor-accent);
text-decoration: none;
background: none;
border: none;
text-align: left;
cursor: pointer;
width: 100%;
font-family: inherit;
transition: var(--transicao-padrao);
}
.menu-mobile-lista a:hover,
.menu-mobile-lista button:hover {
color: var(--cor-primaria);
background: var(--cor-secundaria);
}
/* Busca mobile overlay */
.busca-mobile-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
min-height: 100vh;
background: rgba(255, 255, 255, 0.98);
z-index: 9999;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 100px;
padding-left: var(--gutter-desktop);
padding-right: var(--gutter-desktop);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.busca-mobile-overlay.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.busca-mobile-box {
width: 100%;
max-width: 480px;
position: relative;
}
.busca-mobile-inner.search-wrapper {
background: var(--cBusca);
border-radius: 50px;
border: 1px solid rgba(144, 144, 144, 0.12);
}
.busca-mobile-fechar {
position: absolute;
top: -2.5rem;
right: 0;
width: 36px;
height: 36px;
padding: 0;
border: none;
background: none;
font-size: 1.5rem;
color: var(--cor-texto);
cursor: pointer;
line-height: 1;
}
@media (max-width: 1024px) {
.cabecalho-inside {
grid-template-columns: auto 1fr auto;
gap: var(--space-2);
}
.cabecalho-left {
max-width: none;
width: auto;
}
.cabecalho-left .mobile-left {
display: flex;
}
.cabecalho-left .busca-desktop {
display: none !important;
}
.logo {
justify-self: center;
}
.cabecalho-right {
justify-self: end;
}
.hamburger {
display: flex;
align-items: center;
justify-content: center;
}
.painel {
display: none !important;
}
.menu-mobile-button,
.busca-topo {
display: flex;
}
}
@media (max-width: 768px) {
.cabecalho-inside {
min-height: 64px;
padding: var(--space-2) 0;
}
.logo img {
max-height: 32px;
max-width: 140px;
}
}
/* =================================
SECONDARY NAVIGATION (Premium UI/UX)
================================= */
.secondary-navigation {
background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
border-bottom: 1px solid rgba(212, 165, 116, 0.1);
padding: 0.75rem 0;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
position: sticky;
top: 0;
z-index: 90;
margin-top: 0;
}
.secondary-navigation .container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--espaco-container);
}
.secondary-nav-menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 0.5rem;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.secondary-nav-menu li {
margin: 0;
padding: 0;
}
/* Botões Premium - Início, Fontes, Textos: usam as mesmas variáveis de botão do painel */
.secondary-nav-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem 1.125rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--cor-texto-botao);
background: var(--cor-fundo-botao);
border: 1px solid transparent;
border-radius: 22px;
text-decoration: none;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
cursor: pointer;
line-height: 1.4;
min-height: 34px;
position: relative;
overflow: hidden;
}
/* Efeito de fundo no hover */
.secondary-nav-link::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
transform: translate(-50%, -50%);
transition: width 0.4s ease, height 0.4s ease;
z-index: 0;
}
.secondary-nav-link:hover::before {
width: 300px;
height: 300px;
}
.secondary-nav-link span,
.secondary-nav-link {
position: relative;
z-index: 1;
}
.secondary-nav-link:hover {
color: var(--cor-texto-botao-hover);
background: var(--cor-fundo-botao-hover);
border-color: var(--cor-fundo-botao-hover);
transform: translateY(-1px);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}
/* Estado ativo */
.secondary-nav-link.active {
background: var(--cor-fundo-botao-hover);
border-color: var(--cor-fundo-botao-hover);
color: var(--cor-texto-botao-hover);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.secondary-nav-link.active::before {
background: rgba(255, 255, 255, 0.1);
}
.secondary-nav-link.active:hover {
background: var(--cor-fundo-botao-hover);
border-color: var(--cor-fundo-botao-hover);
color: var(--cor-texto-botao-hover);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
/* Botão Corporativo Premium */
.secondary-nav-link.corporativo-btn {
background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
border-color: #2d3748;
color: white;
font-weight: 600;
box-shadow: 0 2px 8px rgba(45, 55, 72, 0.25);
position: relative;
}
.secondary-nav-link.corporativo-btn::after {
content: '💼';
margin-left: 0.375rem;
font-size: 0.875rem;
}
.secondary-nav-link.corporativo-btn::before {
background: rgba(255, 255, 255, 0.1);
}
.secondary-nav-link.corporativo-btn:hover {
background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
border-color: #1a202c;
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 14px rgba(45, 55, 72, 0.35);
}
.secondary-nav-link.corporativo-btn.active {
background: linear-gradient(135deg, var(--cor-accent) 0%, #6b4e3d 100%);
border-color: var(--cor-accent);
}
/* Responsividade */
@media (max-width: 768px) {
.secondary-navigation {
padding: 0.625rem 0;
}
.secondary-nav-menu {
gap: 0.375rem;
justify-content: center;
}
.secondary-nav-link {
padding: 0.4375rem 0.9375rem;
font-size: 0.8125rem;
min-height: 32px;
border-radius: 20px;
}
.secondary-nav-link.corporativo-btn::after {
margin-left: 0.25rem;
font-size: 0.8125rem;
}
}
@media (max-width: 480px) {
.secondary-navigation {
padding: 0.5rem 0;
}
.secondary-nav-menu {
gap: 0.25rem;
}
.secondary-nav-link {
padding: 0.375rem 0.75rem;
font-size: 0.75rem;
min-height: 30px;
border-radius: 18px;
}
.secondary-nav-link.corporativo-btn::after {
font-size: 0.75rem;
}
}
/* =================================
CATEGORIES MODAL (Premium UI/UX)
================================= */
.categories-modal {
position: fixed;
inset: 0;
z-index: 10000;
display: none;
align-items: center;
justify-content: center;
padding: 1rem;
opacity: 0;
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
.categories-modal.active {
display: flex;
opacity: 1;
pointer-events: auto;
}
.categories-modal .modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 1;
animation: fadeIn 0.3s ease-out;
}
.categories-modal .modal-container {
position: relative;
z-index: 2;
background: white;
border-radius: 20px;
max-width: 1200px;
width: 100%;
max-height: 90vh;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: modalSlideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes modalSlideUp {
from {
opacity: 0;
transform: translateY(30px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.categories-modal .modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem 2rem;
border-bottom: 1px solid rgba(212, 165, 116, 0.15);
background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
flex-shrink: 0;
}
.categories-modal .modal-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--cor-accent);
margin: 0;
letter-spacing: -0.02em;
}
.categories-modal .modal-close {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(212, 165, 116, 0.1);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--cor-accent);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
flex-shrink: 0;
}
.categories-modal .modal-close:hover {
background: var(--cor-fundo-botao-hover);
color: var(--cor-texto-botao-hover);
transform: rotate(90deg) scale(1.1);
}
.categories-modal .modal-close svg {
width: 20px;
height: 20px;
stroke-width: 2.5;
}
.categories-modal .modal-body {
padding: 2rem;
overflow-y: auto;
flex: 1;
scrollbar-width: thin;
scrollbar-color: var(--cor-primaria) #f0f0f0;
}
.categories-modal .modal-body::-webkit-scrollbar {
width: 8px;
}
.categories-modal .modal-body::-webkit-scrollbar-track {
background: #f0f0f0;
border-radius: 4px;
}
.categories-modal .modal-body::-webkit-scrollbar-thumb {
background: var(--cor-primaria);
border-radius: 4px;
}
.categories-modal .modal-body::-webkit-scrollbar-thumb:hover {
background: var(--cor-accent);
}
/* Grid de Categorias no Modal */
.categories-modal .categories-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1.5rem;
}
.categories-modal .category-card {
position: relative;
display: block;
text-decoration: none;
color: inherit;
border-radius: 16px;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
animation: fadeInUp 0.5s ease-out;
animation-delay: calc(var(--delay, 0s));
animation-fill-mode: both;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.categories-modal .category-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(212, 165, 116, 0.25);
z-index: 1;
}
.categories-modal .category-background {
position: relative;
width: 100%;
height: 180px;
overflow: hidden;
background: var(--cor-secundaria);
}
.categories-modal .category-bg-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.categories-modal .category-card:hover .category-bg-image {
transform: scale(1.1);
}
.categories-modal .category-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
z-index: 1;
}
.categories-modal .category-content {
position: relative;
padding: 1rem;
background: white;
z-index: 2;
}
.categories-modal .category-name {
font-size: 1rem;
font-weight: 600;
color: var(--cor-accent);
margin: 0;
line-height: 1.4;
display: flex;
align-items: center;
gap: 0.375rem;
}
.categories-modal .category-star {
font-size: 1rem;
line-height: 1;
}
.categories-modal .category-hover-effect {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(212, 165, 116, 0.1) 0%, transparent 100%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
z-index: 1;
}
.categories-modal .category-card:hover .category-hover-effect {
opacity: 1;
}
.categories-modal .category-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--gradiente-hero);
}
.categories-modal .category-placeholder i {
font-size: 3rem !important;
color: white !important;
opacity: 0.8;
}
/* Responsividade */
@media (max-width: 768px) {
.categories-modal {
padding: 0.5rem;
}
.categories-modal .modal-container {
max-height: 95vh;
border-radius: 16px;
}
.categories-modal .modal-header {
padding: 1.25rem 1.5rem;
}
.categories-modal .modal-title {
font-size: 1.25rem;
}
.categories-modal .modal-body {
padding: 1.5rem;
}
.categories-modal .categories-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 1rem;
}
.categories-modal .category-background {
height: 140px;
}
.categories-modal .category-name {
font-size: 0.875rem;
}
}
@media (max-width: 480px) {
.categories-modal .modal-header {
padding: 1rem 1.25rem;
}
.categories-modal .modal-title {
font-size: 1.125rem;
}
.categories-modal .modal-body {
padding: 1rem;
}
.categories-modal .categories-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.categories-modal .category-background {
height: 120px;
}
.categories-modal .modal-close {
width: 36px;
height: 36px;
}
.categories-modal .modal-close svg {
width: 18px;
height: 18px;
}
}
/* =================================
SEARCH CONTAINER (Premium UI/UX)
================================= */
.search-container {
position: relative;
flex: 1;
max-width: 500px;
}
.search-wrapper {
position: relative;
display: flex;
align-items: center;
}
.search-input {
width: 100%;
padding: 0.75rem 1rem;
border: 2px solid rgba(212, 165, 116, 0.2);
border-radius: 50px;
font-size: 0.95rem;
color: var(--cor-texto);
background: #fafafa;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
outline: none !important;
box-shadow: none !important;
font-family: inherit;
}
.search-input:focus {
outline: none !important;
box-shadow: none !important;
background: white;
border-color: var(--cor-primaria);
transform: translateY(-1px);
}
.search-input::placeholder {
color: #999;
font-weight: 400;
}
.search-btn {
position: absolute;
right: 0.75rem;
width: 20px;
height: 20px;
background: none;
border: none;
padding: 0;
cursor: pointer;
color: var(--cor-texto-secundario);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
}
.search-icon {
width: 100%;
height: 100%;
stroke-width: 2;
}
/* =================================
SEARCH SUGGESTIONS
================================= */
.search-suggestions {
position: absolute;
top: calc(100% + 0.5rem);
left: 0;
right: 0;
background: white;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
margin-top: 0.25rem;
max-height: 400px;
overflow-y: auto;
z-index: 1000;
display: none;
border: 1px solid rgba(212, 165, 116, 0.1);
animation: slideDown 0.2s ease-out;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.search-suggestions.active {
display: block;
}
.search-suggestions::-webkit-scrollbar {
width: 6px;
}
.search-suggestions::-webkit-scrollbar-track {
background: #f5f5f5;
border-radius: 3px;
}
.search-suggestions::-webkit-scrollbar-thumb {
background: var(--cor-primaria);
border-radius: 3px;
}
.suggestion-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
cursor: pointer;
transition: all 0.2s ease;
border-bottom: 1px solid #f5f5f5;
font-size: 0.875rem;
color: var(--cor-texto);
}
.suggestion-item:first-child {
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.suggestion-item:last-child {
border-bottom: none;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}
.suggestion-item:hover {
background: linear-gradient(90deg, var(--cor-secundaria) 0%, rgba(212, 165, 116, 0.05) 100%);
color: var(--cor-accent);
padding-left: 1.25rem;
}
/* =================================
SEARCH RESULTS - PRODUTOS
================================= */
.search-result-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.875rem 1rem;
cursor: pointer;
transition: all 0.2s ease;
border-bottom: 1px solid #f5f5f5;
text-decoration: none;
color: inherit;
}
.search-result-item:first-child {
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.search-result-item:last-child {
border-bottom: none;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}
.search-result-item:hover {
background: linear-gradient(90deg, var(--cor-secundaria) 0%, rgba(212, 165, 116, 0.05) 100%);
transform: translateX(4px);
}
.search-result-item.active {
background: linear-gradient(90deg, var(--cor-secundaria) 0%, rgba(212, 165, 116, 0.1) 100%);
transform: translateX(4px);
}
.search-result-image {
width: 50px;
height: 50px;
object-fit: cover;
border-radius: 8px;
flex-shrink: 0;
background: #f5f5f5;
}
.search-result-content {
flex: 1;
min-width: 0;
}
.search-result-name {
font-size: 0.875rem;
font-weight: 500;
color: var(--cor-texto);
margin: 0 0 0.25rem 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.search-result-price {
font-size: 0.75rem;
font-weight: 600;
color: var(--cor-primaria);
}
.search-loading {
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
color: var(--cor-texto-secundario);
font-size: 0.875rem;
}
.search-loading::before {
content: '';
width: 16px;
height: 16px;
border: 2px solid rgba(212, 165, 116, 0.2);
border-top-color: var(--cor-primaria);
border-radius: 50%;
animation: spin 0.6s linear infinite;
margin-right: 0.5rem;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.search-no-results {
padding: 1.5rem;
text-align: center;
color: var(--cor-texto-secundario);
font-size: 0.875rem;
}
.suggestion-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
stroke-width: 2;
color: var(--cor-texto-secundario);
transition: all 0.2s ease;
}
.suggestion-item:hover .suggestion-icon {
color: var(--cor-accent);
transform: scale(1.1);
}
.suggestion-item span {
flex: 1;
font-size: 0.875rem;
line-height: 1.5;
font-weight: 500;
}
/* =================================
CATEGORIES – Carrossel Departamentos (estilo exemplo)
================================= */
.categories.banners-extras.carrossel-departamentos {
padding-top: 60px;
padding-bottom: var(--spacing-2xl);
margin-bottom: 0;
background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
font-size: 12px;
line-height: normal;
color: var(--cor-texto, #201f1f);
}
.categories.carrossel-departamentos .container {
max-width: var(--container-max, 1200px);
margin: 0 auto;
padding: 0 10px;
position: relative;
}
/* Título no mesmo padrão de Lançamentos */
.titulo-categoria.titulo-departamentos {
margin: 0 0 1rem 0;
font-size: 1.125rem;
font-weight: 700;
color: var(--cor-texto);
}
.carrossel-departamentos-wrapper {
position: relative;
padding: 0 36px;
}
.carrossel-departamentos-wrapper .departamentos-prev {
left: 0;
}
.carrossel-departamentos-wrapper .departamentos-next {
right: 0;
}
/* Flickity viewport/slider */
#carrosselCategorias.flickity-enabled .flickity-viewport {
overflow: hidden;
}
#carrosselCategorias .flickity-slider {
display: flex;
align-items: stretch;
}
/* Item departamento – ~119px como no exemplo */
.carrossel-departamentos .banner-extra.banner-vitrine-departamento {
width: 119px;
min-width: 119px;
padding: 0 6px;
list-style: none;
}
.carrossel-departamentos .banner-extra a {
display: block;
text-decoration: none;
color: inherit;
}
.carrossel-departamentos .banner-extra img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: 50%;
background: #f0f0f0;
transition: transform 0.25s ease;
}
.carrossel-departamentos .banner-extra a:hover img {
transform: scale(1.05);
}
.departamento-placeholder {
width: 100%;
aspect-ratio: 1;
border-radius: 50%;
background: var(--gradiente-hero, linear-gradient(135deg, #e8e4df 0%, #d6cfc7 100%));
display: flex;
align-items: center;
justify-content: center;
}
.departamento-placeholder i {
font-size: 1.75rem !important;
color: rgba(255, 255, 255, 0.9) !important;
}
.departamento-titulo {
margin: 0.5rem 0 0 0;
padding: 0;
font-size: 12px;
line-height: 1.25;
color: var(--cor-texto, #201f1f);
text-align: center;
text-transform: lowercase;
}
.carrossel-departamentos .banner-extra:hover .departamento-titulo {
color: var(--cor-primaria);
}
/* Setas – mesmo padrão vitrine */
.carrossel-departamentos .vitrine-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
padding: 0;
border: none;
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-radius: 50%;
cursor: pointer;
color: var(--cor-primaria);
z-index: 10;
}
.carrossel-departamentos .vitrine-arrow:hover {
background: #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.carrossel-departamentos .vitrine-arrow svg {
width: 20px;
height: 20px;
display: block;
margin: 0 auto;
}
@media (max-width: 768px) {
.carrossel-departamentos-wrapper {
padding: 0 32px;
}
.carrossel-departamentos .banner-extra.banner-vitrine-departamento {
width: 100px;
min-width: 100px;
padding: 0 4px;
}
.carrossel-departamentos .vitrine-arrow {
width: 36px;
height: 36px;
}
.carrossel-departamentos .vitrine-arrow svg {
width: 16px;
height: 16px;
}
.departamento-titulo {
font-size: 11px;
}
.categories.carrossel-departamentos {
padding-top: 40px;
}
}
@media (max-width: 600px) {
.categories.carrossel-departamentos {
padding-top: 36px;
padding-bottom: var(--spacing-xl);
}
}
@media (max-width: 480px) {
.carrossel-departamentos .banner-extra.banner-vitrine-departamento {
width: 90px;
min-width: 90px;
}
.departamento-titulo {
font-size: 10px;
}
}
/* Grid legado (outras páginas, ex. categorias/index) */
.category-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--grid-gap-desktop);
width: 100%;
}
.card-link {
text-decoration: none;
color: inherit;
display: block;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-link:hover {
transform: translateY(-4px);
}
.card-link:focus {
outline: 2px solid var(--cor-primaria);
outline-offset: 4px;
border-radius: 16px;
}
.category-card {
position: relative;
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
height: 100%;
display: flex;
flex-direction: column;
border: 1px solid rgba(212, 165, 116, 0.1);
}
.card-link:hover .category-card {
box-shadow: 0 8px 24px rgba(212, 165, 116, 0.25);
border-color: var(--cor-primaria);
transform: translateY(-4px);
}
.category-image {
position: relative;
width: 100%;
height: 220px;
overflow: hidden;
background: var(--cor-secundaria);
}
.category-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-link:hover .category-image img {
transform: scale(1.1);
}
.category-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--gradiente-hero);
}
.category-placeholder i {
font-size: 3rem !important;
color: white !important;
opacity: 0.9;
}
.category-title {
padding: var(--space-5) var(--space-4);
margin: 0;
font-size: var(--text-md);
font-weight: 600;
color: var(--cor-accent);
text-align: center;
line-height: var(--text-md-lh);
flex: 1;
display: flex;
align-items: center;
justify-content: center;
transition: color var(--transition-fast);
}
.card-link:hover .category-title {
color: var(--cor-primaria);
}
/* Overlay no hover */
.category-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(212, 165, 116, 0.05) 0%, transparent 100%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
z-index: 1;
}
.card-link:hover .category-card::before {
opacity: 1;
}
/* Responsividade - Tablet (768px - 1024px) */
@media (max-width: 1024px) {
.category-grid {
grid-template-columns: repeat(4, 1fr);
gap: var(--grid-gap-desktop);
}
.category-image {
height: 200px;
}
}
/* Responsividade - Tablet Pequeno (600px - 768px) */
@media (max-width: 768px) {
.category-grid {
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
.category-image {
height: 180px;
}
.category-title {
padding: var(--space-4) var(--space-3);
font-size: var(--text-sm);
}
}
/* Responsividade - Mobile (480px - 600px) */
@media (max-width: 600px) {
.category-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--grid-gap-mobile);
}
.category-image {
height: 160px;
}
.category-title {
padding: var(--space-3) var(--space-2);
font-size: var(--text-sm);
}
.categories {
padding: var(--spacing-xl) 0;
}
}
/* Responsividade - Mobile Pequeno (< 480px) */
@media (max-width: 480px) {
.category-grid {
gap: var(--space-3);
}
.category-image {
height: 140px;
}
.category-title {
padding: var(--space-3) var(--space-2);
font-size: var(--text-xs);
}
}
/* =================================
PRODUCTS SECTION XODÓS (Premium UI/UX)
================================= */
.products.xodos-section {
padding: var(--spacing-2xl) 0;
background: var(--cor-primaria);
position: relative;
overflow: hidden;
}
.products.xodos-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--cor-primaria), transparent);
opacity: 0.3;
}
.products.xodos-section .container {
max-width: 1400px;
}
/* Título da Seção */
.xodos-section .section-title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
text-align: center;
margin: 0 0 3rem 0;
color: #ffffff;
letter-spacing: 0.05em;
text-transform: uppercase;
position: relative;
display: inline-block;
width: 100%;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.xodos-section .section-title::after {
content: '';
position: absolute;
bottom: -1rem;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 4px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
border-radius: 2px;
}
/* Grid de Produtos */
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--grid-gap-desktop);
width: 100%;
}
/* Grid específico para Xodós - Cards maiores e verticais */
.xodos-section .products-grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 2rem;
}
@media (min-width: 768px) {
.xodos-section .products-grid {
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 2.5rem;
}
}
@media (min-width: 1024px) {
.xodos-section .products-grid {
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 3rem;
}
}
/* Link do Produto */
.products-grid > a {
text-decoration: none;
color: inherit;
display: block;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
height: 100%;
}
.products-grid > a:hover {
transform: translateY(-6px);
}
.products-grid > a:focus {
outline: 2px solid var(--cor-primaria);
outline-offset: 4px;
border-radius: 16px;
}
/* Card de Produto - Premium */
.products-grid .product-card {
position: relative;
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
height: 100%;
display: flex;
flex-direction: column;
border: 1px solid rgba(212, 165, 116, 0.15);
overflow: visible;
}
/* Card na seção Xodós - Sem fundo branco, apenas imagem */
.xodos-section .product-card {
background: transparent;
border: none;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
overflow: visible;
display: block;
height: auto;
}
.xodos-section > a:hover .product-card {
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
transform: translateY(-8px) scale(1.02);
}
.products-grid > a:hover .product-card {
box-shadow: 0 12px 32px rgba(212, 165, 116, 0.3);
border-color: var(--cor-primaria);
transform: translateY(-6px);
}
/* Container da Imagem */
.products-grid .product-image {
position: relative;
width: 100%;
height: 280px; /* Fixed height for CLS prevention */
overflow: hidden;
background: var(--cor-secundaria);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
/* Imagem na seção Xodós - Proporção 9:16 */
.xodos-section .product-image {
height: 0;
padding-bottom: 177.78%; /* 16/9 = 1.7778 = 177.78% (proporção 9:16 invertida) */
border-radius: 16px;
background: var(--cor-secundaria);
}
.xodos-section .product-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.products-grid .product-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
loading: lazy; /* Performance: lazy loading */
}
.products-grid > a:hover .product-image img {
transform: scale(1.15) rotate(1deg);
}
/* Placeholder quando não há imagem */
.products-grid .product-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--gradiente-hero);
}
.products-grid .product-placeholder i {
font-size: 3.5rem !important;
color: white !important;
opacity: 0.9;
transition: transform 0.3s ease;
}
.products-grid > a:hover .product-placeholder i {
transform: scale(1.1) rotate(5deg);
}
/* Preço do Produto */
.products-grid .product-price {
padding: var(--space-6) var(--space-5);
margin: 0;
font-size: var(--heading-3);
font-weight: 700;
color: var(--cor-primaria);
text-align: center;
line-height: var(--heading-3-lh);
background: linear-gradient(135deg, var(--color-surface) 0%, #ffffff 100%);
border-top: var(--border-width) solid var(--color-border);
transition: all var(--transition-fast);
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.products-grid > a:hover .product-price {
color: var(--cor-accent);
background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
transform: scale(1.05);
}
/* Preço como badge na seção Xodós */
.xodos-section .product-price {
position: absolute;
bottom: 1rem;
right: 1rem;
padding: 0.75rem 1.25rem;
margin: 0;
font-size: 1.5rem;
font-weight: 700;
color: #ffffff;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(10px);
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
z-index: 10;
border: 2px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-align: center;
line-height: 1.2;
min-width: auto;
flex: none;
display: inline-block;
}
.xodos-section .product-price::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, var(--cor-primaria), var(--cor-accent));
opacity: 0.9;
border-radius: 12px;
z-index: -1;
}
.xodos-section > a:hover .product-price {
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
background: rgba(0, 0, 0, 0.85);
}
.xodos-section .product-card {
display: block;
height: auto;
}
/* Overlay no hover */
.products-grid .product-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(212, 165, 116, 0.05) 0%, transparent 100%);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
z-index: 1;
border-radius: 16px;
}
.products-grid > a:hover .product-card::before {
opacity: 1;
}
/* Badge "Em Destaque" (opcional, se houver) */
.products-grid .product-badge {
position: absolute;
top: 1rem;
right: 1rem;
background: var(--cor-primaria);
color: white;
padding: 0.375rem 0.75rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
z-index: 2;
box-shadow: 0 4px 12px rgba(212, 165, 116, 0.3);
}
/* Responsividade - Tablet (768px - 1024px) */
@media (max-width: 1024px) {
.products-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1.5rem;
}
.products-grid .product-image {
height: 240px;
}
.products-grid .product-price {
font-size: 1.25rem;
padding: 1.25rem 1rem;
}
}
/* Responsividade - Tablet Pequeno (600px - 768px) */
@media (max-width: 768px) {
.products-grid {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 1.25rem;
}
.products-grid .product-image {
height: 220px;
}
.products-grid .product-price {
font-size: 1.125rem;
padding: 1rem 0.875rem;
}
.xodos-section .section-title {
margin-bottom: 2rem;
}
}
/* Responsividade - Mobile (480px - 600px) */
@media (max-width: 600px) {
.products-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.products-grid .product-image {
height: 200px;
}
.products-grid .product-price {
font-size: 1rem;
padding: 0.875rem 0.75rem;
}
.products.xodos-section {
padding: var(--spacing-xl) 0;
}
}
/* Responsividade - Mobile Pequeno (< 480px) */
@media (max-width: 480px) {
.products-grid {
gap: 0.875rem;
}
.products-grid .product-image {
height: 180px;
}
.products-grid .product-price {
font-size: 0.95rem;
padding: 0.75rem 0.625rem;
}
.products-grid .product-placeholder i {
font-size: 2.5rem !important;
}
}
/* =================================
VITRINE LANÇAMENTOS
================================= */
.vitrine-lancamento-section {
padding: 20px 0;
background: #fff;
}
.vitrine-lancamento-section .container {
position: relative;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 10px;
}
.vitrine-carrossel-wrapper {
position: relative;
padding: 0 36px;
}
.titulo-categoria.vitrine-lancamento {
margin: 0 0 1rem 0;
font-size: 1.125rem;
font-weight: 700;
color: var(--cor-texto);
}
.vitrine-carrossel.vitrine-lancamento .flickity-viewport,
.vitrine-carrossel.vitrine-xodos .flickity-viewport {
overflow: hidden;
}
.vitrine-carrossel.vitrine-lancamento .flickity-slider,
.vitrine-carrossel.vitrine-xodos .flickity-slider {
display: flex;
align-items: stretch;
}
/* Garantir visibilidade dos elementos antes do Flickity inicializar */
.vitrine-carrossel .listagem-item {
visibility: visible !important;
opacity: 1 !important;
display: block !important;
}
/* Fallback: garantir que os itens sejam visíveis mesmo sem Flickity */
.vitrine-carrossel:not(.flickity-enabled) {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
overflow: visible;
}
.vitrine-carrossel:not(.flickity-enabled) .listagem-item {
flex: 0 0 auto;
width: 293px;
visibility: visible !important;
opacity: 1 !important;
display: block !important;
}
/* Override Flickity hidden state */
.vitrine-carrossel .flickity-hidden {
visibility: visible !important;
opacity: 1 !important;
}
/* Override qualquer estilo que possa estar escondendo os cards */
.vitrine-carrossel .listagem-item,
.vitrine-carrossel .listagem-item *,
.vitrine-carrossel .product-card-premium-standard,
.vitrine-carrossel .product-card-premium-standard * {
visibility: visible !important;
opacity: 1 !important;
}
.vitrine-carrossel .listagem-item {
width: 293px;
min-width: 293px;
padding: 0 6px;
visibility: visible !important;
opacity: 1 !important;
display: block !important;
}
/* Mobile: ajustar largura dos cards para ocupar melhor o espaço */
@media (max-width: 768px) {
.vitrine-carrossel .listagem-item {
width: calc(100% - 12px);
min-width: calc(100% - 12px);
max-width: 100%;
}
}
.listagem-item-wrap {
position: relative;
background: #fff;
border-radius: var(--radius-sm);
overflow: hidden;
border: 1px solid rgba(144, 144, 144, 0.12);
transition: var(--transicao-padrao);
height: 100%;
display: flex;
flex-direction: column;
}
.listagem-item-wrap:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border-color: rgba(212, 165, 116, 0.25);
}
.produto-sobrepor {
position: absolute;
inset: 0;
z-index: 1;
}
.vitrine-carrossel .imagem-produto {
position: relative;
width: 100%;
aspect-ratio: 1;
background: #f5f5f5;
overflow: hidden;
}
.vitrine-carrossel .imagem-produto img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.listagem-item-wrap:hover .imagem-produto img {
transform: scale(1.05);
}
.vitrine-carrossel .product-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #eee;
}
.vitrine-carrossel .product-placeholder i {
font-size: 2.5rem !important;
color: #bbb !important;
}
.vitrine-carrossel .info-produto {
padding: 0.75rem 1rem;
flex: 1;
}
.vitrine-carrossel .nome-produto {
display: block;
font-size: 13px;
line-height: 1.35;
color: var(--cor-texto);
text-decoration: none;
margin-bottom: 0.5rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.vitrine-carrossel .nome-produto:hover {
color: var(--cor-texto-hover);
}
.vitrine-carrossel .precos-wrap {
margin: 0;
}
.vitrine-carrossel .preco-produto {
font-size: 14px;
}
.vitrine-carrossel .desconto-a-vista .titulo {
color: var(--cor-primaria);
font-weight: 600;
}
.vitrine-carrossel .desconto-a-vista span {
font-size: 12px;
color: var(--cor-texto-secundario);
}
.vitrine-carrossel .acoes-produto {
padding: 0 1rem 1rem;
position: relative;
z-index: 2;
}
.vitrine-carrossel .botao-comprar {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
padding: 0.5rem 1rem;
font-size: 13px;
font-weight: 500;
color: var(--cor-texto-botao);
background: var(--cor-fundo-botao);
border: none;
border-radius: 6px;
text-decoration: none;
transition: var(--transicao-padrao);
cursor: pointer;
}
.vitrine-carrossel .botao-comprar:hover {
background: var(--cor-fundo-botao-hover);
color: var(--cor-texto-botao-hover);
}
.vitrine-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
padding: 0;
border: none;
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-radius: 50%;
cursor: pointer;
color: var(--cor-primaria);
z-index: 10;
transition: var(--transicao-padrao);
}
.vitrine-arrow:hover {
background: #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.vitrine-arrow svg {
width: 20px;
height: 20px;
display: block;
margin: 0 auto;
}
.vitrine-carrossel-wrapper .vitrine-prev {
left: 0;
}
.vitrine-carrossel-wrapper .vitrine-next {
right: 0;
}
@media (max-width: 768px) {
.vitrine-carrossel-wrapper {
padding: 0 32px;
}
.vitrine-carrossel .listagem-item {
width: calc(100% - 12px);
min-width: calc(100% - 12px);
max-width: 100%;
padding: 0 4px;
}
.vitrine-carrossel-wrapper .vitrine-prev {
left: 4px;
}
.vitrine-carrossel-wrapper .vitrine-next {
right: 4px;
}
.vitrine-arrow {
width: 36px;
height: 36px;
}
.vitrine-arrow svg {
width: 16px;
height: 16px;
}
}
@media (max-width: 480px) {
.vitrine-carrossel .listagem-item {
width: calc(100% - 12px);
min-width: calc(100% - 12px);
max-width: 100%;
}
.vitrine-carrossel .info-produto {
padding: 0.5rem 0.75rem;
}
.vitrine-carrossel .nome-produto {
font-size: 12px;
}
.vitrine-carrossel .preco-produto {
font-size: 13px;
}
}
/* Xodós: vitrine no mesmo layout de Lançamentos, fundo mantido */
.vitrine-xodos-section .titulo-categoria.vitrine-xodos {
color: #fff;
text-align: center;
margin-bottom: 1.5rem;
font-size: clamp(1.25rem, 3vw, 1.75rem);
font-weight: 700;
letter-spacing: 0.05em;
}
.vitrine-xodos-section .vitrine-arrow {
background: rgba(255, 255, 255, 0.95);
color: var(--cor-primaria);
}
.vitrine-xodos-section .vitrine-arrow:hover {
background: #fff;
color: var(--cor-primaria);
}
/* =================================
INSTAGRAM SECTION (Premium UI/UX)
================================= */
.instagram-section {
padding: var(--spacing-2xl) 0;
background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
position: relative;
overflow: hidden;
}
.instagram-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--cor-primaria), transparent);
opacity: 0.3;
}
.instagram-section .container {
max-width: 1400px;
}
/* Grid de Postagens do Instagram - 5 colunas */
.instagram-posts-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1.5rem;
width: 100%;
margin-bottom: 2.5rem;
}
/* Item de Postagem do Instagram */
.instagram-post {
position: relative;
display: block;
text-decoration: none;
color: inherit;
border-radius: 12px;
overflow: hidden;
background: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
aspect-ratio: 1 / 1;
border: 1px solid rgba(212, 165, 116, 0.1);
}
.instagram-post:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 8px 24px rgba(212, 165, 116, 0.25);
border-color: var(--cor-primaria);
z-index: 1;
}
/* Imagem da Postagem */
.instagram-post-image {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background: var(--cor-secundaria);
}
.instagram-post-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.instagram-post:hover .instagram-post-image img {
transform: scale(1.15);
}
/* Overlay no hover com ícone do Instagram */
.instagram-post::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(212, 165, 116, 0.9) 0%, rgba(212, 165, 116, 0.8) 100%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
.instagram-post::before {
content: '📷';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 2.5rem;
opacity: 0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
z-index: 2;
}
.instagram-post:hover::after {
opacity: 1;
}
.instagram-post:hover::before {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
/* Placeholder quando não há imagem */
.instagram-post-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--gradiente-hero);
}
.instagram-post-placeholder i {
font-size: 2.5rem !important;
color: white !important;
opacity: 0.8;
}
/* Botão "Seguir no Instagram" - Premium */
.instagram-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 1rem 2rem;
font-size: 1rem;
font-weight: 600;
color: white;
background: linear-gradient(135deg, #833AB4 0%, #FD1D1D 50%, #FCAF45 100%);
border-radius: 50px;
text-decoration: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 16px rgba(131, 58, 180, 0.3);
border: none;
cursor: pointer;
position: relative;
overflow: hidden;
margin: 0 auto;
min-width: 220px;
letter-spacing: 0.5px;
text-transform: uppercase;
font-size: 0.9rem;
}
.instagram-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s ease;
}
.instagram-btn:hover::before {
left: 100%;
}
.instagram-btn:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: 0 8px 24px rgba(131, 58, 180, 0.4);
}
.instagram-btn:active {
transform: translateY(0) scale(1);
box-shadow: 0 4px 12px rgba(131, 58, 180, 0.3);
}
.instagram-btn:focus {
outline: 2px solid var(--cor-primaria);
outline-offset: 4px;
}
/* Ícone do Instagram no botão */
.instagram-btn::after {
content: '📷';
font-size: 1.25rem;
line-height: 1;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}
/* Container do botão centralizado */
.instagram-section .container:has(.instagram-btn) {
text-align: center;
}
/* Responsividade - Tablet (768px - 1024px) */
@media (max-width: 1024px) {
.instagram-posts-grid {
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
}
.instagram-btn {
padding: 0.875rem 1.75rem;
font-size: 0.875rem;
min-width: 200px;
}
}
/* Responsividade - Tablet Pequeno (600px - 768px) */
@media (max-width: 768px) {
.instagram-posts-grid {
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.instagram-btn {
padding: 0.875rem 1.5rem;
font-size: 0.85rem;
min-width: 180px;
}
.instagram-section {
padding: var(--spacing-xl) 0;
}
}
/* Responsividade - Mobile (480px - 600px) */
@media (max-width: 600px) {
.instagram-posts-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.875rem;
}
.instagram-btn {
padding: 0.75rem 1.25rem;
font-size: 0.8rem;
min-width: 160px;
}
}
/* Responsividade - Mobile Pequeno (< 480px) */
@media (max-width: 480px) {
.instagram-posts-grid {
gap: 0.75rem;
}
.instagram-post-placeholder i {
font-size: 2rem !important;
}
}
/* =================================
BANNER SECTION COM SPLIDE.JS
================================= */
.banner-section {
position: relative;
z-index: 1;
margin-top: 80px; /* Altura do header */
}
.splide {
position: relative;
overflow: hidden;
}
.banner-slide {
position: relative;
height: 500px;
display: flex;
align-items: center;
overflow: hidden;
background: var(--gradiente-hero);
}
.banner-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 3;
display: flex;
align-items: center;
padding: 0 var(--espaco-container);
max-width: var(--max-width);
margin: 0 auto;
}
.banner-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(0, 0, 0, 0.7) 0%,
rgba(0, 0, 0, 0.4) 50%,
rgba(0, 0, 0, 0.6) 100%
);
z-index: 1;
}
.banner-text {
position: relative;
z-index: 2;
max-width: 600px;
color: white;
}
.banner-tag {
display: inline-block;
background: var(--cor-primaria);
color: white;
padding: 0.5rem 1rem;
border-radius: 25px;
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.banner-text h2 {
font-size: var(--heading-1);
line-height: var(--heading-1-lh);
font-weight: 700;
margin-bottom: var(--space-4);
letter-spacing: var(--letter-spacing-tight);
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
max-width: var(--text-max-width);
}
.banner-text p {
font-size: var(--text-lg);
line-height: var(--text-lg-lh);
margin-bottom: var(--space-8);
color: rgba(255, 255, 255, 0.9);
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
max-width: var(--text-max-width);
}
.banner-btn {
display: inline-block;
background: var(--cor-accent);
color: white;
padding: var(--space-4) var(--space-8);
border-radius: var(--radius-pill);
text-decoration: none;
font-weight: 600;
font-size: var(--text-md);
line-height: var(--text-md-lh);
transition: var(--transicao-padrao);
box-shadow: var(--shadow-md);
position: relative;
overflow: hidden;
min-height: 44px; /* Accessibility: minimum hit target */
}
.banner-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.banner-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.banner-btn:hover::before {
left: 100%;
}
.banner-image {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.banner-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* Estilos para banners dinâmicos */
.banner-link {
display: block;
text-decoration: none;
color: inherit;
width: 100%;
height: 100%;
}
.banner-link:hover {
text-decoration: none;
color: inherit;
}
.banner-fallback {
min-height: 400px;
}
.banner-text .banner-btn {
transition: all 0.3s ease;
}
.banner-slide:hover .banner-btn {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
/* Splide Navigation Arrows */
.splide__arrow {
background: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.3);
color: white;
width: 50px;
height: 50px;
border-radius: 50%;
backdrop-filter: blur(10px);
transition: var(--transicao-padrao);
display: flex;
align-items: center;
justify-content: center;
}
.splide__arrow:hover {
background: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.5);
transform: scale(1.1);
}
.splide__arrow:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.splide__arrow i {
font-size: 1.2rem;
}
.splide__arrow--prev {
left: 2rem;
}
.splide__arrow--next {
right: 2rem;
}
/* Splide Pagination */
.splide__pagination {
bottom: 2rem !important;
left: 50% !important;
transform: translateX(-50%) !important;
display: flex !important;
gap: 0.5rem;
}
.splide__pagination__page {
width: 12px !important;
height: 12px !important;
background: rgba(255, 255, 255, 0.4) !important;
border-radius: 50% !important;
transition: var(--transicao-padrao) !important;
border: 2px solid rgba(255, 255, 255, 0.6) !important;
}
.splide__pagination__page.is-active {
background: white !important;
transform: scale(1.2) !important;
}
.splide__slide[aria-hidden="true"] a {
pointer-events: none;
tabindex: -1;
}
.splide__slide:not([aria-hidden="true"]) a {
pointer-events: auto;
tabindex: 0;
}
/* =================================
HERO SECTION
================================= */
.hero {
min-height: 100vh;
background: var(--gradiente-hero);
display: flex;
align-items: center;
position: relative;
overflow: hidden;
padding-top: 100px;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.hero-content {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--espaco-container);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
position: relative;
z-index: 2;
}
.hero-text h1 {
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: 700;
margin-bottom: 1.5rem;
color: white;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
line-height: 1.2;
}
.hero-text p {
font-size: clamp(1rem, 2vw, 1.2rem);
margin-bottom: 2rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.7;
}
.cta-button {
display: inline-block;
padding: 1rem 2.5rem;
background: var(--cor-accent);
color: white;
text-decoration: none;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
transition: var(--transicao-padrao);
box-shadow: var(--sombra-suave);
position: relative;
overflow: hidden;
}
.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 12px 40px rgba(139, 90, 60, 0.3);
}
.cta-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.cta-button:hover::before {
left: 100%;
}
/* Floating Cards */
.hero-image {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.floating-cards {
position: relative;
width: 100%;
height: 400px;
}
/* Product cards normais - reset position para evitar float */
.product-card {
position: static;
}
/* Apenas product-cards dentro de floating-cards têm position absolute */
.floating-cards .product-card {
position: absolute !important;
width: 180px;
height: 220px;
background: white;
border-radius: var(--border-radius);
box-shadow: var(--sombra-card);
overflow: hidden;
transition: var(--transicao-padrao);
animation: float 6s ease-in-out infinite;
}
.floating-cards .product-card:nth-child(1) {
top: 0;
left: 0;
animation-delay: 0s;
}
.floating-cards .product-card:nth-child(2) {
top: 50px;
right: 0;
animation-delay: 2s;
}
.floating-cards .product-card:nth-child(3) {
bottom: 0;
left: 50px;
animation-delay: 4s;
}
@keyframes float {
0%, 100% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(1deg);
}
}
.card-image {
height: 60%;
background: var(--cor-secundaria);
display: flex;
align-items: center;
justify-content: center;
color: var(--cor-accent);
}
.card-image > i {
font-size: 2rem !important;
display: block;
line-height: 1;
}
.card-content {
padding: 1rem;
text-align: center;
}
.card-content h3 {
font-size: 0.9rem;
color: var(--cor-accent);
margin-bottom: 0.5rem;
font-weight: 600;
}
.card-content p {
font-size: 0.8rem;
color: var(--cor-texto-secundario);
}
/* =================================
FILTROS
================================= */
.filtros {
background: var(--cor-secundaria);
padding: 2rem 0;
position: sticky;
top: 70px; /* Ajustado para altura do header */
z-index: 50; /* Reduzido para não sobrepor outros elementos */
border-bottom: 1px solid rgba(212, 165, 116, 0.2);
}
.filtros-container {
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.filtro-tag {
background: white;
border: 2px solid var(--cor-primaria);
color: var(--cor-accent);
padding: 0.5rem 1.5rem;
border-radius: 25px;
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
transition: var(--transicao-padrao);
white-space: nowrap;
}
.filtro-tag:hover,
.filtro-tag.active {
background: var(--cor-fundo-botao);
color: var(--cor-texto-botao);
transform: translateY(-2px);
}
/* =================================
CATEGORIAS
================================= */
.categorias {
padding: var(--espaco-secao) 0;
background: #fafafa;
}
.categorias-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.categoria-card {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: var(--sombra-card);
transition: var(--transicao-padrao);
cursor: pointer;
height: 100%;
}
.categoria-card:hover {
transform: translateY(-5px);
box-shadow: var(--sombra-hover);
}
.categoria-image {
height: 200px;
background: var(--gradiente-hero);
display: flex;
align-items: center;
justify-content: center;
color: white;
position: relative;
overflow: hidden;
}
.categoria-image::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.1);
}
.categoria-image i {
position: relative;
z-index: 2;
transition: transform 0.3s ease;
font-size: 3rem !important;
display: block;
line-height: 1;
}
.categoria-card:hover .categoria-image i {
transform: scale(1.1);
}
.categoria-info {
padding: 1.5rem;
}
.categoria-info h3 {
font-size: 1.3rem;
color: var(--cor-accent);
margin-bottom: 0.5rem;
font-weight: 600;
}
.categoria-info p {
color: var(--cor-texto-secundario);
font-size: 0.95rem;
line-height: 1.6;
}
/* =================================
PRODUTOS EM DESTAQUE
================================= */
.destaques {
padding: var(--espaco-secao) 0;
background: white;
}
.produtos-destaque {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.produto-destaque {
background: white;
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--sombra-card);
transition: var(--transicao-padrao);
cursor: pointer;
height: 100%;
}
.produto-destaque:hover {
transform: scale(1.02);
box-shadow: var(--sombra-hover);
}
.produto-image {
height: 250px;
background: var(--cor-secundaria);
display: flex;
align-items: center;
justify-content: center;
color: var(--cor-accent);
position: relative;
overflow: hidden;
}
.produto-image i {
font-size: 2.5rem !important;
display: block;
line-height: 1;
}
.produto-image::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform 0.6s ease;
}
.produto-destaque:hover .produto-image::before {
transform: translateX(100%);
}
.produto-info {
padding: 1.5rem;
}
.produto-info h4 {
font-size: 1.1rem;
color: var(--cor-accent);
margin-bottom: 0.5rem;
font-weight: 600;
}
.produto-info p {
color: var(--cor-texto-secundario);
font-size: 0.9rem;
margin-bottom: 1rem;
line-height: 1.5;
}
.produto-preco {
font-size: 1.2rem;
font-weight: bold;
color: var(--cor-primaria);
}
/* =================================
LISTA DE PRODUTOS
================================= */
.produtos-lista {
padding: var(--espaco-secao) 0;
background: #fafafa;
margin-top: -1px;
}
.produtos-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.produto-card {
background: white;
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--sombra-card);
transition: var(--transicao-padrao);
cursor: pointer;
position: relative;
}
.produto-card:hover {
transform: translateY(-5px);
box-shadow: var(--sombra-hover);
}
.produto-card-image {
height: 200px;
background: var(--cor-secundaria);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.produto-card-galeria {
position: absolute;
top: 0.5rem;
right: 0.5rem;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 0.2rem 0.6rem;
border-radius: 15px;
font-size: 0.75rem;
display: flex;
align-items: center;
gap: 0.3rem;
}
.produto-card-galeria i {
font-size: 0.7rem;
}
.produto-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.produto-card-info {
padding: 1rem;
}
.produto-card-nome {
font-size: 1rem;
color: var(--cor-accent);
margin-bottom: 0.5rem;
font-weight: 600;
line-height: 1.3;
}
.produto-card-preco {
font-size: 1.2rem;
color: var(--cor-primaria);
font-weight: bold;
}
.produtos-vazio {
text-align: center;
padding: 4rem 0;
color: var(--cor-texto-secundario);
}
.categoria-selecionada {
color: var(--cor-primaria);
font-weight: 500;
margin-top: 0.5rem;
}
/* =================================
SEÇÃO SOBRE
================================= */
.sobre {
padding: var(--espaco-secao) 0;
background: var(--cor-secundaria);
}
.sobre-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.sobre-text h2 {
font-size: clamp(2rem, 4vw, 2.5rem);
color: var(--cor-accent);
margin-bottom: 1.5rem;
font-weight: 700;
}
.sobre-text p {
font-size: 1.1rem;
color: var(--cor-texto-secundario);
margin-bottom: 1.5rem;
line-height: 1.7;
}
.diferenciais {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-top: 2rem;
}
.diferencial {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.diferencial i {
font-size: 1.5rem;
color: var(--cor-primaria);
margin-top: 0.25rem;
flex-shrink: 0;
}
.diferencial h4 {
font-size: 1.1rem;
color: var(--cor-accent);
margin-bottom: 0.5rem;
font-weight: 600;
}
.diferencial p {
font-size: 0.95rem;
color: var(--cor-texto-secundario);
line-height: 1.5;
margin: 0;
}
.sobre-image {
display: flex;
align-items: center;
justify-content: center;
}
.image-placeholder {
width: 100%;
height: 300px;
background: white;
border-radius: var(--border-radius);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: var(--sombra-card);
transition: var(--transicao-padrao);
}
.image-placeholder:hover {
transform: scale(1.02);
}
.image-placeholder i {
font-size: 4rem;
color: var(--cor-primaria);
margin-bottom: 1rem;
}
.image-placeholder p {
font-size: 1.1rem;
color: var(--cor-accent);
font-weight: 600;
text-align: center;
}
/* =================================
FOOTER
================================= */
.footer {
background: var(--cor-accent);
color: white;
padding: 3rem 0 1rem;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.footer-section h3 {
margin-bottom: 1rem;
color: var(--cor-primaria);
font-size: 1.2rem;
font-weight: 600;
}
.footer-section p {
margin-bottom: 0.5rem;
font-size: 0.95rem;
line-height: 1.6;
}
.footer-section a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: var(--transicao-padrao);
}
.footer-section a:hover {
color: var(--cor-primaria);
}
.social-links {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.social-links a {
color: white;
font-size: 1.5rem;
transition: var(--transicao-padrao);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
}
.social-links a:hover {
color: var(--cor-primaria);
background: rgba(212, 165, 116, 0.2);
transform: translateY(-2px);
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.2);
padding-top: 1rem;
margin-top: 2rem;
text-align: center;
}
.footer-bottom p {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.7);
}
/* =================================
FOOTER PROFISSIONAL (Premium UI/UX)
================================= */
.main-footer {
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
color: #e0e0e0;
position: relative;
overflow: hidden;
}
.main-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(212, 165, 116, 0.5), transparent);
}
/* Footer Top */
.footer-top {
padding: 3rem 0 2rem;
position: relative;
z-index: 1;
}
.footer-top .container {
max-width: 1400px;
}
/* Grid do Footer */
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr;
gap: 3rem;
margin-bottom: 2rem;
}
/* Colunas do Footer */
.footer-column {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
/* Coluna da Marca */
.footer-brand {
max-width: 350px;
}
.footer-logo {
margin-bottom: 0.5rem;
}
.footer-logo-img {
max-width: 150px;
height: auto;
filter: brightness(0) invert(1);
opacity: 0.9;
}
.footer-logo-text {
font-size: 1.75rem;
font-weight: 700;
color: white;
margin: 0;
letter-spacing: -0.02em;
}
.footer-description {
font-size: 0.95rem;
line-height: 1.7;
color: rgba(255, 255, 255, 0.7);
margin: 0;
max-width: 320px;
}
/* Redes Sociais do Footer */
.footer-social {
display: flex;
gap: 0.75rem;
margin-top: 0.5rem;
}
.footer-social .social-link {
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(255, 255, 255, 0.1);
font-size: 1.125rem;
}
.footer-social .social-link:hover {
background: var(--cor-fundo-botao-hover);
color: var(--cor-texto-botao-hover);
transform: translateY(-3px) scale(1.1);
border-color: var(--cor-primaria);
box-shadow: 0 4px 12px rgba(212, 165, 116, 0.3);
}
.footer-social .social-link.instagram:hover {
background: linear-gradient(135deg, #833AB4, #FD1D1D, #FCAF45);
}
.footer-social .social-link.facebook:hover {
background: #1877F2;
}
.footer-social .social-link.whatsapp:hover {
background: #25D366;
}
.footer-social .social-link i {
font-size: 1.125rem !important;
}
/* Títulos das Colunas */
.footer-title {
font-size: 1.125rem;
font-weight: 700;
color: white;
margin: 0 0 1rem 0;
letter-spacing: 0.5px;
text-transform: uppercase;
position: relative;
padding-bottom: 0.75rem;
}
.footer-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 2px;
background: var(--cor-primaria);
border-radius: 1px;
}
/* Lista de Links */
.footer-links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.footer-links li {
margin: 0;
}
.footer-links a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
font-size: 0.95rem;
transition: all 0.25s ease;
display: inline-block;
position: relative;
padding-left: 0;
}
.footer-links a::before {
content: '→';
position: absolute;
left: -20px;
opacity: 0;
transition: all 0.25s ease;
color: var(--cor-primaria);
}
.footer-links a:hover {
color: white;
padding-left: 20px;
transform: translateX(5px);
}
.footer-links a:hover::before {
opacity: 1;
left: 0;
}
/* Informações de Contato */
.footer-contact {
display: flex;
flex-direction: column;
gap: 1rem;
}
.contact-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
color: rgba(255, 255, 255, 0.7);
font-size: 0.95rem;
line-height: 1.6;
}
.contact-item svg {
flex-shrink: 0;
margin-top: 0.125rem;
color: var(--cor-primaria);
width: 18px;
height: 18px;
}
.contact-item a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: color 0.25s ease;
}
.contact-item a:hover {
color: white;
}
.contact-item div {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.contact-item span {
color: rgba(255, 255, 255, 0.8);
}
.contact-item small {
color: rgba(255, 255, 255, 0.5);
font-size: 0.85rem;
}
/* Footer Bottom */
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 2rem 0;
background: rgba(0, 0, 0, 0.2);
position: relative;
z-index: 1;
}
.footer-bottom .container {
max-width: 1400px;
}
.footer-bottom-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
flex-wrap: wrap;
}
/* Copyright */
.footer-copyright {
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.footer-copyright p {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.7);
margin: 0;
}
.footer-copyright small {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.5);
}
/* Formas de Pagamento */
.footer-payment {
display: flex;
align-items: center;
gap: 1rem;
}
.payment-label {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.6);
font-weight: 500;
}
.payment-methods {
display: flex;
align-items: center;
gap: 0.75rem;
}
.payment-icon {
width: 40px;
height: 28px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
transition: all 0.25s ease;
font-size: 0.7rem;
font-weight: 600;
color: white;
text-align: center;
}
.payment-icon:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.payment-icon.pix {
background: linear-gradient(135deg, #32BCAD 0%, #1e8e82 100%);
border-color: #32BCAD;
}
/* Selos de Segurança */
.footer-security {
display: flex;
align-items: center;
}
.security-badges {
display: flex;
align-items: center;
gap: 1rem;
}
.security-badge {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.875rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
color: rgba(255, 255, 255, 0.8);
font-size: 0.85rem;
font-weight: 500;
transition: all 0.25s ease;
}
.security-badge:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--cor-primaria);
transform: translateY(-2px);
}
.security-badge svg {
width: 18px;
height: 18px;
color: var(--cor-primaria);
flex-shrink: 0;
}
.security-badge span {
white-space: nowrap;
}
/* Responsividade - Tablet (768px - 1024px) */
@media (max-width: 1024px) {
.footer-grid {
grid-template-columns: 2fr 1fr 1fr;
gap: 2.5rem;
}
.footer-column:last-child {
grid-column: 1 / -1;
}
}
/* Responsividade - Tablet Pequeno (600px - 768px) */
@media (max-width: 768px) {
.footer-top {
padding: 2.5rem 0 1.5rem;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.footer-brand {
max-width: 100%;
grid-column: 1 / -1;
}
.footer-bottom-content {
flex-direction: column;
text-align: center;
gap: 1.5rem;
}
.footer-payment,
.footer-security {
justify-content: center;
}
}
/* Responsividade - Mobile (< 600px) */
@media (max-width: 600px) {
.footer-top {
padding: 2rem 0 1.5rem;
}
.footer-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.footer-brand {
text-align: center;
}
.footer-description {
text-align: center;
max-width: 100%;
}
.footer-social {
justify-content: center;
}
.footer-title {
text-align: center;
}
.footer-title::after {
left: 50%;
transform: translateX(-50%);
}
.footer-links {
align-items: center;
}
.footer-contact {
align-items: center;
}
.contact-item {
justify-content: center;
text-align: center;
}
.footer-bottom {
padding: 1.5rem 0;
}
}
/* =================================
PRODUCT DETAILS PAGE (Premium UI/UX)
================================= */
.product-details {
padding: var(--spacing-2xl) 0;
background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
}
.product-details .container {
max-width: 1400px;
}
/* Layout Principal - Imagem à Esquerda, Info à Direita */
.product-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-12);
margin-bottom: var(--space-12);
}
/* Container de Imagens */
.product-images {
display: flex;
gap: var(--space-4);
position: relative;
}
@media (min-width: 769px) {
.product-images {
overflow: visible;
}
}
/* Thumbnails - Lista Vertical à Esquerda */
.product-thumbnails {
display: flex;
flex-direction: column;
gap: var(--space-3);
flex-shrink: 0;
max-height: 600px;
overflow-y: auto;
padding-right: var(--space-2);
scrollbar-width: thin;
scrollbar-color: var(--cor-primaria) #f0f0f0;
}
.product-thumbnails::-webkit-scrollbar {
width: 6px;
}
.product-thumbnails::-webkit-scrollbar-track {
background: #f0f0f0;
border-radius: 3px;
}
.product-thumbnails::-webkit-scrollbar-thumb {
background: var(--cor-primaria);
border-radius: 3px;
}
.product-thumbnails::-webkit-scrollbar-thumb:hover {
background: var(--cor-accent);
}
/* Thumbnail Individual */
.product-thumbnails .thumbnail {
width: 80px; /* Fixed width */
height: 80px; /* Fixed height for CLS prevention */
object-fit: cover;
border-radius: var(--radius-sm);
border: 2px solid transparent;
cursor: pointer;
transition: all var(--transition-smooth);
background: white;
padding: var(--space-1);
opacity: 0.7;
loading: lazy; /* Performance: lazy loading */
}
.product-thumbnails .thumbnail:hover {
opacity: 1;
border-color: var(--cor-primaria);
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(212, 165, 116, 0.3);
}
.product-thumbnails .thumbnail.active {
opacity: 1;
border-color: var(--cor-accent);
box-shadow: 0 4px 16px rgba(212, 165, 116, 0.4);
transform: scale(1.08);
}
/* Imagem Principal */
.product-main-image {
position: relative;
flex: 1;
background: white;
border-radius: 16px;
overflow: visible;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
aspect-ratio: 1 / 1;
max-height: 600px;
display: flex;
align-items: center;
justify-content: center;
}
/* Apenas a imagem principal (filho direto); a imagem da lente fica com tamanho definido pelo JS */
.product-main-image > img {
width: 100%;
height: 100%;
object-fit: contain;
transition: transform 0.3s ease;
}
.product-main-image:hover > img {
transform: scale(1.02);
}
/* Lente de Zoom (Desktop) */
.product-zoom-lens {
display: none;
position: absolute;
left: calc(100% + 1rem);
top: 50%;
transform: translateY(-50%);
width: 400px;
height: 400px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
background: white;
z-index: 10;
pointer-events: none;
border: 2px solid rgba(212, 165, 116, 0.3);
}
.product-zoom-lens.active {
display: block;
}
.product-zoom-lens-image-container {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
/* Dimensões e posição via JS (trecho ampliado); anular max-width global para a imagem poder ser maior que a lente */
.product-zoom-lens-image {
position: absolute;
top: 0;
left: 0;
max-width: none;
max-height: none;
transform-origin: top left;
will-change: transform;
object-fit: fill;
object-position: top left;
}
@media (min-width: 769px) {
.product-main-image {
cursor: crosshair;
}
.product-images {
overflow: visible;
}
}
@media (max-width: 768px) {
.product-main-image {
cursor: pointer;
overflow: hidden;
}
.product-zoom-lens {
display: none !important;
}
}
/* Modal de Zoom */
.product-zoom-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
opacity: 0;
transition: opacity 0.3s ease;
}
.product-zoom-modal.active {
display: flex;
opacity: 1;
}
.product-zoom-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(4px);
}
.product-zoom-content {
position: relative;
z-index: 10000;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
}
.product-zoom-image-container {
position: relative;
max-width: 90vw;
max-height: 90vh;
overflow: hidden;
}
.product-zoom-image {
max-width: 100%;
max-height: 90vh;
object-fit: contain;
transition: transform 0.1s ease-out;
}
.product-zoom-close {
position: absolute;
top: 1rem;
right: 1rem;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
color: #333;
z-index: 10001;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.product-zoom-close:hover {
background: #fff;
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
/* Desktop: Zoom que segue o mouse */
@media (min-width: 769px) {
.product-zoom-image-container {
width: 500px;
height: 500px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
position: relative;
background: #fff;
}
.product-zoom-image {
position: absolute;
top: 0;
left: 0;
transform-origin: top left;
will-change: transform;
}
}
/* Mobile: Modal fullscreen */
@media (max-width: 768px) {
.product-zoom-content {
padding: 1rem;
}
.product-zoom-image-container {
width: 100%;
max-width: 100%;
}
.product-zoom-image {
width: 100%;
max-height: 90vh;
}
.product-zoom-close {
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
}
}
/* Botão de Zoom */
.zoom-btn {
position: absolute;
bottom: 1rem;
right: 1rem;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(212, 165, 116, 0.2);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
color: var(--cor-accent);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 2;
}
.zoom-btn:hover {
background: var(--cor-fundo-botao-hover);
color: var(--cor-texto-botao-hover);
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(212, 165, 116, 0.4);
}
.zoom-btn svg {
width: 20px;
height: 20px;
}
/* Informações do Produto */
.product-info {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
/* Título do Produto */
.product-title {
font-size: var(--heading-3);
line-height: var(--heading-3-lh);
font-weight: 700;
color: var(--cor-accent);
margin: 0;
letter-spacing: var(--letter-spacing-tight);
}
/* Preço do Produto */
.product-pricing {
padding: var(--space-6) 0;
border-top: 2px solid var(--color-border);
border-bottom: 2px solid var(--color-border);
}
.current-price {
font-size: var(--text-lg);
line-height: var(--text-lg-lh);
font-weight: 700;
color: var(--cor-primaria);
display: block;
text-align: center;
}
.product-pricing {
text-align: center;
}
.installments-info {
font-size: var(--text-sm);
color: var(--cor-texto-secundario);
margin: var(--space-2) 0 0 0;
}
/* Descrição do Produto */
.product-info > div:last-of-type {
line-height: var(--text-lg-lh);
color: var(--cor-texto);
font-size: var(--text-sm);
max-width: var(--text-max-width);
}
.product-info p {
margin-bottom: var(--space-4);
}
.product-info p:last-child {
margin-bottom: 0;
}
.product-info strong {
color: var(--cor-accent);
font-weight: 600;
}
/* Seção de Descrição Detalhada */
.product-description {
margin-top: var(--space-12);
padding: var(--space-10) var(--space-6);
background: white;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
.product-description h2 {
font-size: 1.125rem;
line-height: 1.3;
font-weight: 700;
color: var(--cor-accent);
margin: 0 0 var(--space-6) 0;
padding-bottom: var(--space-4);
border-bottom: 2px solid var(--color-border);
letter-spacing: var(--letter-spacing-tight);
}
/* Lista de Itens do Produto */
.product-items {
list-style: none;
padding: 0;
margin: 0 0 var(--space-8) 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.product-items li {
padding: var(--space-3) var(--space-5);
background: linear-gradient(135deg, var(--color-surface) 0%, #ffffff 100%);
border-left: 4px solid var(--cor-primaria);
border-radius: var(--radius-sm);
color: var(--cor-texto);
font-size: var(--text-sm);
line-height: var(--text-sm-lh);
transition: all var(--transition-fast);
position: relative;
padding-left: 40px;
}
.product-items li::before {
content: '✓';
position: absolute;
left: var(--space-4);
color: var(--cor-primaria);
font-weight: 700;
font-size: var(--text-sm);
}
.product-items li:hover {
background: linear-gradient(135deg, #f0f0f0 0%, #fafafa 100%);
transform: translateX(4px);
box-shadow: 0 2px 8px rgba(212, 165, 116, 0.15);
}
/* Botão WhatsApp - Premium */
.whatsapp-order-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
padding: var(--space-4) var(--space-8);
font-size: var(--text-sm);
line-height: var(--text-sm-lh);
font-weight: 600;
color: white;
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
border: none;
border-radius: var(--radius-pill);
cursor: pointer;
transition: all var(--transition-smooth);
box-shadow: 0 4px 16px rgba(37, 211, 102, 0.3);
text-decoration: none;
min-width: 280px;
min-height: 44px;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-top: var(--space-4);
position: relative;
overflow: hidden;
}
.whatsapp-order-btn:focus-visible {
outline: 2px solid var(--cor-primaria);
outline-offset: var(--space-1);
}
.whatsapp-order-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s ease;
}
.whatsapp-order-btn:hover::before {
left: 100%;
}
.whatsapp-order-btn:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
}
.whatsapp-order-btn:active {
transform: translateY(-1px) scale(1);
}
.whatsapp-order-btn svg {
width: 24px;
height: 24px;
flex-shrink: 0;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}
/* Responsividade - Tablet (768px - 1024px) */
@media (max-width: 1024px) {
.product-layout {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.product-images {
max-width: 100%;
}
.product-main-image {
max-height: 500px;
}
}
/* Responsividade - Mobile (600px - 768px) */
@media (max-width: 768px) {
.product-details {
padding: var(--spacing-xl) 0;
}
.product-layout {
gap: 2rem;
}
.product-thumbnails {
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
max-height: 320px;
max-width: 80px;
padding-right: var(--space-2);
padding-bottom: 0;
}
.product-thumbnails .thumbnail {
flex-shrink: 0;
width: 70px;
height: 70px;
}
.product-main-image {
max-height: 400px;
}
.product-description {
padding: 2rem 1.5rem;
}
.whatsapp-order-btn {
width: 100%;
min-width: auto;
padding: var(--space-4) var(--space-6);
}
}
/* Responsividade - Mobile Pequeno (< 600px) */
@media (max-width: 600px) {
.product-thumbnails {
gap: 0.5rem;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
max-height: 280px;
max-width: 60px;
}
.product-thumbnails .thumbnail {
width: 60px;
height: 60px;
}
.product-main-image {
max-height: 350px;
}
.zoom-btn {
width: 40px;
height: 40px;
bottom: 0.75rem;
right: 0.75rem;
}
.zoom-btn svg {
width: 18px;
height: 18px;
}
.product-description {
padding: 1.5rem 1rem;
}
.product-description h2 {
font-size: 1rem;
}
.whatsapp-order-btn {
padding: 0.75rem 1.25rem;
font-size: var(--text-sm);
}
}
/* Produtos relacionados – mesmo padrão de títulos da home */
.related-products .titulo-categoria.titulo-relacionados {
font-size: 1.125rem;
font-weight: 700;
color: var(--cor-texto);
margin: 0 0 1rem 0;
}
.related-products .product-name {
font-size: var(--text-sm);
line-height: var(--text-sm-lh);
}
.related-products .product-name span,
.related-products .product-pricing .current-price {
font-size: var(--text-sm);
}
/* =================================
PÁGINAS CATEGORIAS (index + show) – tipografia alinhada à home
================================= */
/* Index: listagem de categorias */
.categories-listing {
padding: var(--spacing-2xl) 0;
}
.categories-listing .page-header {
margin-bottom: var(--space-8);
}
.categories-listing .page-title {
font-size: 1.125rem;
font-weight: 700;
color: var(--cor-texto);
margin: 0 0 var(--space-2) 0;
}
.categories-listing .page-subtitle {
font-size: var(--text-sm);
color: var(--cor-texto-secundario);
margin: 0;
}
.categories-listing .categories-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--grid-gap-desktop);
}
.categories-listing .category-card-link {
text-decoration: none;
color: inherit;
display: block;
transition: transform 0.3s ease;
}
.categories-listing .category-card-link * {
text-decoration: none;
}
.categories-listing .category-card-link:hover {
transform: translateY(-4px);
}
.categories-listing .category-card-link:hover .category-card {
box-shadow: 0 8px 24px rgba(212, 165, 116, 0.25);
border-color: var(--cor-primaria);
}
.categories-listing .category-card {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
border-radius: 16px;
border: 1px solid rgba(212, 165, 116, 0.1);
overflow: hidden;
background: #fff;
display: flex;
flex-direction: column;
height: 100%;
transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.categories-listing .category-info {
padding: var(--space-4) var(--space-5);
display: flex;
flex-direction: column;
flex: 1;
}
.categories-listing .category-heading {
display: flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-2);
}
.categories-listing .category-icon {
font-size: 1.125rem;
line-height: 1;
flex-shrink: 0;
}
.categories-listing .category-name {
font-size: 1rem;
font-weight: 700;
color: var(--cor-texto);
margin: 0;
line-height: var(--text-md-lh);
}
.categories-listing .category-description {
font-size: var(--text-sm);
color: var(--cor-texto-secundario);
margin: 0 0 var(--space-3) 0;
line-height: var(--text-sm-lh);
}
.categories-listing .category-count {
display: inline-block;
font-size: var(--text-xs);
color: var(--cor-texto-secundario);
background: rgba(212, 165, 116, 0.15);
border-radius: 999px;
padding: 0.25rem 0.5rem;
margin-bottom: var(--space-3);
width: fit-content;
}
.categories-listing .category-cta {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--text-sm);
font-weight: 600;
color: var(--cor-primaria);
border: 1px solid var(--cor-primaria);
border-radius: 8px;
padding: 0.5rem 1rem;
width: fit-content;
margin-top: auto;
transition: background 0.2s ease, color 0.2s ease;
}
.categories-listing .category-card-link:hover .category-cta {
background: var(--cor-fundo-botao);
color: var(--cor-texto-botao);
}
.categories-listing .empty-state h3 {
font-size: var(--text-sm);
font-weight: 600;
margin: 0 0 var(--space-2) 0;
}
.categories-listing .empty-state p {
font-size: var(--text-xs);
color: var(--cor-texto-secundario);
margin: 0;
}
@media (max-width: 768px) {
.categories-listing .categories-grid {
gap: var(--grid-gap-mobile);
}
.categories-listing .category-info {
padding: var(--space-3) var(--space-4);
}
.categories-listing .category-cta {
padding: 0.5rem 0.875rem;
font-size: var(--text-xs);
}
}
@media (max-width: 600px) {
.categories-listing .categories-grid {
grid-template-columns: 1fr;
}
}
/* Show: breadcrumb, cabeçalho e produtos da categoria */
/* Breadcrumb */
.category-breadcrumb {
padding: var(--space-4) 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.category-breadcrumb ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
margin: 0;
padding: 0;
list-style: none;
font-size: var(--text-xs);
color: var(--cor-texto-secundario);
}
.category-breadcrumb li:not(:last-child)::after {
content: ' »';
margin-left: var(--space-1);
color: var(--cor-texto-secundario);
}
.category-breadcrumb a {
color: var(--cor-texto-secundario);
text-decoration: none;
transition: color 0.2s ease;
}
.category-breadcrumb a:hover {
color: var(--cor-primaria);
}
.category-breadcrumb li[aria-current="page"] {
color: var(--cor-texto);
}
/* Category header removido - agora integrado ao layout principal */
/* Descrição da categoria */
.category-products .category-description-section {
margin-bottom: var(--space-8);
}
.category-products .category-description-section p {
font-size: var(--text-sm);
color: var(--cor-texto);
line-height: var(--text-sm-lh);
margin: 0 0 var(--space-6) 0;
max-width: 65ch;
}
/* Grid e cards listagem-item – escopo .category-products (estilo referência) */
.category-products .products-grid.listagem-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: var(--grid-gap-desktop);
}
.category-products .listagem-item {
width: 100%;
min-width: 0;
padding: 0;
}
.category-products .listagem-item-wrap {
position: relative;
background: #fff;
border-radius: 4px;
overflow: hidden;
border: 1px solid rgba(144, 144, 144, 0.12);
box-shadow: none;
height: 100%;
display: flex;
flex-direction: column;
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.category-products .listagem-item-wrap:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border-color: rgba(212, 165, 116, 0.25);
}
.category-products .produto-sobrepor {
position: absolute;
inset: 0;
z-index: 1;
}
.category-products .imagem-produto {
position: relative;
width: 100%;
aspect-ratio: 1;
background: #f5f5f5;
overflow: hidden;
}
.category-products .imagem-produto img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.category-products .listagem-item-wrap:hover .imagem-produto img {
transform: scale(1.05);
}
.category-products .product-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #eee;
}
.category-products .product-placeholder i {
font-size: 2.5rem !important;
color: #bbb !important;
}
.category-products .info-produto {
padding: 0.75rem 1rem;
flex: 1;
}
.category-products .nome-produto {
display: block;
font-size: 13px;
line-height: 1.35;
color: var(--cor-texto);
text-decoration: none;
margin-bottom: 0.5rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.category-products .nome-produto:hover {
color: var(--cor-texto-hover);
}
.category-products .precos-wrap {
margin: 0;
}
.category-products .preco-produto {
font-size: 14px;
}
.category-products .desconto-a-vista .titulo {
color: var(--cor-primaria);
font-weight: 600;
}
.category-products .desconto-a-vista span {
font-size: 12px;
color: var(--cor-texto-secundario);
}
.category-products .desconto-a-vista b {
font-size: 11px;
font-weight: 600;
color: var(--cor-texto-secundario);
}
.category-products .preco-parcela {
display: block;
font-size: 12px;
color: var(--cor-texto-secundario);
margin-top: 0.35rem;
}
.category-products .preco-parcela strong {
color: var(--cor-texto);
font-weight: 600;
}
.category-products .acoes-produto {
padding: 0 1rem 1rem;
position: relative;
z-index: 2;
}
.category-products .botao-comprar {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
padding: 0.5rem 1rem;
font-size: 13px;
font-weight: 500;
color: var(--cor-texto-botao);
background: var(--cor-fundo-botao);
border: none;
border-radius: 6px;
text-decoration: none;
transition: 0.2s ease;
cursor: pointer;
}
.category-products .botao-comprar:hover {
background: var(--cor-fundo-botao-hover);
color: var(--cor-texto-botao-hover);
}
.category-products .empty-state h3 {
font-size: var(--text-sm);
font-weight: 600;
margin: 0 0 var(--space-2) 0;
}
.category-products .empty-state p {
font-size: var(--text-xs);
color: var(--cor-texto-secundario);
margin: 0;
}
@media (max-width: 768px) {
.category-products .products-grid.listagem-grid {
gap: var(--grid-gap-mobile);
}
.category-products .info-produto {
padding: 0.5rem 0.75rem;
}
.category-products .nome-produto {
font-size: 12px;
}
.category-products .acoes-produto {
padding: 0 0.75rem 0.75rem;
}
}
@media (max-width: 600px) {
.category-products .products-grid.listagem-grid {
grid-template-columns: 1fr;
gap: var(--grid-gap-mobile);
}
}
/* =================================
MODAL DE PRODUTO
================================= */
.modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
padding: 1rem;
}
.modal-overlay.active {
display: flex;
}
.modal-container {
background: white;
border-radius: var(--border-radius);
max-width: 900px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
position: relative;
animation: modalSlideIn 0.3s ease;
}
@keyframes modalSlideIn {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.modal-close {
position: absolute;
top: 1rem;
right: 1rem;
background: var(--cor-fundo-botao);
color: var(--cor-texto-botao);
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
z-index: 10;
transition: var(--transicao-padrao);
}
.modal-close:hover {
background: var(--cor-fundo-botao-hover);
color: var(--cor-texto-botao-hover);
transform: rotate(90deg);
}
.modal-content {
padding: 2rem;
}
.modal-loading {
text-align: center;
padding: 3rem;
color: var(--cor-texto-secundario);
}
.modal-loading i {
font-size: 3rem;
color: var(--cor-primaria);
margin-bottom: 1rem;
}
.modal-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.modal-imagem {
position: relative;
}
.modal-imagem img {
width: 100%;
border-radius: var(--border-radius);
margin-bottom: 1rem;
}
.modal-imagem-principal {
position: relative;
width: 100%;
padding-bottom: 100%; /* Aspect ratio 1:1 */
background: var(--cor-secundaria);
border-radius: var(--border-radius);
overflow: hidden;
margin-bottom: 1rem;
}
.modal-imagem-principal img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
background: white;
}
.modal-miniaturas {
display: flex;
gap: 0.5rem;
overflow-x: auto;
padding-bottom: 0.5rem;
scrollbar-width: thin;
scrollbar-color: var(--cor-primaria) var(--cor-secundaria);
}
.modal-miniaturas::-webkit-scrollbar {
height: 6px;
}
.modal-miniaturas::-webkit-scrollbar-track {
background: var(--cor-secundaria);
border-radius: 3px;
}
.modal-miniaturas::-webkit-scrollbar-thumb {
background: var(--cor-primaria);
border-radius: 3px;
}
.modal-miniatura {
flex: 0 0 80px;
width: 80px;
height: 80px;
border-radius: var(--border-radius-small);
overflow: hidden;
cursor: pointer;
border: 3px solid transparent;
transition: var(--transicao-padrao);
background: var(--cor-secundaria);
}
.modal-miniatura:hover {
border-color: var(--cor-primaria);
opacity: 0.8;
}
.modal-miniatura.active {
border-color: var(--cor-primaria);
}
.modal-miniatura img {
width: 100%;
height: 100%;
object-fit: cover;
}
.imagem-contador {
position: absolute;
bottom: 1rem;
right: 1rem;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 0.3rem 0.8rem;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 500;
}
/* Navegação de imagens (setas) */
.modal-nav-imagem {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.5);
color: white;
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transicao-padrao);
z-index: 5;
}
.modal-nav-imagem:hover {
background: rgba(0, 0, 0, 0.7);
}
.modal-nav-prev {
left: 1rem;
}
.modal-nav-next {
right: 1rem;
}
/* Zoom na imagem */
.modal-imagem-principal.zoom {
cursor: zoom-in;
}
.modal-imagem-principal.zoomed {
cursor: zoom-out;
}
.modal-imagem-principal.zoomed img {
transform: scale(2);
cursor: move;
}
.modal-detalhes h2 {
font-size: 1.8rem;
color: var(--cor-accent);
margin-bottom: 1rem;
}
.modal-descricao {
color: var(--cor-texto-secundario);
line-height: 1.6;
margin-bottom: 1.5rem;
}
.modal-preco {
background: var(--cor-secundaria);
padding: 1rem;
border-radius: var(--border-radius-small);
margin-bottom: 1.5rem;
display: flex;
flex-direction: column; /* Mudança principal aqui */
gap: 0.5rem; /* Espaçamento entre as linhas */
}
/* Linha do preço */
.modal-preco > .preco-label,
.modal-preco > .preco-valor {
display: inline; /* Manter na mesma linha */
}
.modal-preco::before {
content: '';
display: block;
width: 100%;
}
.preco-label {
color: var(--cor-texto-secundario);
}
.preco-valor {
font-size: 1.5rem;
font-weight: bold;
color: var(--cor-primaria);
}
.modal-categorias {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 1.5rem;
}
.categoria-tag {
background: var(--cor-fundo-botao);
color: var(--cor-texto-botao);
padding: 0.3rem 1rem;
border-radius: 20px;
font-size: 0.85rem;
}
.modal-itens {
background: #f9f9f9;
padding: 1rem;
border-radius: var(--border-radius-small);
margin-bottom: 1.5rem;
}
.modal-itens h3 {
font-size: 1rem;
color: var(--cor-accent);
margin-bottom: 0.5rem;
}
.modal-itens ul {
list-style: none;
padding-left: 1rem;
}
.modal-itens li {
color: var(--cor-texto-secundario);
margin-bottom: 0.3rem;
}
.modal-itens li:before {
content: "✓";
color: var(--cor-primaria);
font-weight: bold;
margin-right: 0.5rem;
}
.modal-acoes {
display: flex;
gap: 1rem;
}
.btn-whatsapp {
flex: 1;
background: #25D366;
color: white;
padding: 1rem;
border: none;
border-radius: var(--border-radius-small);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
transition: var(--transicao-padrao);
}
.btn-whatsapp:hover {
background: #128C7E;
transform: translateY(-2px);
}
.btn-compartilhar {
background: var(--cor-fundo-botao);
color: var(--cor-texto-botao);
padding: 1rem 1.5rem;
border: none;
border-radius: var(--border-radius-small);
cursor: pointer;
transition: var(--transicao-padrao);
}
.btn-compartilhar:hover {
background: var(--cor-fundo-botao-hover);
color: var(--cor-texto-botao-hover);
}
/* =================================
SISTEMA DE BUSCA INTEGRADA
================================= */
.busca-integrada {
margin: 2rem 0 3rem 0;
}
.busca-container {
position: relative;
max-width: 800px;
margin: 0 auto;
}
.busca-principal {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
}
.busca-icone {
position: absolute;
left: 1.5rem;
color: var(--cor-texto-secundario);
pointer-events: none;
z-index: 1;
}
.busca-input {
flex: 1;
padding: 1.2rem 1.5rem 1.2rem 3.5rem;
border: 2px solid var(--cor-secundaria);
border-radius: 50px;
font-size: 1rem;
transition: var(--transicao-padrao);
background: white;
}
.busca-input:focus {
outline: none;
border-color: var(--cor-primaria);
box-shadow: 0 0 0 4px rgba(212, 165, 116, 0.1);
}
.busca-filtros-btn {
background: var(--cor-fundo-botao);
color: var(--cor-texto-botao);
border: none;
padding: 1.2rem 2rem;
border-radius: 50px;
cursor: pointer;
font-weight: 500;
display: flex;
align-items: center;
gap: 0.5rem;
transition: var(--transicao-padrao);
white-space: nowrap;
}
.busca-filtros-btn:hover {
background: var(--cor-fundo-botao-hover);
color: var(--cor-texto-botao-hover);
transform: translateY(-2px);
}
.busca-sugestoes {
position: absolute;
top: calc(100% + 0.5rem);
left: 0;
right: 0;
background: white;
border-radius: var(--border-radius);
box-shadow: var(--sombra-hover);
max-height: 300px;
overflow-y: auto;
display: none;
z-index: 100;
}
.busca-sugestoes.active {
display: block;
}
.sugestao-item {
padding: 1rem 1.5rem;
cursor: pointer;
border-bottom: 1px solid #f0f0f0;
transition: var(--transicao-padrao);
display: flex;
justify-content: space-between;
align-items: center;
}
.sugestao-item:last-child {
border-bottom: none;
}
.sugestao-item:hover {
background: var(--cor-secundaria);
}
.sugestao-highlight {
font-weight: bold;
color: var(--cor-primaria);
}
.filtros-avancados {
margin-top: 1.5rem;
padding: 2rem;
background: white;
border: 2px solid var(--cor-secundaria);
border-radius: var(--border-radius);
display: none;
animation: slideDown 0.3s ease;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.filtros-avancados.active {
display: block;
}
.filtros-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
align-items: end;
}
.filtro-grupo label {
display: block;
margin-bottom: 0.5rem;
color: var(--cor-accent);
font-weight: 500;
font-size: 0.9rem;
}
.preco-range {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.preco-range input {
flex: 1;
padding: 0.8rem;
border: 2px solid var(--cor-secundaria);
border-radius: var(--border-radius-small);
transition: var(--transicao-padrao);
}
.preco-range input:focus {
outline: none;
border-color: var(--cor-primaria);
}
.filtro-grupo select {
width: 100%;
padding: 0.8rem;
border: 2px solid var(--cor-secundaria);
border-radius: var(--border-radius-small);
background: white;
cursor: pointer;
transition: var(--transicao-padrao);
}
.filtro-grupo select:focus {
outline: none;
border-color: var(--cor-primaria);
}
.btn-aplicar-filtros {
width: 100%;
background: var(--cor-fundo-botao);
color: var(--cor-texto-botao);
border: none;
padding: 1rem;
border-radius: var(--border-radius-small);
cursor: pointer;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
transition: var(--transicao-padrao);
}
.btn-aplicar-filtros:hover {
background: var(--cor-fundo-botao-hover);
color: var(--cor-texto-botao-hover);
transform: translateY(-2px);
}
/* =================================
ANIMATIONS & EFFECTS
================================= */
.fade-in {
animation: fadeIn 0.5s ease-in-out;
opacity: 1;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
.ripple {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: scale(0);
animation: ripple-effect 0.6s linear;
pointer-events: none;
}
@keyframes ripple-effect {
to {
transform: scale(4);
opacity: 0;
}
}
/* =================================
UTILITY CLASSES
================================= */
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.d-none {
display: none;
}
.d-block {
display: block;
}
.d-flex {
display: flex;
}
.align-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
/* Adicione este CSS ao seu arquivo main_3.0.css ou em uma tag