:root { /* --brand-* definidas por Configurações → theme-head.php (por último no ) */ --ink: #0f172a; --muted: #64748b; --surface: #f8fafc; --radius-lg: 1rem; --shadow-card: 0 1px 3px rgb(15 23 42 / 0.06), 0 8px 24px rgb(15 23 42 / 0.06); --shadow-hover: 0 12px 32px rgb(15 23 42 / 0.12); --site-gutter: 0.75rem; --hero-gutter: 0; } @media (min-width: 640px) { :root { --site-gutter: 1.25rem; --hero-gutter: 0; } } @media (min-width: 1024px) { :root { --site-gutter: 2.5rem; } } html { overflow-x: hidden; } body { font-family: 'DM Sans', system-ui, sans-serif; color: var(--ink); background: var(--surface); } body.site-body { overflow-x: clip; width: 100%; max-width: 100vw; } body.site-menu-open { overflow: hidden; } .site-body main { width: 100%; max-width: 100%; min-width: 0; overflow-x: hidden; padding-top: var(--site-header-height, 5.75rem); } .site-body--catalog-public main { padding-top: 0; } .site-body main:has(.blog-post-layout--with-sidebar), .site-body main:has(.blog-post-layout--single), .site-body main:has(.blog-page--listing) { overflow-x: visible; } .site-body main img, .site-body main video, .site-body main iframe { max-width: 100%; } .site-body main .max-w-7xl { width: 100%; max-width: none; margin-left: 0; margin-right: 0; padding-left: var(--site-gutter); padding-right: var(--site-gutter); box-sizing: border-box; } @media (max-width: 639px) { .site-body main .max-w-7xl[class*="px-"] { padding-left: var(--site-gutter); padding-right: var(--site-gutter); } } .site-header-inner, .page-wrap { width: 100%; max-width: none; margin-left: 0; margin-right: 0; padding-left: var(--site-gutter); padding-right: var(--site-gutter); box-sizing: border-box; } .site-footer-main.max-w-7xl, .site-footer-bottom-inner.max-w-7xl { width: 100%; max-width: none; margin-left: 0; margin-right: 0; padding-left: var(--site-gutter); padding-right: var(--site-gutter); box-sizing: border-box; } .font-display { font-family: 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Header */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 40; background: #fff; border-bottom: 1px solid rgb(226 232 240 / 0.8); box-shadow: 0 1px 0 rgb(15 23 42 / 0.04); width: 100%; max-width: 100vw; overflow: visible; padding-top: env(safe-area-inset-top, 0); } body.site-search-open:not(.site-menu-open) .site-header { z-index: 70; } @media (min-width: 1024px) { .site-header { background: rgb(255 255 255 / 0.96); backdrop-filter: blur(12px); box-shadow: 0 1px 3px rgb(15 23 42 / 0.06); } .page-produtos-list .category-sidebar, .page-catalogo-list .category-sidebar { top: calc(var(--site-header-height, 4.5rem) + 0.75rem); } .site-body--catalog-public .page-catalogo-list .category-sidebar { top: 0.75rem; } } .page-catalogo-list .catalog-sidebar-brand, .page-catalogo-list .catalog-mobile-brand { display: flex; justify-content: flex-start; padding: 0.25rem 0 0; } .page-catalogo-list .catalog-mobile-brand { display: none; padding-top: 0; margin-bottom: 0.25rem; } .page-catalogo-list .catalog-sidebar-brand--in-filters { display: none; } @media (max-width: 1023px) { .page-catalogo-list .catalog-mobile-brand { display: flex; } } @media (min-width: 1024px) { .page-catalogo-list .catalog-sidebar-brand--in-filters { display: flex; } .page-catalogo-list .catalog-mobile-brand { display: none; } } .page-catalogo-list .catalog-sidebar-brand-link { display: block; max-width: 100%; line-height: 0; border-radius: 0.75rem; transition: opacity 0.15s ease; } .page-catalogo-list .catalog-sidebar-brand-link:hover { opacity: 0.88; } .page-catalogo-list .catalog-sidebar-brand-link:focus-visible { outline: 2px solid var(--brand-mid, #dc2626); outline-offset: 3px; } .page-catalogo-list .catalog-sidebar-brand-img { display: block; width: auto; max-width: 100%; height: auto; max-height: 3.25rem; margin-inline: 0; object-fit: contain; object-position: left center; } .page-catalogo-list .catalog-sidebar-brand-fallback { display: block; font-family: var(--font-display, inherit); font-weight: 700; font-size: 1.25rem; line-height: 1.3; text-align: left; color: #0f172a; } @media (min-width: 1024px) { .page-catalogo-list .catalog-sidebar-brand-img { max-height: 3.75rem; } } .page-catalogo-list .catalog-list-header { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; } .page-catalogo-list .catalog-list-header__main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; } .page-catalogo-list .catalog-list-header__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; text-align: right; } @media (min-width: 640px) { .page-catalogo-list .catalog-list-header { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 1.25rem 2rem; } .page-catalogo-list .catalog-list-header__meta { flex-shrink: 0; max-width: min(100%, 18rem); margin-left: auto; } } .page-catalogo-list .catalog-list-eyebrow { margin: 0; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-mid, #dc2626); line-height: 1.3; } .page-catalogo-list .catalog-list-client, .page-catalogo-list .catalog-list-seller { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: #64748b; } .page-catalogo-list .catalog-list-title { margin: 0; font-family: var(--font-display, inherit); font-size: clamp(1.375rem, 4.5vw, 1.875rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: #0f172a; } .page-catalogo-list .catalog-list-title--home { margin-top: 0.15rem; font-size: clamp(1.5rem, 5vw, 1.875rem); } .page-catalogo-list .catalog-list-section-label { margin: 0.15rem 0 0; font-family: var(--font-display, inherit); font-size: 1.0625rem; font-weight: 600; line-height: 1.3; color: #1e293b; } .page-catalogo-list .catalog-list-stats, .page-catalogo-list .catalog-list-color-filter { margin: 0.25rem 0 0; font-size: 0.8125rem; line-height: 1.45; color: #64748b; } .page-catalogo-list .catalog-list-compact-sub { display: none; margin: 0; } .page-catalogo-list .catalog-list-color-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; } .page-catalogo-list .catalog-list-clear-color { font-weight: 600; color: var(--brand-mid, #dc2626); text-decoration: none; } .page-catalogo-list .catalog-list-clear-color:hover { text-decoration: underline; } @media (max-width: 1023px) { .page-catalogo-list { padding-top: 1.25rem; } body.site-body--catalog-public:has([data-catalog-cart-root]) { --catalog-mobile-foot-h: calc(2.35rem + env(safe-area-inset-bottom, 0)); } body.site-body--catalog-public:has([data-catalog-cart-root]) .page-catalogo-list, body.site-body--catalog-public:has([data-catalog-cart-root]) .product-page { padding-bottom: calc(1.5rem + var(--catalog-mobile-foot-h)); } body.site-body--catalog-public:has([data-catalog-cart-root]) main { scroll-padding-bottom: var(--catalog-mobile-foot-h); } body.site-body--catalog-public:has([data-catalog-cart-root]) .products-filter-drawer.is-open .products-filter-sheet { max-height: calc(100dvh - var(--catalog-mobile-foot-h)); height: calc(100dvh - var(--catalog-mobile-foot-h)); } body.site-body--catalog-public:has([data-catalog-cart-root]) .products-filter-drawer [data-sidebar-section="categories"] .category-nav-list { padding-bottom: 1.5rem; } .page-catalogo-list .catalog-mobile-brand { width: 100%; margin-bottom: 0; padding-bottom: 0.875rem; border-bottom: 1px solid #e2e8f0; } .page-catalogo-list .catalog-mobile-brand .catalog-sidebar-brand-img { max-height: 2.75rem; max-width: min(100%, 14rem); } .page-catalogo-list .catalog-list-header { gap: 0.875rem; margin-top: 1rem; } .page-catalogo-list .catalog-list-header__meta { align-items: flex-start; text-align: left; padding-bottom: 0.25rem; border-bottom: 1px solid #e2e8f0; } .page-catalogo-list .catalog-list-eyebrow { font-size: 0.625rem; letter-spacing: 0.1em; } .page-catalogo-list .catalog-list-client, .page-catalogo-list .catalog-list-seller { max-width: 100%; word-wrap: break-word; } .page-catalogo-list .catalog-list-section-label { margin-top: 0.35rem; } } @media (max-width: 639px) { .page-catalogo-list .catalog-list-header { gap: 0.25rem; margin-top: 0.5rem; margin-bottom: 0.75rem; } .page-catalogo-list .catalog-list-header__main { gap: 0.15rem; width: 100%; } .page-catalogo-list .catalog-list-title, .page-catalogo-list .catalog-list-title--home { font-size: 1.0625rem; line-height: 1.25; letter-spacing: -0.01em; } .page-catalogo-list .catalog-list-title--home + .catalog-list-section-label, .page-catalogo-list .catalog-list-section-label { display: none; } .page-catalogo-list .catalog-list-compact-sub { display: block; margin: 0; font-size: 0.6875rem; line-height: 1.35; color: #64748b; } .page-catalogo-list .catalog-list-stats, .page-catalogo-list .catalog-list-header__meta { display: none; } .page-catalogo-list .catalog-list-color-filter { font-size: 0.6875rem; margin-top: 0.15rem; } } @media (min-width: 640px) { .page-catalogo-list .catalog-list-compact-sub { display: none; } } @media (min-width: 1024px) { .page-catalogo-list .catalog-list-client, .page-catalogo-list .catalog-list-seller { font-size: 0.875rem; } .page-catalogo-list .catalog-list-title { font-size: 1.875rem; } } body.site-menu-open .site-header { z-index: 50; pointer-events: none; } body.site-menu-open .site-header .site-header-actions { pointer-events: auto; } .site-header-row { display: flex; flex-direction: column; gap: 0.625rem; min-width: 0; padding-top: 0.75rem; padding-bottom: 0.75rem; } .site-header-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; min-width: 0; } .site-header-logo { display: flex; align-items: center; gap: 0.625rem; min-width: 0; flex: 1 1 auto; text-decoration: none; color: inherit; } .site-logo-img { display: block; height: 2.5rem; width: auto; max-width: calc(100vw - 11.5rem); object-fit: contain; object-position: left center; } .site-header-logo-text--fallback { display: none; min-width: 0; } @media (min-width: 640px) { .site-header-logo-text--fallback { display: block; } .site-logo-img { max-width: 11.5rem; } } @media (max-width: 1023px) { .site-header-row { padding-top: 0.375rem; padding-bottom: 0.375rem; gap: 0.5rem; } .site-header-logo { flex: 1 1 0; min-width: 0; } .site-logo-img { height: 2.875rem; max-width: 100%; width: auto; } .site-search-toggle, .site-menu-toggle { width: 2.125rem; height: 2.125rem; min-width: 2.125rem; min-height: 2.125rem; border-radius: 0.375rem; } .site-search-toggle-icon { width: 1.0625rem; height: 1.0625rem; } .site-menu-toggle-bars { gap: 3px; width: 0.9375rem; height: 0.8125rem; } .site-menu-toggle-bar { width: 0.9375rem; } body.site-menu-open .site-menu-toggle-bars .site-menu-toggle-bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); } body.site-menu-open .site-menu-toggle-bars .site-menu-toggle-bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); } } .site-header-logo-name { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 1.125rem; line-height: 1.2; color: #0f172a; } .site-header-logo-tag { display: block; font-size: 0.75rem; color: #64748b; font-weight: 500; } .site-logo-mark { flex-shrink: 0; display: flex; height: 2.5rem; width: 2.5rem; align-items: center; justify-content: center; border-radius: 0.75rem; color: #fff; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.125rem; } .site-header-actions { display: flex; align-items: center; gap: 0.375rem; flex-shrink: 0; } .site-search-toggle { display: none; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid #e2e8f0; border-radius: 0.5rem; background: #fff; color: #334155; cursor: pointer; flex-shrink: 0; } .site-search-toggle-icon { width: 1.25rem; height: 1.25rem; } body.site-search-open .site-search-toggle { color: var(--brand-700); border-color: color-mix(in srgb, var(--brand-600) 35%, #e2e8f0); background: color-mix(in srgb, var(--brand-600) 8%, white); } @media (max-width: 1023px) { .site-search-toggle { display: inline-flex; } .site-search { display: none; } .site-search.is-mobile-visible { display: block; } body.site-search-open .site-header-row { gap: 0.625rem; } .site-header-tools { width: 100%; margin-left: 0; } } @media (min-width: 1024px) { .site-search-toggle { display: none !important; } .site-search { display: block !important; } } .site-menu-toggle { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid #e2e8f0; border-radius: 0.5rem; background: #fff; color: #334155; cursor: pointer; flex-shrink: 0; font-family: inherit; } .site-menu-toggle-bars { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 1.125rem; height: 1rem; } @media (min-width: 1024px) { .site-menu-toggle { display: none !important; } } .site-menu-toggle-bar { display: block; width: 1.125rem; height: 2px; background: currentColor; border-radius: 1px; transition: transform 0.2s ease, opacity 0.2s ease; } body.site-menu-open .site-menu-toggle-bars .site-menu-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.site-menu-open .site-menu-toggle-bars .site-menu-toggle-bar:nth-child(2) { opacity: 0; } body.site-menu-open .site-menu-toggle-bars .site-menu-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .site-nav-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid #e2e8f0; } .site-nav-drawer-title { margin: 0; padding: 0 0.25rem; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.125rem; font-weight: 700; color: #0f172a; } .site-menu-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.75rem; height: 2.75rem; margin: 0; padding: 0; border: 1px solid #e2e8f0; border-radius: 0.5rem; background: #fff; color: #334155; cursor: pointer; font-family: inherit; position: relative; z-index: 2; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .site-menu-close:hover { background: #f8fafc; } .site-menu-close:focus-visible { outline: 2px solid var(--brand-primary, #dc2626); outline-offset: 2px; } .site-nav-backdrop { position: fixed; inset: 0; z-index: 45; background: rgb(15 23 42 / 0.45); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } body.site-menu-open .site-nav-backdrop { opacity: 1; pointer-events: auto; } .site-nav { min-width: 0; } .site-nav-panel { display: flex; flex-direction: column; gap: 0.125rem; } .site-nav-link { display: block; padding: 0.75rem 1rem; border-radius: 0.5rem; font-size: 0.9375rem; font-weight: 500; color: #334155; text-decoration: none; transition: color 0.15s ease, background 0.15s ease; } .site-nav-link:hover { color: var(--brand-700); background: #f1f5f9; } .site-nav-link.is-active { color: #e55353; background: #fdeeee; font-weight: 600; } .site-nav-link.is-active:hover { color: #d94545; background: #fce4e4; } .site-nav-wa-mobile { width: 100%; margin-top: 0.75rem; justify-content: center; } .site-nav--drawer { position: fixed; top: 0; right: 0; z-index: 60; width: min(17.5rem, 100%); height: 100dvh; padding: max(1rem, env(safe-area-inset-top, 0px)) 1rem 1.5rem; background: #fff; box-shadow: -8px 0 32px rgb(15 23 42 / 0.12); transform: translate3d(100%, 0, 0); transition: transform 0.22s ease; overflow-y: auto; overscroll-behavior: contain; pointer-events: none; visibility: hidden; } body.site-menu-open .site-nav--drawer { transform: translate3d(0, 0, 0); pointer-events: auto; visibility: visible; z-index: 100; } .site-nav--drawer .site-nav-link { border-bottom: 1px solid #f1f5f9; border-radius: 0.375rem; } .site-nav--desktop { display: none; } @media (min-width: 1024px) { .site-nav--drawer, .site-nav-backdrop { display: none !important; } .site-header-row { flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 1.25rem; padding-top: 0.75rem; padding-bottom: 0.75rem; } .site-header-top { width: auto; flex: 0 0 auto; } .site-header-tools { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; flex: 0 1 auto; min-width: 0; } .site-header-tools .site-search { flex: 0 1 24rem; min-width: 13rem; max-width: min(28rem, 32vw); width: auto; margin-left: 0; } .site-header-tools .header-wa-cta--desktop, .site-header-tools .site-nav-cta.header-wa-cta--desktop { flex: 0 0 auto; } .site-logo-img { height: 2.875rem; max-width: 13rem; } .site-nav--desktop { display: flex; flex-direction: row; align-items: center; gap: 0.75rem; flex: 0 0 auto; min-width: 0; } .site-nav--desktop .site-nav-panel { display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 0.125rem; } .site-nav--desktop .site-nav-link { padding: 0.45rem 0.7rem; font-size: 0.875rem; border-bottom: none; white-space: nowrap; border-radius: 0.5rem; } .site-nav--desktop .site-nav-link:hover:not(.is-active) { background: #f1f5f9; color: #334155; } .header-wa-cta--desktop { display: inline-flex !important; } } .site-search { position: relative; width: 100%; min-width: 0; z-index: 1; } body.site-search-open .site-search { z-index: 2; } .site-search-form { position: relative; display: flex; align-items: center; } .site-search-input { width: 100%; padding: 0.5rem 3rem 0.5rem 0.875rem; font-size: 0.875rem; border: 1px solid #e2e8f0; border-radius: 9999px; background: #f8fafc; color: #0f172a; transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease; } .site-search-input:focus { outline: none; background: #fff; border-color: color-mix(in srgb, var(--brand-600) 45%, #e2e8f0); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-600) 18%, transparent); } .site-search-input::placeholder { color: #94a3b8; } .site-search-submit { position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 2.125rem; height: 2.125rem; padding: 0; border: none; border-radius: 9999px; background: var(--brand-600); color: #fff; cursor: pointer; line-height: 0; } .site-search-submit-icon { width: 1.05rem; height: 1.05rem; flex-shrink: 0; } .site-search-submit:hover { filter: brightness(1.05); } .site-search-dropdown { position: absolute; left: 0; right: 0; top: calc(100% + 0.35rem); z-index: 80; background: #fff; border: 1px solid #e2e8f0; border-radius: 0.75rem; box-shadow: 0 12px 40px rgb(15 23 42 / 0.12); max-height: min(22rem, 60vh); overflow-y: auto; padding: 0.35rem; } .site-search-dropdown.is-loading::before { content: 'Buscando…'; display: block; padding: 0.75rem 1rem; font-size: 0.8125rem; color: #64748b; } .site-search-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.65rem; border-radius: 0.5rem; text-decoration: none; color: inherit; transition: background 0.1s ease; } .site-search-item:hover, .site-search-item.is-focused { background: #f1f5f9; } .site-search-item img { width: 2.75rem; height: 2.75rem; object-fit: cover; border-radius: 0.375rem; border: 1px solid #e2e8f0; flex-shrink: 0; background: #f8fafc; } .site-search-item-title { font-size: 0.8125rem; font-weight: 600; color: #0f172a; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .site-search-item-meta { font-size: 0.6875rem; color: #64748b; margin-top: 0.15rem; } .site-search-empty { padding: 0.75rem 1rem; font-size: 0.8125rem; color: #64748b; } .site-search-all { display: block; margin-top: 0.25rem; padding: 0.55rem 0.75rem; text-align: center; font-size: 0.8125rem; font-weight: 600; color: var(--brand-700); text-decoration: none; border-top: 1px solid #f1f5f9; } .site-search-all:hover { background: #f8fafc; } .site-logo-mark { background: linear-gradient(135deg, var(--brand-600), var(--brand-700)); } .header-wa-cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.55rem 1rem; font-weight: 700; font-size: 0.875rem; line-height: 1.2; border-radius: 9999px; background: linear-gradient(135deg, #25d366, #128c7e); color: #fff; text-decoration: none; box-shadow: 0 2px 10px rgb(37 211 102 / 0.35); transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; white-space: nowrap; flex-shrink: 0; } .header-wa-cta:hover { filter: brightness(1.06); transform: translateY(-1px); color: #fff; } .header-wa-cta--mobile-top { width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 9999px; } .header-wa-cta--desktop { display: none; } .site-nav-cta { flex-shrink: 0; margin-left: 0.25rem; } .header-wa-cta-icon { display: flex; flex-shrink: 0; } .header-wa-cta-label { letter-spacing: 0.01em; } @media (max-width: 380px) { .header-wa-cta-label { font-size: 0.8125rem; } } .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1.25rem; font-weight: 600; font-size: 0.875rem; border-radius: 0.625rem; background: linear-gradient(135deg, var(--brand-600), var(--brand-700)); color: #fff !important; text-decoration: none; border: none; cursor: pointer; box-shadow: 0 2px 10px color-mix(in srgb, var(--brand-600) 40%, transparent); transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } .btn-primary:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 4px 16px color-mix(in srgb, var(--brand-600) 50%, transparent); } .text-brand { color: var(--brand-700); } .text-brand-mid { color: var(--brand-600); } .bg-brand-soft { background: color-mix(in srgb, var(--brand-600) 10%, white); } .border-brand-soft { border-color: color-mix(in srgb, var(--brand-600) 28%, white); } .hover-text-brand:hover { color: var(--brand-700); } .product-card-btn { display: block; text-align: center; font-size: 0.875rem; font-weight: 600; color: var(--brand-700); border: 1px solid color-mix(in srgb, var(--brand-600) 28%, white); border-radius: 0.5rem; padding: 0.5rem; transition: background 0.15s ease, color 0.15s ease; } .color-swatch-active { outline: 2px solid var(--brand-600); outline-offset: 2px; } .product-card-btn:hover { background: color-mix(in srgb, var(--brand-600) 10%, white); } .product-card-btn.is-selected, .product-quote-toggle.is-selected.btn-primary { background: var(--brand-600); color: #fff; border-color: var(--brand-600); } .product-card-btn.is-selected:hover, .product-quote-toggle.is-selected.btn-primary:hover { background: var(--brand-700); border-color: var(--brand-700); } .quote-list-summary { margin-top: 0.35rem; font-size: 0.875rem; font-weight: 600; color: var(--brand-700); } .site-quote-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.75rem; border-radius: 9999px; font-size: 0.8125rem; font-weight: 600; text-decoration: none; color: var(--brand-700); background: color-mix(in srgb, var(--brand-600) 12%, white); border: 1px solid color-mix(in srgb, var(--brand-600) 25%, white); white-space: nowrap; } .site-quote-pill:hover { background: color-mix(in srgb, var(--brand-600) 18%, white); } .site-quote-pill-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem; padding: 0 0.35rem; border-radius: 9999px; font-size: 0.75rem; line-height: 1; color: #fff; background: var(--brand-600); } .site-quote-pill--drawer { margin-bottom: 0.5rem; width: 100%; justify-content: center; } .about-video-placeholder { background: linear-gradient(135deg, var(--brand-700), color-mix(in srgb, var(--brand-accent) 50%, var(--brand-700))); color: color-mix(in srgb, white 80%, transparent); } .about-video-embed { background: #0f172a; } .about-yt-lazy--has-poster { background-size: cover; background-position: center; background-repeat: no-repeat; } .about-yt-lazy--has-poster .about-yt-lazy-play { backdrop-filter: blur(2px); } .blog-card:hover h3 { color: var(--brand-700); } .hero-kicker { color: color-mix(in srgb, white 75%, var(--brand-600)); } .hero-subtitle { color: color-mix(in srgb, white 92%, var(--brand-600)); } .btn-outline-light { display: inline-flex; align-items: center; padding: 0.5rem 1rem; font-weight: 600; font-size: 0.8125rem; border-radius: 0.5rem; background: rgb(255 255 255 / 0.95); color: var(--ink); transition: background 0.15s ease; } .btn-outline-light:hover { background: #fff; } .btn-ghost { font-weight: 600; font-size: 0.875rem; color: var(--brand-700); transition: color 0.15s ease; } .btn-ghost:hover { color: var(--brand-600); } /* Hero home */ .hero-home { width: 100%; } .hero-home-slide-full { width: 100%; max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; box-sizing: border-box; } .hero-home-slide--desktop { display: none; } .hero-home-slide--mobile { display: block; } @media (max-width: 1023px) { .hero-home, .hero-home-slide-full, .hero-home .hero-carousel { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; width: 100%; max-width: 100%; } .hero-carousel--full .hero-carousel-viewport { border-radius: 0; } } .hero-home-tiles-wrap { padding-top: 1rem; } .hero-home-tiles-wrap--full { width: 100%; max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; box-sizing: border-box; } @media (min-width: 1024px) { .hero-home { --hero-fold-height: calc(100svh - var(--site-header-height, 4.5rem)); height: var(--hero-fold-height); min-height: 22rem; display: grid; grid-template-rows: minmax(0, 2.75fr) minmax(0, 1fr); gap: 0.65rem; box-sizing: border-box; overflow: hidden; } .hero-home-slide--mobile { display: none; } .hero-home-slide--desktop { display: flex; flex-direction: column; min-height: 0; height: 100%; overflow: hidden; } .hero-home-tiles-wrap { padding-top: 0; padding-bottom: 0; min-height: 0; height: 100%; display: flex; flex-direction: column; box-sizing: border-box; } .hero-home-tiles-wrap--full .hero-tiles { gap: 0.5rem; padding: 0; box-sizing: border-box; } .hero-carousel.hero-carousel--full { flex: 1 1 auto; min-height: 0; height: 100%; display: flex; flex-direction: column; } .hero-carousel--full .hero-carousel-viewport { flex: 1 1 auto; min-height: 0; height: 100%; } .hero-carousel--full .hero-carousel-track { height: 100%; align-items: stretch; } .hero-carousel--full .hero-banner { height: 100%; display: flex; flex-direction: column; } .hero-carousel--full .hero-banner-link { flex: 1 1 auto; min-height: 0; height: 100%; } .hero-carousel:not(.hero-carousel--mobile) .hero-banner-img, .hero-banner--desktop .hero-banner-img { aspect-ratio: unset; height: 100%; min-height: 0; } .hero-carousel:not(.hero-carousel--mobile) .hero-banner-fallback, .hero-banner--desktop .hero-banner-fallback { aspect-ratio: unset; height: 100%; min-height: 0; } .hero-tiles { flex: 1 1 auto; min-height: 0; height: 100%; gap: 0.65rem; align-items: stretch; } .hero-tiles .hero-banner { height: 100%; min-height: 0; display: flex; flex-direction: column; } .hero-tiles .hero-banner-link { flex: 1 1 auto; min-height: 0; height: 100%; } .hero-banner--tile .hero-banner-img, .hero-banner--tile .hero-banner-fallback { aspect-ratio: unset; height: 100%; min-height: 0; } } .hero-carousel { position: relative; } .hero-carousel-viewport { overflow: hidden; border-radius: var(--radius-lg); } .hero-carousel--full .hero-carousel-viewport { border-radius: 0; } .hero-carousel--full .hero-carousel-dots { position: absolute; left: 0; right: 0; bottom: 0.75rem; margin-top: 0; z-index: 2; } .hero-carousel-track { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; transition: transform 0.45s ease; will-change: transform; height: 100%; } .hero-carousel .hero-banner { flex: 0 0 100%; width: 100%; min-width: 100%; max-width: 100%; box-sizing: border-box; } .hero-carousel--mobile:not(.hero-carousel--full) .hero-carousel-viewport { border-radius: 1rem; } .hero-banner-link { display: block; text-decoration: none; color: inherit; } .hero-banner--desktop .hero-banner-img, .hero-carousel:not(.hero-carousel--mobile) .hero-banner-img { width: 100%; aspect-ratio: 7 / 2; object-fit: cover; display: block; background: #f1f5f9; } .hero-banner--tile .hero-banner-img { width: 100%; aspect-ratio: 5 / 2; object-fit: cover; display: block; background: #f1f5f9; } .hero-carousel--mobile .hero-banner-img { width: 100%; aspect-ratio: 750 / 940; object-fit: cover; display: block; background: #f1f5f9; } .hero-banner-fallback { display: flex; flex-direction: column; justify-content: flex-end; min-height: 12rem; padding: 1.5rem; background: linear-gradient( 145deg, color-mix(in srgb, var(--brand-700) 95%, #000) 0%, var(--brand-600) 50%, color-mix(in srgb, var(--brand-700) 90%, #000) 100% ); color: #fff; border-radius: inherit; } .hero-banner--desktop .hero-banner-fallback { aspect-ratio: 7 / 2; } .hero-banner--tile .hero-banner-fallback { aspect-ratio: 5 / 2; } .hero-carousel--mobile .hero-banner-fallback { aspect-ratio: 750 / 940; } .hero-banner-fallback-title { margin: 0; font-family: var(--font-display, 'Plus Jakarta Sans', system-ui, sans-serif); font-size: 1.25rem; font-weight: 700; } .hero-banner-fallback-sub { margin: 0.35rem 0 0; font-size: 0.875rem; opacity: 0.92; } .hero-banner-fallback-cta { display: inline-flex; margin-top: 0.75rem; padding: 0.45rem 0.85rem; font-size: 0.8125rem; font-weight: 600; border-radius: 0.5rem; background: rgb(255 255 255 / 0.95); color: var(--ink); } .hero-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .hero-tiles .hero-banner { border-radius: 0; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; } .hero-tiles .hero-banner:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); } .hero-carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 2.25rem; height: 2.25rem; border: 1px solid rgb(255 255 255 / 0.85); border-radius: 9999px; background: rgb(255 255 255 / 0.92); color: #334155; font-size: 1.35rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgb(15 23 42 / 0.12); } .hero-carousel-btn--prev { left: 0.5rem; } .hero-carousel-btn--next { right: 0.5rem; } .hero-carousel-btn:disabled { opacity: 0.35; cursor: default; } .hero-carousel-dots { display: flex; justify-content: center; gap: 0.35rem; margin-top: 0.65rem; } .hero-carousel-dot { width: 0.45rem; height: 0.45rem; border-radius: 9999px; border: none; padding: 0; background: #cbd5e1; cursor: pointer; } .hero-carousel-dot.is-active { background: var(--brand-600); width: 1.1rem; } /* Categories */ .category-carousel { display: flex; align-items: center; gap: 0.5rem; min-width: 0; } @media (min-width: 768px) { .category-carousel { gap: 0.75rem; } } .category-track-viewport { flex: 1 1 auto; min-width: 0; overflow-x: hidden; overflow-y: visible; padding-block: 0.625rem; margin-block: -0.625rem; } .category-track { display: flex; overflow-x: auto; overflow-y: visible; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding-inline: 0.35rem; padding-block: 0.35rem; } .category-track::-webkit-scrollbar { display: none; width: 0; height: 0; } .category-scroll-btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid #e2e8f0; border-radius: 9999px; background: #fff; color: #475569; font-size: 1.35rem; line-height: 1; cursor: pointer; box-shadow: 0 1px 3px rgb(15 23 42 / 0.08); transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } @media (min-width: 768px) { .category-scroll-btn { width: 2.5rem; height: 2.5rem; } } .category-scroll-btn:hover { color: var(--brand-700); border-color: color-mix(in srgb, var(--brand-600) 35%, #e2e8f0); } .category-scroll-btn:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; } .category-scroll-btn:disabled { opacity: 0.35; cursor: default; pointer-events: none; } .category-card { width: 10rem; flex-shrink: 0; text-align: center; transition: transform 0.15s ease; } @media (min-width: 1024px) { .category-track-viewport { container-type: inline-size; container-name: category-carousel; } .category-track { gap: 1.5rem; } .category-card { flex: 0 0 calc((100cqi - 5 * 1.5rem) / 6); width: calc((100cqi - 5 * 1.5rem) / 6); max-width: calc((100cqi - 5 * 1.5rem) / 6); } } .category-card-thumb { display: flex; align-items: center; justify-content: center; min-height: calc(8.25rem + 12px); padding: 6px; box-sizing: content-box; } .category-card:hover { transform: translateY(-3px); } .category-card img { width: 8.25rem; height: 8.25rem; margin: 0 auto; border-radius: 9999px; object-fit: cover; border: 3px solid #fff; box-shadow: var(--shadow-card); transition: box-shadow 0.15s ease; } .category-card:hover img { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-600) 35%, transparent), var(--shadow-hover); } .category-card:hover span { color: var(--brand-700); } .category-card span { display: block; margin-top: 0.75rem; font-size: 0.8125rem; font-weight: 600; line-height: 1.3; color: #334155; padding: 0 0.25rem; } @media (min-width: 1024px) { .category-card-thumb { min-height: calc(9.25rem + 12px); } .category-card img { width: 9.25rem; height: 9.25rem; } .category-card span { font-size: 0.9375rem; margin-top: 0.85rem; } } /* Section headings */ .section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; } .section-head h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); } .section-head p { font-size: 0.9375rem; color: var(--muted); margin-top: 0.25rem; } .product-cards-grid { gap: 1.5rem; } @media (max-width: 1023px) { .product-cards-grid { gap: 0.5rem; } .product-card-body { padding: 0.75rem; } .product-card-actions { padding-top: 0.75rem; gap: 0.375rem; } } /* Product card */ .product-card { position: relative; z-index: 0; background: #fff; border-radius: var(--radius-lg); border: 1px solid rgb(226 232 240 / 0.9); box-shadow: var(--shadow-card); overflow: visible; display: flex; flex-direction: column; } .product-card:has(.color-dot-wrap:hover), .product-card:has(.color-dot-wrap:focus-visible) { z-index: 5; } .product-card-media { display: block; position: relative; overflow: hidden; aspect-ratio: 1; background: #f1f5f9; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .product-card-media--swap:hover .product-card-img--primary, .product-card-media--swap:focus-visible .product-card-img--primary { opacity: 0; transform: scale(1.03); } .product-card-media--swap:hover .product-card-img--hover, .product-card-media--swap:focus-visible .product-card-img--hover { opacity: 1; transform: scale(1.03); } .product-card .product-card-img { width: 100%; height: 100%; object-fit: cover; background: #f1f5f9; transition: opacity 0.28s ease, transform 0.35s ease; } .product-card-img--primary { position: relative; z-index: 1; display: block; aspect-ratio: 1; } .product-card-img--hover { position: absolute; inset: 0; z-index: 2; opacity: 0; } .product-card-body { padding: 1rem; flex: 1; display: flex; flex-direction: column; min-height: 0; } .product-card-ref { margin: 0 0 0.35rem; font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.3; color: #475569; } .product-card-title { margin: 0; font-size: 1.0625rem; font-weight: 600; color: #0f172a; line-height: 1.35; } @media (max-width: 639px) { .product-card-title { font-size: 0.8125rem; line-height: 1.3; font-weight: 600; } } .product-card-title a { display: block; overflow: visible; overflow-wrap: normal; word-break: normal; hyphens: none; } .product-card-colors-label { margin: 0.75rem 0 0.35rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; } .product-card-colors { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; overflow: visible; position: relative; z-index: 1; } .product-card .color-dot-wrap { position: relative; display: inline-flex; padding: 0; border: none; background: transparent; cursor: pointer; outline: none; } .product-card .color-dot-wrap.is-active .color-dot { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--brand-600); } .product-card-media--color-picked.product-card-media--swap:hover .product-card-img--primary, .product-card-media--color-picked.product-card-media--swap:focus-visible .product-card-img--primary { opacity: 1; transform: none; } .product-card-media--color-picked .product-card-img--hover { opacity: 0 !important; } .product-card .color-dot { width: 1.125rem; height: 1.125rem; border-radius: 9999px; border: 2px solid #fff; box-shadow: 0 0 0 1px rgb(203 213 225); transition: transform 0.15s ease, box-shadow 0.15s ease; } .product-card .color-dot-wrap:hover .color-dot, .product-card .color-dot-wrap:focus-visible .color-dot { transform: scale(1.08); box-shadow: 0 0 0 1px rgb(148 163 184); } .product-card .color-dot-tip { position: absolute; z-index: 20; top: calc(100% + 0.45rem); left: 50%; transform: translateX(-50%) translateY(-3px); padding: 0.25rem 0.5rem; font-size: 0.6875rem; font-weight: 600; line-height: 1.25; white-space: nowrap; max-width: min(12rem, 70vw); overflow: hidden; text-overflow: ellipsis; color: #fff; background: #0f172a; border-radius: 0.35rem; box-shadow: 0 4px 12px rgb(15 23 42 / 0.25); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease; } .product-card .color-dot-tip::after { content: ''; position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); border: 4px solid transparent; border-bottom-color: #0f172a; } .product-card .color-dot-wrap:hover .color-dot-tip, .product-card .color-dot-wrap:focus-visible .color-dot-tip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .product-card-colors .color-dot-wrap:first-child:not(:only-child) .color-dot-tip { left: 0; transform: translateY(-3px); } .product-card-colors .color-dot-wrap:first-child:not(:only-child):hover .color-dot-tip, .product-card-colors .color-dot-wrap:first-child:not(:only-child):focus-visible .color-dot-tip { transform: translateY(0); } .product-card-colors .color-dot-wrap:first-child:not(:only-child) .color-dot-tip::after { left: 0.65rem; transform: none; } .product-card-colors .color-dot-wrap:last-child:not(:only-child) .color-dot-tip { left: auto; right: 0; transform: translateY(-3px); } .product-card-colors .color-dot-wrap:last-child:not(:only-child):hover .color-dot-tip, .product-card-colors .color-dot-wrap:last-child:not(:only-child):focus-visible .color-dot-tip { transform: translateY(0); } .product-card-colors .color-dot-wrap:last-child:not(:only-child) .color-dot-tip::after { left: auto; right: 0.65rem; transform: none; } .product-card-actions { display: grid; grid-template-columns: 1fr; gap: 0.5rem; margin-top: auto; padding-top: 1rem; } .product-card-action { display: inline-flex; width: 100%; align-items: center; justify-content: center; gap: 0.35rem; min-height: 2.375rem; padding: 0.45rem 0.5rem; font-size: 0.8125rem; font-weight: 600; line-height: 1.2; text-align: center; border-radius: 0.5rem; border: 1px solid color-mix(in srgb, var(--brand-600) 28%, white); color: var(--brand-700); background: #fff; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; text-decoration: none; } .product-card-action:hover { background: color-mix(in srgb, var(--brand-600) 10%, white); color: var(--brand-700); } .product-card-action--quote { background: var(--brand-600); border-color: var(--brand-600); color: #fff; } .product-card-action--quote:hover { background: var(--brand-700); border-color: var(--brand-700); color: #fff; } .product-card-action-icon { width: 1rem; height: 1rem; flex-shrink: 0; } /* Logos band */ .logos-band { background: linear-gradient(180deg, #fff 0%, #f8fafc 100%); border-block: 1px solid rgb(226 232 240 / 0.8); } .logos-carousel { --logos-per-view: 1; display: flex; align-items: center; gap: 0.5rem; width: 100%; max-width: 100%; min-width: 0; } @media (min-width: 480px) { .logos-carousel { --logos-per-view: 2; } } @media (min-width: 768px) { .logos-carousel { --logos-per-view: 3; } } @media (min-width: 1024px) { .logos-carousel { --logos-per-view: 5; } } .logos-scroll-btn { flex-shrink: 0; } .logos-track-viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; width: 100%; } .logos-track { display: flex; flex-wrap: nowrap; align-items: center; gap: 2rem; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .logos-track::-webkit-scrollbar { display: none; width: 0; height: 0; } .logos-slide { flex: 0 0 calc((100% - (var(--logos-per-view) - 1) * 2rem) / var(--logos-per-view)); scroll-snap-align: start; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0.25rem 0.5rem; box-sizing: border-box; } .logos-slide-img { height: 2.5rem; width: auto; max-width: min(70vw, 9.5rem); object-fit: contain; opacity: 0.75; filter: grayscale(100%); transition: opacity 0.2s ease, filter 0.2s ease; } @media (min-width: 768px) { .logos-slide-img { height: 3rem; max-width: 7.5rem; } .logos-slide:hover .logos-slide-img { opacity: 1; filter: none; } } /* Institutional pages (Quem somos, Contato, Catálogo digital) */ .institutional-page { padding-top: 3rem; padding-bottom: 3rem; } @media (min-width: 768px) { .institutional-page { padding-top: 4rem; padding-bottom: 4rem; } } .institutional-page-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; } @media (min-width: 768px) { .institutional-page-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem 3rem; } } .institutional-page-title, .institutional-page-main.prose h1 { font-family: 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif; font-size: clamp(1.875rem, 4vw, 2.125rem); font-weight: 700; letter-spacing: -0.02em; color: #0f172a; line-height: 1.15; margin: 0 0 1.375rem; } @media (min-width: 768px) { .institutional-page-title, .institutional-page-main.prose h1 { margin-bottom: 1.625rem; } } .institutional-page-panel { background: #fff; border-radius: 1.25rem; border: 1px solid rgb(226 232 240 / 0.9); box-shadow: var(--shadow-card); padding: 1.5rem; } @media (min-width: 768px) { .institutional-page-aside--sticky { position: sticky; top: 5.5rem; } } /* Páginas institucionais — coluna única (termos, etc.) */ .institutional-page--single-col { width: 100%; } .institutional-page--single-col .institutional-page-main--legal { width: 100%; max-width: 100%; margin-inline: auto; } .institutional-page-main--legal .institutional-page-title, .institutional-page-main--legal h1 { font-family: 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif; font-size: clamp(1.875rem, 4vw, 2.125rem); font-weight: 700; letter-spacing: -0.02em; color: #0f172a; line-height: 1.15; margin: 0 0 1.5rem; } .institutional-page-main--legal p { margin: 0 0 1.125rem; font-size: 1rem; line-height: 1.75; color: #334155; } .institutional-page-main--legal p:last-child { margin-bottom: 0; } .institutional-page-main--legal a { color: var(--brand-700); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; word-break: break-word; } .institutional-page-main--legal a:hover { color: var(--brand-600); } .institutional-page-main--legal.legal-content h2, .institutional-page-main--legal.legal-content h3 { font-family: 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif; font-weight: 700; color: #0f172a; margin: 1.75rem 0 0.75rem; line-height: 1.25; } .institutional-page-main--legal.legal-content h2 { font-size: 1.25rem; } .institutional-page-main--legal.legal-content h3 { font-size: 1.0625rem; } .institutional-page-main--legal.legal-content ul, .institutional-page-main--legal.legal-content ol { margin: 0 0 1.125rem; padding-left: 1.35rem; color: #334155; line-height: 1.75; } .institutional-page-main--legal.legal-content li + li { margin-top: 0.35rem; } .institutional-page-main--legal.legal-content strong { font-weight: 600; color: #1e293b; } @media (min-width: 768px) { .institutional-page-main--legal p, .institutional-page-main--legal.legal-content li { font-size: 1.0625rem; } } /* Contato */ .contact-panel { padding: 1.625rem 1.375rem 1.75rem; } @media (min-width: 768px) { .contact-panel { padding: 1.75rem 1.625rem 1.875rem; } } .contact-info-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; } .contact-info-item { display: flex; gap: 0.875rem; align-items: flex-start; } .contact-info-item > div:last-child { flex: 1; min-width: 0; padding-top: 0.05rem; } .contact-info-icon { flex-shrink: 0; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: 0.625rem; background: color-mix(in srgb, var(--brand-600) 12%, white); color: var(--brand-700); } .contact-info-icon--wa { color: #16a34a; background: color-mix(in srgb, #16a34a 12%, white); } .contact-info-label { margin: 0 0 0.2rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; } .contact-info-value { margin: 0; font-size: 0.875rem; line-height: 1.55; color: #334155; } .contact-info-link { color: #0f172a; text-decoration: none; } .contact-info-link:hover { color: #334155; text-decoration: underline; } .contact-form { display: flex; flex-direction: column; gap: 0.875rem; } .contact-form-field { display: flex; align-items: center; gap: 0.75rem; border: 1px solid #e2e8f0; border-radius: 0.625rem; padding: 0.45rem 0.875rem 0.45rem 0.75rem; background: #fff; cursor: text; } .contact-form-field:focus-within { border-color: color-mix(in srgb, var(--brand-600) 45%, white); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-600) 15%, transparent); } .contact-form-field--area { align-items: flex-start; padding-top: 0.65rem; padding-bottom: 0.65rem; } .contact-form-field--captcha { align-items: flex-start; padding-top: 0.65rem; padding-bottom: 0.65rem; } .contact-form-icon { flex-shrink: 0; color: #94a3b8; display: flex; align-items: center; justify-content: center; width: 1.35rem; } .contact-form-icon--top { margin-top: 0.15rem; } .contact-form-input { flex: 1; min-width: 0; border: none; background: transparent; padding: 0.45rem 0.25rem; font-size: 0.875rem; color: #0f172a; outline: none; } .contact-form-textarea { resize: vertical; min-height: 6.5rem; } .contact-captcha-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; } .contact-captcha-label { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; } .contact-captcha-question { font-size: 0.8125rem; color: #475569; } .contact-captcha-input { max-width: 8rem; border: 1px solid #e2e8f0 !important; border-radius: 0.375rem; padding: 0.4rem 0.5rem !important; background: #f8fafc !important; } .contact-form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .contact-form-success { margin: 0 0 0.75rem; color: var(--brand-700); font-weight: 600; } .contact-form-error { margin: 0 0 0.75rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: 0.5rem; } /* Catálogo digital (PDF flipbook) */ .catalog-digital-page { padding-top: 2.5rem; padding-bottom: 3rem; } .catalog-digital-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem 1.5rem; margin-bottom: 1.5rem; } .catalog-digital-lead { margin: 0.75rem 0 0; color: #64748b; line-height: 1.6; max-width: 36rem; } .catalog-digital-download { flex-shrink: 0; align-self: center; } .catalog-digital-download-foot { display: none; justify-content: center; margin-top: 1.25rem; } .catalog-digital-download-icon { width: 1.125rem; height: 1.125rem; flex-shrink: 0; } .catalog-flipbook-app { background: linear-gradient(180deg, #e2e8f0 0%, #cbd5e1 100%); border-radius: 1rem; border: 1px solid rgb(226 232 240 / 0.9); box-shadow: var(--shadow-card); padding: 1.25rem 0.75rem 1.5rem; min-height: 22rem; display: flex; align-items: center; justify-content: center; } @media (min-width: 768px) { .catalog-digital-page { padding-top: 1.35rem; padding-bottom: 0.75rem; } .catalog-digital-head { display: none; } .catalog-digital-download-foot { display: flex; } .catalog-flipbook-app { align-items: flex-start; justify-content: center; padding: 0.25rem 0.85rem 0.5rem; min-height: 0; overflow: visible; } .catalog-flipbook-app.catalog-flipbook-app--zoomed { overflow: auto; overscroll-behavior: contain; max-height: var(--catalog-flipbook-viewport-max-h, none); } .catalog-flipbook-app.catalog-flipbook-app--panning { cursor: grabbing; user-select: none; } .catalog-flipbook-book { max-height: var(--catalog-flipbook-h, none); overflow: visible; } .catalog-flipbook-app--zoomed .catalog-flipbook-book { overflow: hidden; } .catalog-flipbook-toolbar { margin-top: 0.5rem; } } .catalog-flipbook-book { width: 100%; max-width: 1100px; margin: 0 auto; } .catalog-flipbook-book img { image-rendering: auto; } .catalog-flipbook-loading { text-align: center; padding: 2rem 1rem; color: #475569; } .catalog-flipbook-loading-title { font-weight: 600; margin: 0 0 0.35rem; } .catalog-flipbook-loading-detail { margin: 0; font-size: 0.875rem; color: #64748b; } .catalog-flipbook-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1rem; margin-top: 1rem; } .catalog-flipbook-nav { border: 1px solid #e2e8f0; background: #fff; color: #0f172a; border-radius: 0.5rem; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .catalog-flipbook-nav:hover { background: #f8fafc; border-color: #cbd5e1; } .catalog-flipbook-status { font-size: 0.875rem; color: #64748b; min-width: 8rem; text-align: center; } .catalog-digital-empty { max-width: 36rem; } /* About block */ .about-panel { background: #fff; border-radius: 1.25rem; border: 1px solid rgb(226 232 240 / 0.9); box-shadow: var(--shadow-card); padding: 2rem; } .review-card { background: #fff; border-radius: var(--radius-lg); border: 1px solid rgb(226 232 240 / 0.9); padding: 1.25rem; box-shadow: var(--shadow-card); } .review-card-head { display: flex; align-items: center; gap: 0.75rem; } .review-card-avatar { width: 2.75rem; height: 2.75rem; border-radius: 9999px; object-fit: cover; flex-shrink: 0; border: 2px solid #f1f5f9; } .review-card-avatar--initial { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; color: var(--brand-700); background: color-mix(in srgb, var(--brand-600) 14%, white); } .review-google-cta { white-space: nowrap; } .review-admin-avatar { width: 3rem; height: 3rem; border-radius: 9999px; object-fit: cover; flex-shrink: 0; } .review-admin-avatar--empty { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--brand-700); background: #f1f5f9; } .home-blog-section { background: #fff; border-radius: 1.25rem; border: 1px solid rgb(226 232 240 / 0.95); box-shadow: var(--shadow-card); } @media (max-width: 639px) { .home-blog-section { margin-inline: 0.5rem; border-radius: 1rem; } } .blog-card { background: #fff; border-radius: var(--radius-lg); border: 1px solid rgb(226 232 240 / 0.9); padding: 1.25rem; transition: transform 0.15s ease, box-shadow 0.15s ease; } .blog-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); } .blog-card--with-media { display: flex; flex-direction: column; padding: 0; overflow: hidden; height: 100%; } .blog-card--with-media .blog-card-media, .blog-card--with-media > .blog-card-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #f1f5f9; } .blog-card--with-media .blog-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s ease; } .blog-card--with-media:hover .blog-card-media img { transform: scale(1.03); } .blog-card--with-media .blog-card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.125rem 1.375rem 1.5rem; min-height: 0; } .blog-card--with-media .blog-card-title, .blog-card--with-media h2.blog-card-title, .blog-card--with-media h3.blog-card-title { padding: 0; margin: 0; font-family: 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif; font-size: 1.0625rem; font-weight: 600; line-height: 1.35; color: #0f172a; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.15s ease; } .blog-card--with-media:hover .blog-card-title { color: var(--brand-700); } .blog-card-excerpt { margin: 0.75rem 0 0; padding: 0; font-size: 0.875rem; color: #64748b; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .blog-card-link { display: inline-block; margin: 1rem 0 0; padding: 0; font-size: 0.875rem; font-weight: 600; line-height: 1.35; color: var(--brand-700); } .blog-page { padding-top: 2.75rem; padding-bottom: 3.5rem; } .blog-list-stack { display: flex; flex-direction: column; gap: 0; min-width: 0; } .blog-list-item { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid #e2e8f0; text-decoration: none; color: inherit; transition: background 0.15s ease; } @media (min-width: 640px) { .blog-list-item { flex-direction: row; align-items: stretch; gap: 1.25rem; padding: 1.5rem 0; } } .blog-list-item:first-child { padding-top: 0; } .blog-list-item:last-child { border-bottom: none; } .blog-list-item:hover .blog-list-item-title { color: var(--brand-700); } .blog-list-item-media { flex: 0 0 auto; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 0.75rem; overflow: hidden; background: #f1f5f9; border: 1px solid rgb(226 232 240 / 0.9); } @media (min-width: 640px) { .blog-list-item-media { width: 11.5rem; aspect-ratio: 4 / 3; } } @media (min-width: 1024px) { .blog-list-item-media { width: 13.5rem; } } .blog-list-item-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s ease; } .blog-list-item:hover .blog-list-item-media img { transform: scale(1.02); } .blog-list-item-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; } .blog-list-item-title { margin: 0; font-family: 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif; font-size: 1.125rem; font-weight: 700; line-height: 1.35; color: #0f172a; transition: color 0.15s ease; } @media (min-width: 768px) { .blog-list-item-title { font-size: 1.25rem; } } .blog-list-item-excerpt { margin: 0.5rem 0 0; font-size: 0.9375rem; line-height: 1.55; color: #64748b; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .blog-list-item-link { margin-top: 0.75rem; font-size: 0.875rem; font-weight: 600; color: var(--brand-600); } .blog-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 0.75rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #e2e8f0; } .blog-pagination-pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem; list-style: none; margin: 0; padding: 0; } .blog-pagination-btn, .blog-pagination-page { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; min-height: 2.25rem; padding: 0.35rem 0.75rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 600; text-decoration: none; color: #334155; border: 1px solid #e2e8f0; background: #fff; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .blog-pagination-page.is-current { color: #fff; background: var(--brand-600); border-color: var(--brand-600); } .blog-pagination-btn:hover, .blog-pagination-page:hover { color: var(--brand-700); border-color: color-mix(in srgb, var(--brand-600) 35%, #e2e8f0); } .blog-pagination-btn--disabled { opacity: 0.4; pointer-events: none; } @media (max-width: 1023px) { .blog-list-layout.blog-post-layout--with-sidebar { display: flex; flex-direction: column; gap: 2rem; } .blog-list-sidebar { position: static; max-height: none; overflow: visible; } } @media (min-width: 768px) { .blog-page { padding-top: 3.5rem; padding-bottom: 4.75rem; } } .blog-post-layout { display: block; } .blog-post-layout--single { width: 100%; max-width: 42rem; margin-left: auto; margin-right: auto; } .blog-post-layout--single .blog-post-title { text-align: left; } .blog-post-prose { font-size: 1rem; line-height: 1.75; color: #334155; } .blog-post-prose .blog-post-content > :first-child { margin-top: 0; } .blog-post-prose p { margin: 0 0 1.125rem; line-height: 1.75; color: #334155; } .blog-post-prose p:last-child { margin-bottom: 0; } .blog-post-prose a { color: var(--brand-700); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; word-break: break-word; } .blog-post-prose a:hover { color: var(--brand-600); } .blog-post-prose h2, .blog-post-prose h3, .blog-post-prose h4 { font-family: 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif; font-weight: 700; color: #0f172a; line-height: 1.3; margin: 1.75rem 0 0.75rem; } .blog-post-prose h2 { font-size: 1.375rem; } .blog-post-prose h3 { font-size: 1.125rem; } .blog-post-prose h4 { font-size: 1rem; } .blog-post-prose ul, .blog-post-prose ol { margin: 0 0 1.125rem; padding-left: 1.35rem; color: #334155; line-height: 1.75; } .blog-post-prose li + li { margin-top: 0.35rem; } .blog-post-prose strong, .blog-post-prose b { font-weight: 600; color: #1e293b; } .blog-post-prose blockquote { margin: 1.25rem 0; padding: 0.75rem 1rem; border-left: 3px solid color-mix(in srgb, var(--brand-600) 45%, #e2e8f0); background: #f8fafc; color: #475569; border-radius: 0 0.5rem 0.5rem 0; } .blog-post-prose .blog-post-content > div { margin-bottom: 1rem; } .blog-post-prose .blog-post-content table { width: 100%; max-width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; font-size: 0.9375rem; } .blog-post-prose .blog-post-content th, .blog-post-prose .blog-post-content td { border: 1px solid #e2e8f0; padding: 0.5rem 0.65rem; text-align: left; vertical-align: top; } .blog-post-prose .blog-post-faq { display: flex; flex-direction: column; gap: 0.75rem; margin: 0.75rem 0 1.5rem; } .blog-post-prose .blog-post-content > h2:has(+ .blog-post-faq), .blog-post-prose .blog-post-content > h2:has(+ details), .blog-post-prose .blog-post-content > h3:has(+ .blog-post-faq), .blog-post-prose .blog-post-content > h3:has(+ details) { margin-bottom: 1rem; } .blog-post-faq-item, .blog-post-prose .blog-post-content > details { padding: 0; border-radius: 0.75rem; border: 1px solid #e2e8f0; background: #fff; box-shadow: 0 1px 2px rgb(15 23 42 / 0.04); overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .blog-post-prose .blog-post-content > details { margin-bottom: 0.75rem; } .blog-post-prose .blog-post-content > details:last-child { margin-bottom: 0; } .blog-post-faq-item:hover, .blog-post-prose .blog-post-content > details:hover { border-color: color-mix(in srgb, var(--brand-600) 22%, #e2e8f0); } .blog-post-faq-item[open], .blog-post-prose .blog-post-content > details[open] { border-color: color-mix(in srgb, var(--brand-600) 38%, #e2e8f0); background: linear-gradient(180deg, #fff 0%, #f8fafc 100%); box-shadow: 0 4px 14px rgb(15 23 42 / 0.06); } .blog-post-faq-item summary, .blog-post-prose .blog-post-content > details > summary { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem 1.15rem; font-family: 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif; font-weight: 600; font-size: 1rem; line-height: 1.45; cursor: pointer; color: #0f172a; list-style: none; user-select: none; } .blog-post-faq-item summary::-webkit-details-marker, .blog-post-prose .blog-post-content > details > summary::-webkit-details-marker { display: none; } .blog-post-faq-item summary::before, .blog-post-prose .blog-post-content > details > summary::before { content: ''; flex-shrink: 0; width: 1.35rem; height: 1.35rem; margin-top: 0.1rem; border-radius: 9999px; border: 1px solid #e2e8f0; background-color: #f8fafc; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 0.7rem; transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; } .blog-post-faq-item[open] summary::before, .blog-post-prose .blog-post-content > details[open] > summary::before { transform: rotate(90deg); background-color: color-mix(in srgb, var(--brand-600) 12%, #fff); border-color: color-mix(in srgb, var(--brand-600) 35%, #e2e8f0); } .blog-post-faq-item[open] summary, .blog-post-prose .blog-post-content > details[open] > summary { color: var(--brand-700); } .blog-post-faq-item p, .blog-post-prose .blog-post-content > details > p { margin: 0; padding: 0 1.15rem 1.1rem 3.25rem; font-size: 1rem; line-height: 1.7; color: #475569; border-top: 1px solid #f1f5f9; padding-top: 0.85rem; } .blog-post-faq-item summary:focus-visible, .blog-post-prose .blog-post-content > details > summary:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand-600) 45%, transparent); outline-offset: -2px; border-radius: 0.75rem; } .blog-post-related--below { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid #e2e8f0; } .blog-post-related-list--inline { gap: 1.25rem; } @media (min-width: 768px) { .blog-post-prose { font-size: 1.0625rem; } } .blog-post-layout--with-sidebar { display: flex; flex-direction: column; gap: 0; } @media (min-width: 1024px) { .blog-post-layout--with-sidebar { display: grid; grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); grid-template-areas: 'related article'; column-gap: 2.75rem; align-items: start; } .blog-post-layout--with-sidebar .blog-post-related { grid-area: related; position: sticky; top: calc(var(--site-header-height, 4.25rem) + 1.25rem); align-self: start; min-width: 0; max-width: 100%; max-height: calc(100vh - var(--site-header-height, 4.25rem) - 2.5rem); overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; padding-bottom: 0.5rem; box-sizing: border-box; } .blog-post-layout--with-sidebar .blog-post-article { grid-area: article; min-width: 0; } } .blog-post-header { min-width: 0; } .blog-post-title.institutional-page-title { margin: 0; } .blog-post-body { min-width: 0; margin-top: 1.25rem; } .blog-post-related-title { margin: 0 0 1rem; font-family: 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #64748b; } .blog-post-related { min-width: 0; max-width: 100%; overflow-x: hidden; } .blog-post-related-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; min-width: 0; max-width: 100%; } .blog-post-related-list > li { min-width: 0; max-width: 100%; } .blog-post-related-link { display: flex; gap: 0.65rem; align-items: flex-start; text-decoration: none; color: inherit; padding: 0.35rem 0; margin: 0; border-radius: 0.65rem; max-width: 100%; box-sizing: border-box; transition: background 0.15s ease; } .blog-post-related-link:hover { background: rgb(241 245 249 / 0.85); } .blog-post-related-link:hover .blog-post-related-name { color: var(--brand-700); } .blog-post-related-thumb { flex-shrink: 0; width: 3.5rem; height: 3.5rem; border-radius: 0.5rem; overflow: hidden; background: #f1f5f9; border: 1px solid rgb(226 232 240 / 0.95); } .blog-post-related-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .blog-post-related-text { min-width: 0; flex: 1 1 auto; padding-top: 0.1rem; } .blog-post-related-name { display: block; font-size: 0.875rem; font-weight: 600; line-height: 1.45; color: #0f172a; transition: color 0.15s ease; overflow-wrap: break-word; word-break: break-word; hyphens: auto; } .blog-post-related-all { display: inline-block; margin-top: 1rem; max-width: 100%; font-size: 0.8125rem; font-weight: 600; line-height: 1.4; color: var(--brand-700); text-decoration: none; overflow-wrap: break-word; } .blog-post-related-all:hover { text-decoration: underline; } @media (max-width: 1023px) { .blog-post-layout--with-sidebar .blog-post-article { order: 1; } .blog-post-layout--with-sidebar .blog-post-body { margin-top: 1.25rem; } .blog-post-layout--with-sidebar .blog-post-related { order: 2; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid #e2e8f0; } } .blog-post-cover { margin: 0 0 1.5rem; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgb(226 232 240 / 0.9); } .blog-post-cover img { display: block; width: 100%; height: auto; } .blog-post-content img { max-width: 100%; height: auto; border-radius: 0.5rem; } .site-footer { background: linear-gradient(180deg, #f8fafc 0%, #fff 40%, #f1f5f9 100%); color: #475569; border-top: 1px solid #e2e8f0; } .site-footer-grid { display: grid; gap: 2.5rem 2rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .site-footer-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .site-footer-grid { grid-template-columns: 1.35fr 0.85fr 1.15fr 0.85fr; gap: 2rem 2.5rem; } } .site-footer-heading { font-family: var(--font-display, 'Plus Jakarta Sans', system-ui, sans-serif); font-size: 0.9375rem; font-weight: 700; color: var(--brand-700); margin: 0 0 1rem; letter-spacing: 0.02em; } .site-footer-logo-link { display: inline-block; margin-bottom: 1rem; } .site-footer-logo { max-height: 3.25rem; width: auto; max-width: 220px; object-fit: contain; } .site-footer-logo-text { display: inline-block; font-family: var(--font-display, 'Plus Jakarta Sans', system-ui, sans-serif); font-size: 1.25rem; font-weight: 800; color: #0f172a; text-decoration: none; margin-bottom: 0.75rem; } .site-footer-tagline { font-size: 0.875rem; line-height: 1.65; color: #64748b; max-width: 22rem; margin: 0; } .site-footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .site-footer-links a { font-size: 0.875rem; color: #475569; text-decoration: none; transition: color 0.12s ease; } .site-footer-links a:hover { color: var(--brand-700); } .site-footer-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.875rem; } .site-footer-contact-link { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.8125rem; line-height: 1.45; color: #475569; text-decoration: none; transition: color 0.12s ease; } .site-footer-contact-link:hover { color: var(--brand-700); } .site-footer-contact-static { cursor: default; } .site-footer-contact-label { display: block; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8; margin-bottom: 0.15rem; } .site-footer-contact strong { font-weight: 600; color: #0f172a; } .site-footer-address { display: block; line-height: 1.45; font-weight: 600; color: #0f172a; } .site-footer-icon { flex-shrink: 0; margin-top: 0.125rem; color: var(--brand-600); opacity: 0.95; } .site-footer-icon svg { display: block; } .site-footer-social-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; color: #334155; text-decoration: none; margin-bottom: 1.25rem; } .site-footer-social-link:hover { color: var(--brand-700); } .site-footer-muted { font-size: 0.875rem; color: #94a3b8; margin: 0 0 1rem; } .site-footer-trust { margin-top: 0.5rem; padding-top: 1rem; border-top: 1px solid #e2e8f0; } .site-footer-trust-badge { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; padding: 0.5rem 0.65rem; border-radius: 0.375rem; border: 1px solid #bbf7d0; background: #f0fdf4; } .site-footer-icon-lock { color: #16a34a; } .site-footer-bottom { border-top: 1px solid #e2e8f0; color: #64748b; background: #fff; } .site-footer-bottom-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; text-align: left; } @media (min-width: 640px) { .site-footer-bottom-inner { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; } .site-footer-bottom-inner p:last-child { text-align: right; } } @media (min-width: 768px) { .site-footer-bottom-inner.max-w-7xl { padding-right: calc(var(--site-gutter) + 5rem); } } .site-footer-credit { font-weight: 600; color: var(--brand-700); text-decoration: none; } .site-footer-credit:hover { color: var(--brand-600); } .site-footer-bottom-sep { margin-inline: 0.35rem; opacity: 0.65; } .site-footer-legal-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .site-footer-legal-link:hover { color: var(--brand-700); text-decoration: underline; } body { padding-bottom: env(safe-area-inset-bottom, 0); } .floating-contact { position: fixed; right: max(1rem, env(safe-area-inset-right, 0)); bottom: max(1rem, env(safe-area-inset-bottom, 0)); z-index: 45; display: flex; flex-direction: column; align-items: center; gap: 0.625rem; transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease; } .floating-contact.floating-contact--hero-fold:not(.floating-contact--visible) { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(0.5rem); } @media (min-width: 768px) { .floating-contact { right: 1.25rem; bottom: 1.25rem; } } .floating-contact-btn { display: flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border-radius: 9999px; color: #fff; text-decoration: none; box-shadow: 0 4px 14px rgb(15 23 42 / 0.22), 0 2px 4px rgb(15 23 42 / 0.12); transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } .floating-contact-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgb(15 23 42 / 0.24); filter: brightness(1.05); } .floating-contact-btn--phone { background: linear-gradient(145deg, var(--brand-600), var(--brand-700)); } .floating-contact-btn--whatsapp { background: linear-gradient(145deg, #25d366, #128c7e); } /* Catálogo personalizado: sem botões flutuantes de contato (usa carrinho/orçamento) */ body.site-body--catalog-public .floating-contact { display: none !important; } @media (max-width: 1023px) { body:has(.page-produtos-list) .floating-contact { display: none; } body:has(.page-catalogo-list):not(.site-body--catalog-public) .floating-contact { display: none; } } .products-filter-fab { display: none; } @media (max-width: 1023px) { .products-filter-fab:not(.catalog-mobile-foot-btn) { position: fixed; right: max(1rem, env(safe-area-inset-right, 0)); bottom: max(1rem, env(safe-area-inset-bottom, 0)); z-index: 46; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; min-width: 3.25rem; min-height: 3.25rem; padding: 0.5rem 0.65rem; border: none; border-radius: 9999px; background: linear-gradient( 145deg, var(--brand-accent), color-mix(in srgb, var(--brand-accent) 82%, #000) ); color: #fff; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.1; box-shadow: 0 4px 14px color-mix(in srgb, var(--brand-accent) 35%, transparent), 0 2px 4px rgb(15 23 42 / 0.12); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } .products-filter-fab:not(.catalog-mobile-foot-btn):hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 8px 22px color-mix(in srgb, var(--brand-accent) 42%, transparent); } .products-filter-fab:not(.catalog-mobile-foot-btn):focus-visible { outline: 2px solid color-mix(in srgb, var(--brand-accent) 55%, white); outline-offset: 3px; } .products-filter-fab-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; } .products-filter-fab-label { max-width: 4.5rem; } .products-filter-fab-badge { position: absolute; top: 0.35rem; right: 0.35rem; width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: #fff; box-shadow: 0 0 0 2px var(--brand-accent); } .products-filter-drawer { display: none; } .products-filter-drawer.is-open { display: flex; flex-direction: column; justify-content: flex-end; position: fixed; inset: 0; z-index: 70; padding: 0; margin: 0; pointer-events: auto; } .products-filter-backdrop { position: absolute; inset: 0; border: none; padding: 0; margin: 0; background: rgb(15 23 42 / 0.45); cursor: pointer; } .products-filter-sheet { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; max-height: min(92dvh, 720px); height: min(92dvh, 720px); overflow: hidden; background: #f8fafc; border-radius: 1.25rem 1.25rem 0 0; box-shadow: 0 -8px 32px rgb(15 23 42 / 0.18); animation: products-filter-sheet-in 0.28s ease-out; } @keyframes products-filter-sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } } .products-filter-sheet-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-shrink: 0; padding: 1rem 1rem 0.75rem; border-bottom: 1px solid #e2e8f0; background: #fff; } .products-filter-sheet-title { margin: 0; font-family: var(--font-display, inherit); font-size: 1.125rem; font-weight: 700; color: #0f172a; } .products-filter-sheet-close { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: none; border-radius: 9999px; background: #f1f5f9; color: #475569; cursor: pointer; } .products-filter-sheet-close svg { width: 1.125rem; height: 1.125rem; } .products-filter-drawer .category-sidebar { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 1rem; overflow: hidden; padding: 1rem 1rem max(1rem, env(safe-area-inset-bottom, 0)); } .products-filter-drawer .category-sidebar > .sidebar-filter-card:first-child { flex-shrink: 0; } .products-filter-drawer .category-sidebar > .sidebar-filter-card:last-child { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .products-filter-drawer [data-sidebar-section="categories"] { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; } .products-filter-drawer [data-sidebar-section="categories"] .sidebar-filter-panel { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .products-filter-drawer .color-filter-scroll { max-height: min(28dvh, 200px); } .products-filter-drawer [data-sidebar-section="categories"] .category-nav-list { padding-bottom: 1.25rem; } body.products-filter-open { overflow: hidden; } } @media (min-width: 1024px) { .products-filter-drawer { display: block; } .products-filter-backdrop, .products-filter-sheet-header { display: none; } .products-filter-sheet { display: contents; } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Página produtos, sidebar */ .sidebar-filter-card { box-shadow: var(--shadow-card); } .sidebar-filter-section:not(.is-open) .sidebar-filter-panel { display: none; } .sidebar-filter-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.875rem 1rem; border: none; background: linear-gradient(180deg, #f8fafc 0%, #fff 100%); cursor: pointer; text-align: left; color: inherit; transition: background 0.15s ease; } .sidebar-filter-toggle--muted { background: #f8fafc; } .sidebar-filter-toggle:hover { background: #f1f5f9; } .sidebar-filter-toggle:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand-600) 45%, white); outline-offset: -2px; } .sidebar-filter-chevron { width: 1.125rem; height: 1.125rem; flex-shrink: 0; color: #64748b; transition: transform 0.2s ease; } .sidebar-filter-section:not(.is-open) .sidebar-filter-chevron { transform: rotate(-90deg); } .category-nav-list { flex-shrink: 0; overflow: visible; padding: 0 0 0.5rem; } .category-nav-all-block { padding: 0.875rem 0 0.75rem; margin: 0 0 0.25rem; border-bottom: 1px solid #e2e8f0; } .category-nav-all-block .category-nav-link { margin-left: 0.5rem; margin-right: 0.5rem; } .color-filter-scroll { scrollbar-width: thin; scrollbar-color: #94a3b8 transparent; } .color-filter-scroll::-webkit-scrollbar { width: 6px; } .color-filter-scroll::-webkit-scrollbar-track { background: transparent; margin: 4px 0; } .color-filter-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; } .color-filter-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; } .category-nav-divider { height: 1px; background: linear-gradient(90deg, transparent, #e2e8f0 12%, #e2e8f0 88%, transparent); } .category-nav-group:first-of-type .category-nav-divider { display: none; } .category-nav-link { color: #475569; transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease; border-left: 3px solid transparent; } .category-nav-link:hover { background: #f8fafc; color: var(--brand-700); } .category-nav-link.is-active { background: color-mix(in srgb, var(--brand-600) 10%, white); color: var(--brand-700); border-left-color: var(--brand-600); font-weight: 600; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-600) 12%, transparent); } .category-nav-badge { font-size: 0.65rem; font-weight: 700; line-height: 1; padding: 0.2rem 0.45rem; border-radius: 999px; background: #f1f5f9; color: #64748b; } .category-nav-parent.is-active .category-nav-badge { background: color-mix(in srgb, var(--brand-600) 18%, white); color: var(--brand-700); } .category-nav-children { display: none; border-left: 2px solid #e2e8f0; margin-left: 1.25rem; padding-left: 0.25rem; } .category-nav-group.is-open .category-nav-children { display: block; } .color-filter-grid .color-filter-chip { min-height: 2.125rem; } .color-filter-chip { background: #fff; color: #475569; text-decoration: none; transition: border-color 0.12s ease, background 0.12s ease; } .color-filter-chip--all { font-weight: 600; } .color-filter-chip:hover { border-color: color-mix(in srgb, var(--brand-600) 35%, white); background: #f8fafc; } .color-filter-chip.is-active { border-color: var(--brand-600); background: color-mix(in srgb, var(--brand-600) 10%, white); color: var(--brand-700); } .site-footer a.text-brand-footer { color: color-mix(in srgb, var(--brand-600) 75%, white); } /* Página do produto */ .product-page { color: var(--ink); max-width: 100%; overflow-x: clip; } .product-page-layout > * { min-width: 0; } .catalog-product-back { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0 0 0.75rem; padding: 0.45rem 0.75rem; border-radius: 999px; border: 1px solid #e2e8f0; background: #fff; color: var(--brand-700); font-size: 0.8125rem; font-weight: 600; text-decoration: none; box-shadow: 0 1px 2px rgb(15 23 42 / 0.04); transition: background 0.15s ease, border-color 0.15s ease; } .catalog-product-back svg { width: 1rem; height: 1rem; flex-shrink: 0; } .catalog-product-back:hover { background: #f8fafc; border-color: color-mix(in srgb, var(--brand-600) 25%, #e2e8f0); color: var(--brand-700); } .product-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0 0 0.85rem; font-size: 0.8125rem; color: #64748b; } .product-breadcrumb a { color: var(--brand-700); text-decoration: none; font-weight: 600; } .product-breadcrumb a:hover { text-decoration: underline; } .product-breadcrumb-current { color: #475569; } .product-page-layout { display: grid; gap: 2rem; align-items: start; } @media (min-width: 768px) { .product-page-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem 3rem; } } @media (min-width: 1024px) { .product-page-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } } .product-gallery { min-width: 0; } @media (max-width: 767px) { .product-gallery, .product-gallery-stage { scroll-margin-top: calc(var(--site-header-height, 4.5rem) + 0.5rem); } } .product-gallery-view { display: flex; flex-direction: column; gap: 0.65rem; min-width: 0; } .product-gallery-view--with-thumbs { display: flex; flex-direction: column; gap: 0.75rem; align-items: stretch; width: 100%; max-width: 100%; } .product-gallery-view--with-thumbs .product-gallery-stage { order: 1; } .product-gallery-view--with-thumbs .product-gallery-thumbs-col { order: 2; } @media (min-width: 768px) { .product-gallery-view--with-thumbs { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); gap: 0.65rem; } .product-gallery-view--with-thumbs .product-gallery-stage, .product-gallery-view--with-thumbs .product-gallery-thumbs-col { order: unset; } } .product-gallery-stage { position: relative; width: 100%; max-width: 100%; min-width: 0; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid rgb(226 232 240 / 0.95); background: #fff; box-shadow: var(--shadow-card); aspect-ratio: 1; isolation: isolate; } .product-gallery-main-trigger { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; padding: 0; margin: 0; border: none; background: #fff; cursor: zoom-in; overflow: hidden; } .product-gallery-main { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; background: #fff; pointer-events: none; } .product-gallery-nav { position: absolute; top: 50%; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: none; border-radius: 9999px; background: rgb(255 255 255 / 0.92); color: #334155; box-shadow: 0 2px 10px rgb(15 23 42 / 0.15); cursor: pointer; transform: translateY(-50%); transition: background 0.15s ease, color 0.15s ease; } .product-gallery-nav svg { width: 1.25rem; height: 1.25rem; } .product-gallery-nav:hover { background: #fff; color: var(--brand-700); } .product-gallery-nav--prev { left: 0.5rem; } .product-gallery-nav--next { right: 0.5rem; } .product-lightbox { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 1rem; } .product-lightbox[hidden] { display: none !important; } body.product-lightbox-open { overflow: hidden; } .product-lightbox-backdrop { position: absolute; inset: 0; border: none; padding: 0; margin: 0; background: rgb(15 23 42 / 0.88); cursor: pointer; } .product-lightbox-dialog { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: min(100%, 56rem); max-width: 100%; max-height: min(92dvh, 900px); padding: 2.75rem 3rem 2rem; box-sizing: border-box; pointer-events: none; } .product-lightbox-dialog > * { pointer-events: auto; } .product-lightbox-image { display: block; max-width: 100%; max-height: min(85dvh, 820px); width: auto; height: auto; object-fit: contain; border-radius: 0.5rem; box-shadow: 0 16px 48px rgb(0 0 0 / 0.35); } .product-lightbox-close { position: absolute; top: 0; right: 0; z-index: 4; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: none; border-radius: 9999px; background: rgb(255 255 255 / 0.95); color: #334155; cursor: pointer; } .product-lightbox-close svg { width: 1.25rem; height: 1.25rem; } .product-lightbox-nav { position: absolute; top: 50%; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: none; border-radius: 9999px; background: rgb(255 255 255 / 0.95); color: #334155; cursor: pointer; transform: translateY(-50%); box-shadow: 0 4px 16px rgb(0 0 0 / 0.25); } .product-lightbox-nav svg { width: 1.35rem; height: 1.35rem; } .product-lightbox-nav--prev { left: 0.25rem; } .product-lightbox-nav--next { right: 0.25rem; } @media (max-width: 767px) { .product-lightbox-dialog { padding: 2.5rem 0.5rem 1.5rem; } } .product-lightbox-counter { position: absolute; bottom: -2rem; left: 50%; transform: translateX(-50%); margin: 0; font-size: 0.8125rem; font-weight: 600; color: rgb(255 255 255 / 0.85); } .product-gallery-thumbs-col { display: flex; flex-direction: row; align-items: center; gap: 0.35rem; width: 100%; min-width: 0; min-height: 0; } @media (min-width: 768px) { .product-gallery-thumbs-col { flex-direction: column; width: 4.25rem; align-self: start; } } .product-gallery-thumbs-nav { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.125rem; height: 2.125rem; padding: 0; border: 1px solid color-mix(in srgb, var(--brand-600) 22%, #e2e8f0); border-radius: 0.55rem; background: linear-gradient(180deg, #fff 0%, #f8fafc 100%); color: var(--brand-700); cursor: pointer; box-shadow: 0 2px 8px rgb(15 23 42 / 0.1); transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .product-gallery-thumbs-nav svg { width: 1.35rem; height: 1.35rem; stroke-width: 2.25; } .product-gallery-thumbs-nav:hover:not(:disabled) { background: color-mix(in srgb, var(--brand-600) 10%, white); color: var(--brand-700); border-color: color-mix(in srgb, var(--brand-600) 45%, #e2e8f0); box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-600) 18%, transparent); transform: translateY(-1px); } .product-gallery-thumbs-nav:disabled { opacity: 0.4; cursor: default; box-shadow: none; } .product-gallery-thumbs-nav--up svg { transform: rotate(-90deg); } .product-gallery-thumbs-nav--down svg { transform: rotate(-90deg); } @media (min-width: 768px) { .product-gallery-thumbs-nav { width: 100%; height: 2.125rem; } .product-gallery-thumbs-nav--up svg, .product-gallery-thumbs-nav--down svg { transform: none; } } .product-gallery-thumbs { display: flex; flex-direction: row; gap: 0.5rem; flex: 1 1 auto; min-width: 0; width: 100%; max-width: 100%; min-height: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; padding: 0.15rem 0; scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; } @media (min-width: 768px) { .product-gallery-thumbs { flex-direction: column; flex: unset; max-height: calc(5 * 4.25rem + 4 * 0.5rem); overflow-x: hidden; overflow-y: auto; overscroll-behavior-x: auto; overscroll-behavior-y: contain; padding: 0; scroll-snap-type: y proximity; } } .product-gallery-thumbs::-webkit-scrollbar { display: none; width: 0; height: 0; } .product-gallery-thumb { flex: 0 0 auto; width: 4.25rem; height: 4.25rem; padding: 0; border: 2px solid #e2e8f0; border-radius: 0.65rem; background: #fff; cursor: pointer; overflow: hidden; scroll-snap-align: start; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .product-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .product-gallery-thumb:hover { border-color: color-mix(in srgb, var(--brand-600) 35%, #e2e8f0); } .product-gallery-thumb.is-active { border-color: var(--brand-600); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-600) 25%, transparent); } .product-page-colors { margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid #e2e8f0; } .product-page-colors-label { margin: 0 0 0.5rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; } .product-page-colors-list { display: flex; flex-wrap: wrap; gap: 0.5rem; } .product-page-color-swatch { display: inline-flex; padding: 0.2rem; border: none; background: transparent; border-radius: 9999px; cursor: pointer; } .product-page-color-swatch-dot { display: block; width: 1.75rem; height: 1.75rem; border-radius: 9999px; border: 1px solid rgb(15 23 42 / 0.12); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35); } .product-page-color-swatch.color-swatch-active .product-page-color-swatch-dot { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--brand-600); } .product-page-variations { margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid #e2e8f0; } .product-variation-picker { position: relative; } .product-variation-picker-trigger { display: flex; align-items: center; gap: 0.65rem; width: 100%; margin: 0; padding: 0.5rem 0.65rem; font-family: inherit; font-size: 0.875rem; line-height: 1.45; text-align: left; color: #334155; background-color: #fff; border: 1px solid #e2e8f0; border-radius: 0.75rem; box-shadow: 0 1px 2px rgb(15 23 42 / 0.04); cursor: pointer; } .product-variation-picker-trigger:hover { border-color: color-mix(in srgb, var(--brand-600) 25%, #e2e8f0); } .product-variation-picker.is-open .product-variation-picker-trigger, .product-variation-picker-trigger:focus-visible { outline: none; border-color: var(--brand-600); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-600) 18%, transparent); } .product-variation-picker-text { flex: 1; min-width: 0; } .product-variation-picker-chevron { flex-shrink: 0; width: 1rem; height: 1rem; color: #64748b; transition: transform 0.15s ease; } .product-variation-picker.is-open .product-variation-picker-chevron { transform: rotate(180deg); } .product-variation-picker-thumb, .product-variation-picker-option-thumb { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 0.5rem; border: 1px solid #e2e8f0; background: #f8fafc; overflow: hidden; } .product-variation-picker-thumb-img, .product-variation-picker-option-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; } .product-variation-picker-thumb-img.is-placeholder, .product-variation-picker-option-thumb img.is-placeholder { object-fit: cover; opacity: 0.45; } .product-variation-picker-panel { position: absolute; z-index: 40; top: calc(100% + 0.35rem); left: 0; right: 0; max-height: min(18rem, 50vh); overflow-y: auto; overscroll-behavior: contain; padding: 0.35rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 0.75rem; box-shadow: 0 12px 28px rgb(15 23 42 / 0.12); } .product-variation-picker-group { margin: 0.35rem 0.5rem 0.25rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #94a3b8; } .product-variation-picker-option { display: flex; align-items: center; gap: 0.65rem; width: 100%; margin: 0; padding: 0.45rem 0.5rem; font-family: inherit; font-size: 0.8125rem; line-height: 1.4; text-align: left; color: #334155; background: transparent; border: none; border-radius: 0.5rem; cursor: pointer; } .product-variation-picker-option:hover { background: #f8fafc; } .product-variation-picker-option.is-selected, .product-variation-picker-option[aria-selected="true"] { background: color-mix(in srgb, var(--brand-600) 10%, #fff); color: #0f172a; } .product-variation-picker-option-label { flex: 1; min-width: 0; } .product-page-info { min-width: 0; } .product-page-header { margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid #e2e8f0; margin-top: 0; } .product-page-title { margin: 0; font-family: 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif; font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 700; line-height: 1.2; color: #0f172a; } .product-page-ref { margin: 0.65rem 0 0; font-size: 0.8125rem; color: #64748b; } .product-page-ref-label { display: block; font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; } .product-page-ref-value { display: block; margin-top: 0.15rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #334155; } .product-page-description { font-size: 0.9375rem; line-height: 1.65; color: #334155; } .product-page-description.product-content p { margin: 0 0 0.85rem; } .product-page-description.product-content p:last-child { margin-bottom: 0; } .product-page-description.product-content strong { color: #0f172a; } .product-page-actions { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 1.75rem; } @media (min-width: 480px) { .product-page-actions { flex-direction: row; flex-wrap: wrap; align-items: center; } } .product-page-btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 2.75rem; padding: 0.65rem 1.25rem; font-size: 0.9375rem; font-weight: 600; border-radius: 0.65rem; text-decoration: none; border: none; cursor: pointer; transition: filter 0.15s ease, background 0.15s ease; } .product-page-btn--whatsapp { gap: 0.5rem; background: linear-gradient(145deg, #25d366, #128c7e); color: #fff; box-shadow: 0 4px 16px rgb(37 211 102 / 0.4); animation: product-wa-pulse 2.4s ease-in-out infinite; } .product-page-btn-whatsapp-icon { width: 1.35rem; height: 1.35rem; flex-shrink: 0; } @keyframes product-wa-pulse { 0%, 100% { box-shadow: 0 4px 14px rgb(37 211 102 / 0.35); transform: scale(1); } 50% { box-shadow: 0 6px 24px rgb(37 211 102 / 0.55); transform: scale(1.02); } } .product-page-btn--whatsapp:hover { animation: none; filter: brightness(1.06); transform: translateY(-2px); color: #fff; box-shadow: 0 8px 26px rgb(37 211 102 / 0.45); } @media (prefers-reduced-motion: reduce) { .product-page-btn--whatsapp { animation: none; } } .product-page-btn--ghost { width: auto; } .product-page-quote-summary { margin: 0.75rem 0 0; font-size: 0.875rem; color: #64748b; } .product-page-section { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #e2e8f0; } .product-page-section-title { margin: 0 0 1.25rem; font-family: 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif; font-size: 1.25rem; font-weight: 700; color: #0f172a; } .product-page-table-wrap { border-radius: var(--radius-lg); border: 1px solid #e2e8f0; background: #fff; box-shadow: var(--shadow-card); } .product-page-table { width: 100%; font-size: 0.875rem; border-collapse: collapse; } .product-page-table thead { background: #f8fafc; } .product-page-table th, .product-page-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid #e2e8f0; } .product-page-table tbody tr:last-child td { border-bottom: none; } .product-page-table td:first-child { font-weight: 600; color: #334155; width: 35%; } .product-page-cards-stack { display: flex; flex-direction: column; gap: 0.65rem; } .product-page-card { padding: 1rem; border-radius: var(--radius-lg); border: 1px solid #e2e8f0; background: #fff; box-shadow: var(--shadow-card); } .product-page-card-label { margin: 0; font-weight: 600; color: #0f172a; } .product-page-card-value { margin: 0.35rem 0 0; font-size: 0.875rem; color: #64748b; line-height: 1.5; } .product-page-faq { display: flex; flex-direction: column; gap: 0.65rem; } .product-page-faq-item { padding: 1rem 1.1rem; border-radius: var(--radius-lg); border: 1px solid #e2e8f0; background: #fff; box-shadow: var(--shadow-card); } .product-page-faq-item summary { font-weight: 600; cursor: pointer; color: #0f172a; list-style: none; } .product-page-faq-item summary::-webkit-details-marker { display: none; } .product-page-faq-item p { margin: 0.75rem 0 0; font-size: 0.875rem; line-height: 1.6; color: #64748b; } .site-footer a.text-brand-footer:hover { color: #fff; } .color-filter-swatch { width: 1rem; height: 1rem; border-radius: 999px; border: 2px solid #fff; box-shadow: 0 0 0 1px #cbd5e1; background: #e2e8f0; } .color-filter-swatch--all { background: linear-gradient(135deg, #ef4444 0%, #eab308 28%, #22c55e 52%, #3b82f6 76%, #a855f7 100%); } /* Carrinho — catálogo personalizado */ .catalog-mobile-foot { display: contents; } .catalog-cart-bar { position: fixed; right: 1rem; bottom: 1rem; z-index: 90; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1rem; border: none; border-radius: 999px; background: linear-gradient(145deg, #22c55e, #16a34a); color: #fff; font-weight: 600; font-size: 0.9375rem; box-shadow: 0 8px 24px rgba(22, 163, 74, 0.35); cursor: pointer; } @media (max-width: 1023px) { .catalog-mobile-foot { display: flex; align-items: stretch; gap: 0; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; width: 100%; margin: 0; padding: 0; padding-bottom: env(safe-area-inset-bottom, 0); background: transparent; border: none; box-shadow: none; } .catalog-mobile-foot .catalog-mobile-foot-btn { position: static; flex: 1 1 50%; width: 50%; min-height: 2.35rem; margin: 0; padding: 0.35rem 0.25rem; border: none; border-radius: 0; box-shadow: none; justify-content: center; align-items: center; gap: 0.25rem; transform: none; font-size: 0.6875rem; font-weight: 600; line-height: 1.15; } .catalog-mobile-foot .catalog-mobile-foot-btn--filter, .catalog-mobile-foot .catalog-mobile-foot-btn--back { display: inline-flex; flex-direction: row; background: linear-gradient( 145deg, var(--brand-fab-filter, var(--brand-accent)), color-mix(in srgb, var(--brand-fab-filter, var(--brand-accent)) 78%, #000) ); color: #fff; letter-spacing: normal; text-transform: none; text-decoration: none; } .catalog-mobile-foot .catalog-mobile-foot-btn--back svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; } .catalog-mobile-foot .catalog-mobile-foot-btn--back:active { filter: brightness(0.94); } .catalog-foot-back-label--short { display: none; } .catalog-mobile-foot .catalog-foot-back-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } @media (max-width: 380px) { .catalog-foot-back-label--long { display: none; } .catalog-foot-back-label--short { display: inline; } } body.site-body--catalog-public:has(.catalog-product-back-foot) .product-page-info > .catalog-product-back { display: none; } .catalog-mobile-foot .catalog-mobile-foot-btn--filter .products-filter-fab-icon { width: 0.875rem; height: 0.875rem; } .catalog-mobile-foot .catalog-mobile-foot-btn--filter .products-filter-fab-label { max-width: none; } .catalog-mobile-foot .catalog-mobile-foot-btn--filter .products-filter-fab-badge { top: 0.2rem; right: 0.2rem; width: 0.375rem; height: 0.375rem; box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-accent) 70%, #fff); background: #fff; } .catalog-mobile-foot .catalog-mobile-foot-btn--filter:active { filter: brightness(0.94); } .catalog-mobile-foot .catalog-mobile-foot-btn--cart { background: linear-gradient(145deg, #22c55e, #16a34a); font-size: 0.6875rem; box-shadow: none; } .catalog-mobile-foot .catalog-mobile-foot-btn--cart .catalog-cart-bar-icon svg { width: 0.875rem; height: 0.875rem; } .catalog-mobile-foot .catalog-mobile-foot-btn--cart .catalog-cart-bar-label { flex: 0 1 auto; text-align: center; } .catalog-mobile-foot .catalog-mobile-foot-btn--cart .catalog-cart-bar-count { min-width: 1rem; height: 1rem; padding: 0 0.2rem; font-size: 0.625rem; font-weight: 700; } .catalog-mobile-foot .catalog-mobile-foot-btn--cart:only-child { flex: 1 1 100%; width: 100%; } body.site-body--catalog-public:has([data-catalog-cart-root]) .catalog-mobile-foot { min-height: var(--catalog-mobile-foot-h, calc(2.35rem + env(safe-area-inset-bottom, 0))); } } @media (min-width: 1024px) { .catalog-mobile-foot .catalog-mobile-foot-btn--filter, .catalog-mobile-foot .catalog-mobile-foot-btn--back { display: none; } } .catalog-cart-bar:hover { filter: brightness(1.04); } .catalog-cart-bar-icon svg { width: 1.25rem; height: 1.25rem; display: block; } .catalog-cart-bar-count { min-width: 1.35rem; height: 1.35rem; padding: 0 0.35rem; border-radius: 999px; background: #fff; color: #15803d; font-size: 0.75rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .catalog-cart-backdrop { position: fixed; inset: 0; z-index: 95; background: rgba(15, 23, 42, 0.45); } .catalog-cart-drawer { position: fixed; right: 0; top: 0; bottom: 0; z-index: 96; width: min(100%, 22rem); background: #fff; box-shadow: -8px 0 32px rgba(15, 23, 42, 0.12); display: flex; flex-direction: column; } .catalog-cart-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid #e2e8f0; } .catalog-cart-drawer-title { margin: 0; font-size: 1.125rem; font-weight: 700; } .catalog-cart-drawer-close { border: none; background: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: #64748b; } .catalog-cart-drawer-body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; } .catalog-cart-drawer-foot { padding: 1rem 1.25rem 1.25rem; border-top: 1px solid #e2e8f0; } .catalog-cart-foot-hint { margin: 0.65rem 0 0; font-size: 0.75rem; color: #64748b; line-height: 1.4; } .catalog-cart-empty { margin: 0; color: #64748b; font-size: 0.875rem; } .catalog-cart-list { list-style: none; margin: 0; padding: 0; } .catalog-cart-item { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid #f1f5f9; font-size: 0.875rem; } .catalog-cart-item-main { grid-column: 1 / -1; } .catalog-cart-item-sku, .catalog-cart-item-color { display: block; font-size: 0.75rem; color: #64748b; } .catalog-cart-item-qty { display: inline-flex; align-items: center; gap: 0.35rem; } .catalog-cart-qty-btn { width: 1.75rem; height: 1.75rem; border: 1px solid #e2e8f0; border-radius: 0.375rem; background: #fff; cursor: pointer; font-weight: 600; } .catalog-cart-remove { border: none; background: none; color: #b91c1c; font-size: 0.8125rem; font-weight: 600; cursor: pointer; justify-self: end; } .product-card-action--cart { background: var(--brand-600); border-color: var(--brand-600); color: #fff; border-radius: 0.375rem; padding: 0.45rem 0.5rem; } .product-card-action--cart:hover { background: var(--brand-700); border-color: var(--brand-700); color: #fff; } .catalog-add-btn-label--short { display: none; } @media (max-width: 639px) { .catalog-add-btn-label--long { display: none; } .catalog-add-btn-label--short { display: inline; } .product-card-action--cart { font-size: 0.6875rem; line-height: 1.15; min-height: 2rem; padding: 0.35rem 0.4rem; gap: 0.25rem; } .product-card-action--cart .product-card-action-icon { width: 0.875rem; height: 0.875rem; } .product-card-action--cart .catalog-add-btn-label--short { white-space: nowrap; } } .product-page-btn--cart { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; margin-right: 0.5rem; } .product-page-btn-cart-icon { width: 1.125rem; height: 1.125rem; flex-shrink: 0; } .product-card-actions { flex-wrap: wrap; } body.catalog-cart-open, body.catalog-add-open { overflow: hidden; } .catalog-add-backdrop { position: fixed; inset: 0; z-index: 97; background: rgba(15, 23, 42, 0.45); } .catalog-add-modal { position: fixed; left: 50%; bottom: 0; z-index: 98; width: min(100%, 24rem); transform: translateX(-50%); padding: 0 0 max(0.75rem, env(safe-area-inset-bottom)); } .catalog-add-modal[hidden], .catalog-add-backdrop[hidden] { display: none !important; } .catalog-add-modal-inner { background: #fff; border-radius: 1rem 1rem 0 0; border: 1px solid #e2e8f0; box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.12); overflow: hidden; } @media (min-width: 640px) { .catalog-add-modal { bottom: auto; top: 50%; transform: translate(-50%, -50%); padding: 0; } .catalog-add-modal-inner { border-radius: 0.75rem; } } .catalog-add-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem 1.25rem; border-bottom: 1px solid #f1f5f9; } .catalog-add-title { margin: 0; font-size: 1.0625rem; font-weight: 700; color: #0f172a; } .catalog-add-close { border: none; background: none; font-size: 1.5rem; line-height: 1; color: #64748b; cursor: pointer; padding: 0.15rem 0.35rem; } .catalog-add-body { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 1rem; } .catalog-add-product-title { margin: 0; font-size: 1rem; font-weight: 700; color: #0f172a; line-height: 1.35; } .catalog-add-product-sku { margin: 0.25rem 0 0; font-size: 0.8125rem; color: #64748b; font-family: ui-monospace, monospace; } .catalog-add-field { display: flex; flex-direction: column; gap: 0.5rem; } .catalog-add-label { margin: 0; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; } .catalog-add-choices { display: flex; flex-wrap: wrap; gap: 0.5rem; } .catalog-add-choices--dropdown { display: block; } .catalog-add-choices-select { display: block; width: 100%; padding: 0.55rem 0.75rem; font-size: 0.9375rem; font-weight: 500; color: #0f172a; border: 1px solid #e2e8f0; border-radius: 0.5rem; background: #fff; cursor: pointer; } .catalog-add-choices-select:focus { outline: none; border-color: var(--brand-600); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-600) 22%, transparent); } .catalog-add-choice { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.65rem; border-radius: 999px; border: 1px solid #e2e8f0; background: #fff; font-size: 0.8125rem; font-weight: 600; color: #334155; cursor: pointer; } .catalog-add-choice.is-active { border-color: var(--brand-600); background: color-mix(in srgb, var(--brand-600) 10%, white); color: var(--brand-700); } .catalog-add-choice-swatch { width: 1.125rem; height: 1.125rem; border-radius: 0.25rem; border: 1px solid rgb(15 23 42 / 0.12); flex-shrink: 0; } #catalog-add-colors .catalog-add-choice { min-height: 2.25rem; } .catalog-add-qty-row { display: inline-flex; align-items: center; gap: 0.5rem; } .catalog-add-qty-btn { width: 2.25rem; height: 2.25rem; border: 1px solid #e2e8f0; border-radius: 0.5rem; background: #fff; font-size: 1.125rem; font-weight: 600; cursor: pointer; color: #334155; } .catalog-add-qty-input { width: 4rem; text-align: center; border: 1px solid #e2e8f0; border-radius: 0.5rem; padding: 0.45rem 0.35rem; font-size: 1rem; font-weight: 600; } .catalog-add-foot { padding: 0 1.25rem 1.25rem; } .catalog-cart-toast { position: fixed; left: 50%; bottom: max(calc(var(--catalog-mobile-foot-h, 2.75rem) + 0.5rem), calc(0.75rem + env(safe-area-inset-bottom))); z-index: 99; max-width: min(22rem, calc(100vw - 2rem)); padding: 0.75rem 1rem; border-radius: 0.625rem; background: #0f172a; color: #f8fafc; font-size: 0.875rem; font-weight: 500; line-height: 1.4; text-align: center; box-shadow: 0 10px 28px rgb(15 23 42 / 0.28); opacity: 0; transform: translateX(-50%) translateY(0.35rem); transition: opacity 0.22s ease, transform 0.22s ease; pointer-events: none; } .catalog-cart-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } .catalog-cart-toast[hidden] { display: none !important; }