/* ==========================================================================
   Bella Kitchen Cabinetry — estilos proprios do site
   Desenvolvido 100% pela NEO Startup · https://neostartup.com.br
   Paleta: #C5B1AA rose (destaque) · #909491 pedra (header/banner)
           #E2DFD3 creme (fundos) · #26252C grafite (rodape/secoes escuras)
   Fontes e layout sao os do layout base; aqui so entram legibilidade e
   componentes que o layout base nao tem.
   ========================================================================== */

:root {
  --bella-rose: #C5B1AA;
  --bella-stone: #909491;
  --bella-cream: #E2DFD3;
  --bella-cream-2: #F1EFE9;
  --bella-ink: #26252C;
  --bella-line: rgba(38, 37, 44, 0.12);
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
  font-feature-settings: "cv11", "salt", "ss01", "ss03", "cv01", "cv02", "cv03", "cv04", "cv05", "cv06", "cv09", "cv10";
}

/* acessibilidade */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100000; background: var(--bella-ink); color: #fff; padding: 10px 18px; transition: top .2s; }
.skip-link:focus { top: 12px; color: #fff; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .chip input:focus-visible + span {
  outline: 2px solid var(--bella-ink) !important; outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Legibilidade com a paleta nova
   rose e claro demais para texto branco ou texto pequeno sobre fundo claro
   -------------------------------------------------------------------------- */
.theme-btn { color: var(--bella-ink) !important; }
.theme-btn:hover { color: #fff !important; }
.sec-title .sub-title { color: var(--bella-ink); }
.sec-title.light .sub-title { color: var(--bella-rose); }
.banner-carousel .content-box .btn-box .theme-btn { color: var(--bella-ink) !important; }
/* no banner o hover preenche o botao de branco: texto escuro para continuar legivel */
.banner-carousel .content-box .btn-box .theme-btn:hover { color: var(--bella-ink) !important; }
.content_block_two .content-box .theme-btn:hover { color: var(--bella-ink) !important; }

/* logo SVG no lugar do PNG do layout base */
.main-header .logo-box img, .sticky-header .logo-box img { max-height: 64px; width: auto; }
.mobile-menu .nav-logo img { max-height: 76px; width: auto; }
.main-footer .footer-logo img { max-width: 210px; height: auto; }
.xs-sidebar-group .content-inner .logo img { max-width: 200px; height: auto; }

/* seletor de idioma no header-top */
.header-top .left-column { align-items: center; }
.lang-switch { display: inline-flex; align-items: center; margin-left: 24px; border: 1px solid rgba(255,255,255,.35); padding: 2px; font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: .06em; font-family: var(--jost); }
.lang-switch > * { padding: 5px 9px; color: rgba(255,255,255,.8); }
.lang-switch .is-active { background: var(--bella-rose); color: var(--bella-ink); }
.lang-switch a:hover { color: #fff; }
.header-style-five .lang-switch { border-color: var(--bella-line); }
.header-style-five .lang-switch > * { color: var(--bella-ink); }

/* botao de login dos clientes cadastrados: canto superior direito (no celular/tablet, ao lado do menu) */
.bm-login, .bm-login-m {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; white-space: nowrap;
  font-family: var(--jost); font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: rgba(38, 37, 44, .88); border: 1px solid rgba(197, 177, 170, .55);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.bm-login { padding: 8px 14px; margin-left: auto; }
.bm-login svg, .bm-login-m svg { flex: 0 0 auto; color: var(--bella-rose); transition: color .25s ease; }
.bm-login:hover, .bm-login:focus-visible, .bm-login-m:hover, .bm-login-m:focus-visible { background: var(--bella-rose); border-color: var(--bella-rose); color: var(--bella-ink); }
.bm-login:hover svg, .bm-login:focus-visible svg, .bm-login-m:hover svg, .bm-login-m:focus-visible svg { color: var(--bella-ink); }
.bm-login-m { display: none; }
/* no desktop o botao ocupa o lugar da frase de boas-vindas das paginas internas (nao cabem os dois na barra) */
@media only screen and (min-width: 1201px) {
  .header-top .text-box { display: none; }
}
@media only screen and (max-width: 1200px) {
  .bm-login { display: none; }
  .bm-login-m { display: inline-flex; height: 36px; padding: 0 12px; margin-right: 10px; }
}
@media only screen and (max-width: 420px) {
  .bm-login-m span { display: none; }
  .bm-login-m { width: 44px; padding: 0; justify-content: center; }
}

/* menu mobile */
.mobile-menu .mobile-cta { display: grid; gap: 10px; padding: 10px 25px 20px; }
.mobile-menu .mobile-cta .theme-btn { width: 100%; }
.mobile-menu .social-links .lang-li a { font-size: 13px; font-weight: 700; }

/* sidebar: o botao ocupa a largura toda no lugar da assinatura de newsletter */
.xs-sidebar-group .subscribe-inner .theme-btn { width: 100%; }

/* rodape */
.main-footer .logo-widget .info-list { display: flex; flex-wrap: wrap; gap: 18px 40px; }
.main-footer .logo-widget .info-list li { margin: 0 !important; }
.footer-social { display: flex; gap: 10px; margin: 30px 0 0; padding: 0; list-style: none; }
.footer-social a { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.2); color: #fff; }
.footer-social a:hover { background: var(--bella-rose); border-color: var(--bella-rose); color: var(--bella-ink); }

/* botao flutuante do WhatsApp no canto direito; o "voltar ao topo" do layout base vai para a esquerda */
.whatsapp-float {
  position: fixed; right: 30px; bottom: 30px; z-index: 999; width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: #25D366; color: #fff; font-size: 30px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25); transition: transform .3s;
}
.whatsapp-float:hover { color: #fff; transform: scale(1.08); }

/* --------------------------------------------------------------------------
   Utilitarios das paginas internas
   -------------------------------------------------------------------------- */
.section-pad { padding: 120px 0; }
.section-pad-sm { padding: 80px 0; }
.bg-cream { background: var(--bella-cream-2); }
.bg-ink { background: var(--bella-ink); }
.bg-ink, .bg-ink p, .bg-ink li { color: rgba(255,255,255,.75); }
.bg-ink h2, .bg-ink h3, .bg-ink h4 { color: #fff; }
@media (max-width: 991.98px) { .section-pad { padding: 80px 0; } }

/* faixa de chamada no fim das paginas */
.cta-band { background: var(--bella-cream); padding: 70px 0; }
.cta-band .inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.cta-band h2 { font-size: 36px; line-height: 46px; margin: 0 0 6px; }
.cta-band p { margin: 0; }

/* filtros (portas, galeria) */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; align-items: center; }
.filter-bar .group-label { width: 100%; font-family: var(--jost); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--bella-ink); margin-top: 6px; }
.filter-btn {
  border: 1px solid var(--bella-line); background: #fff; color: var(--bella-ink); padding: 9px 20px;
  font-family: var(--jost); font-size: 14px; font-weight: 500; transition: all .3s;
}
.filter-btn:hover { border-color: var(--bella-ink); }
.filter-btn.is-active { background: var(--bella-ink); border-color: var(--bella-ink); color: #fff; }
.is-hidden { display: none !important; }

/* --------------------------------------------------------------------------
   Portas
   -------------------------------------------------------------------------- */
.door-col { margin-bottom: 30px; scroll-margin-top: 140px; }
.door-card { background: #fff; border: 1px solid var(--bella-line); height: 100%; display: flex; flex-direction: column; transition: box-shadow .4s; }
.door-card:hover { box-shadow: 0 20px 50px rgba(38,37,44,.1); }
.door-col:target .door-card { box-shadow: 0 0 0 3px var(--bella-rose); }
.door-card .door-img { display: block; background: var(--bella-cream-2); padding: 30px; text-align: center; }
.door-card .door-img img { height: 320px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(38,37,44,.18)); transition: transform .35s; }
.door-card .door-img:hover img { transform: scale(1.04); }
.door-card .door-body { padding: 26px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.door-card h3 { font-size: 24px; line-height: 32px; margin-bottom: 14px; }
.door-specs { list-style: none; padding: 0; margin: 0 0 22px; }
.door-specs li { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--bella-line); font-size: 15px; line-height: 22px; color: var(--bella-ink); text-align: right; }
.door-specs li span { color: #6d6c72; text-align: left; }
.door-link { margin-top: auto; font-family: var(--jost); font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bella-ink); }
.door-link:hover { color: var(--bella-stone); }
.door-link i { margin-left: 6px; }

.collection-card { display: block; height: 100%; padding: 34px; border: 1px solid rgba(255,255,255,.14); color: #fff; transition: background .3s; }
.collection-card:hover { background: rgba(255,255,255,.05); color: #fff; }
.collection-card i { font-size: 30px; color: var(--bella-rose); margin-bottom: 18px; }
.collection-card h3 { font-size: 22px; line-height: 30px; margin-bottom: 8px; color: #fff; }
.collection-card p { margin-bottom: 14px; }
.collection-card .go { font-family: var(--jost); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bella-rose); }

/* --------------------------------------------------------------------------
   Galeria (cards project-block-one do layout base em grade filtravel)
   -------------------------------------------------------------------------- */
.gallery-col { margin-bottom: 30px; }
.gallery-col .project-block-one .inner-box .image-box img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.project-section .project-block-one .inner-box .image-box img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
/* sombra em degrade atras do texto que aparece no hover, para o titulo ficar legivel em fotos claras */
.project-block-one .inner-box .content-box::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 60%;
  background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,0) 100%);
  opacity: 0; transition: opacity 500ms ease; pointer-events: none;
}
.project-block-one .inner-box:hover .content-box::before { opacity: 1; }

/* --------------------------------------------------------------------------
   Catalogos
   -------------------------------------------------------------------------- */
.catalog-group + .catalog-group { margin-top: 70px; }
.catalog-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding-bottom: 18px; margin-bottom: 34px; border-bottom: 1px solid var(--bella-line); flex-wrap: wrap; }
.catalog-head h2 { font-size: 34px; line-height: 44px; margin: 0; }
.catalog-head p { margin: 0; max-width: 460px; }
.catalog-col { margin-bottom: 30px; }
.catalog-card { background: #fff; border: 1px solid var(--bella-line); height: 100%; display: flex; flex-direction: column; transition: box-shadow .4s; }
.catalog-card:hover { box-shadow: 0 20px 50px rgba(38,37,44,.1); }
.catalog-card .cover { display: block; aspect-ratio: 3 / 4; background: var(--bella-cream-2); padding: 18px; }
.catalog-card .cover img { width: 100%; height: 100%; object-fit: contain; background: #fff; box-shadow: 0 10px 24px rgba(38,37,44,.14); }
.catalog-card .body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.catalog-card h3 { font-size: 20px; line-height: 28px; margin-bottom: 4px; }
.catalog-card .meta { font-size: 14px; color: #6d6c72; margin-bottom: 16px; }
.catalog-card .actions { margin-top: auto; display: flex; gap: 8px; }
.catalog-card .actions a { flex: 1; text-align: center; padding: 9px 6px; border: 1px solid var(--bella-ink); color: var(--bella-ink); font-family: var(--jost); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.catalog-card .actions a.dl { background: var(--bella-ink); color: #fff; }
.catalog-card .actions a:hover { background: var(--bella-rose); border-color: var(--bella-rose); color: var(--bella-ink); }

/* --------------------------------------------------------------------------
   Amostras
   -------------------------------------------------------------------------- */
.price-card { background: #fff; border: 1px solid var(--bella-line); padding: 40px 34px; height: 100%; }
.price-card.featured { background: var(--bella-ink); border-color: var(--bella-ink); }
.price-card.featured, .price-card.featured p, .price-card.featured dd { color: rgba(255,255,255,.78); }
.price-card.featured h3, .price-card.featured .price, .price-card.featured dt { color: #fff; }
.price-card .icon { font-size: 34px; color: var(--bella-rose); margin-bottom: 18px; display: block; }
.price-card h3 { font-size: 26px; line-height: 34px; margin-bottom: 8px; }
.price-card .price { font-family: var(--title-font); font-size: 38px; line-height: 46px; font-weight: 600; color: var(--bella-ink); margin: 14px 0 4px; }
.price-card .price small { font-size: 15px; font-weight: 400; color: inherit; opacity: .7; }
.price-card dl { margin: 18px 0 0; }
.price-card dl > div { border-top: 1px solid var(--bella-line); padding: 12px 0; }
.price-card.featured dl > div { border-color: rgba(255,255,255,.14); }
.price-card dt { font-weight: 600; color: var(--bella-ink); font-size: 16px; }
.price-card dd { margin: 4px 0 0; font-size: 16px; line-height: 24px; }
.policy-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 40px; }
.policy-list li { display: flex; gap: 14px; }
.policy-list i { color: var(--bella-ink); font-size: 18px; margin-top: 5px; width: 22px; }
@media (max-width: 767.98px) { .policy-list { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Formularios (orcamento em etapas, amostras, contato)
   -------------------------------------------------------------------------- */
.quote-section { background: var(--bella-ink); padding: 120px 0; }
.quote-section .sec-title h2 { color: #fff; }
.quote-section .sec-title p { color: rgba(255,255,255,.72); margin-top: 16px; }
.quote-aside { position: sticky; top: 130px; }
.quote-perks { list-style: none; padding: 0; margin: 10px 0 34px; }
.quote-perks li { display: flex; align-items: center; gap: 14px; color: rgba(255,255,255,.85); padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.quote-perks i { color: var(--bella-rose); width: 22px; text-align: center; }
.quote-call span { display: block; color: rgba(255,255,255,.6); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-family: var(--jost); }
.quote-call a { font-family: var(--title-font); font-size: 30px; line-height: 40px; color: #fff; font-weight: 500; }
.quote-call a:hover { color: var(--bella-rose); }
@media (max-width: 991.98px) { .quote-section { padding: 80px 0; } .quote-aside { position: static; } }

.quote-form, .bella-form { background: #fff; padding: 46px 48px 40px; }
@media (max-width: 575.98px) { .quote-form, .bella-form { padding: 30px 20px 26px; } }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.steps-progress { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0; margin: 0 0 34px; }
.steps-progress li { font-family: var(--jost); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8c8b90; padding-top: 12px; border-top: 3px solid var(--bella-cream); }
.steps-progress li span { margin-right: 6px; }
.steps-progress li.is-active { border-color: var(--bella-ink); color: var(--bella-ink); }
.steps-progress li.is-done { border-color: var(--bella-rose); color: var(--bella-ink); }
@media (max-width: 575.98px) { .steps-progress li { font-size: 0; } .steps-progress li span { font-size: 13px; } }
.form-step { display: none; border: 0; padding: 0; margin: 0; min-width: 0; }
.form-step.is-active { display: block; animation: stepIn .45s ease; }
@keyframes stepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.step-title { font-family: var(--title-font); font-size: 28px; line-height: 36px; font-weight: 500; color: var(--title-color); margin-bottom: 22px; float: none; width: 100%; }
.form-clt { margin-bottom: 20px; }
.form-clt label, .label-like { display: block; font-size: 15px; font-weight: 600; color: var(--bella-ink); margin-bottom: 8px; line-height: 22px; }
.form-clt label .opt { font-weight: 400; color: #6d6c72; }
.form-clt input[type=text], .form-clt input[type=email], .form-clt input[type=tel], .form-clt select, .form-clt textarea {
  width: 100%; height: 56px; border: 1px solid #dcdad3; background: var(--bella-cream-2); padding: 10px 18px;
  font-size: 16px; color: var(--bella-ink); font-family: var(--text-font); transition: border-color .3s, background .3s;
}
.form-clt textarea { height: 130px; resize: vertical; }
.form-clt textarea.grow-field { height: 56px; min-height: 56px; padding: 15px 18px; line-height: 24px; resize: none; overflow: hidden; }
.form-clt select {
  appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2326252C' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center;
}
.form-clt input:focus, .form-clt select:focus, .form-clt textarea:focus { border-color: var(--bella-ink); background: #fff; }
.form-clt .is-invalid { border-color: #B4473A !important; background: #FFF8F6 !important; }
.chip-group { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.chip { position: relative; margin: 0; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border: 1px solid #dcdad3; background: var(--bella-cream-2); color: var(--bella-ink); font-size: 15px; line-height: 20px; transition: all .2s; }
.chip span i { color: var(--bella-stone); }
.chip:hover span { border-color: var(--bella-ink); }
.chip input:checked + span { background: var(--bella-ink); border-color: var(--bella-ink); color: #fff; }
.chip input:checked + span i { color: var(--bella-rose); }
.chip-group-sm .chip span { padding: 8px 16px; font-size: 14px; }
.file-drop { display: flex !important; flex-direction: column; align-items: center; gap: 2px; text-align: center; cursor: pointer; border: 1.5px dashed #cfccc2; padding: 24px 16px; background: var(--bella-cream-2); }
.file-drop i { font-size: 26px; color: var(--bella-stone); margin-bottom: 4px; }
.file-drop-text { font-weight: 600; color: var(--bella-ink); }
.file-drop-hint { font-size: 14px; color: #6d6c72; font-weight: 400; }
.file-drop:hover, .file-drop.is-over { border-color: var(--bella-ink); background: #fff; }
.file-list { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.file-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; background: var(--bella-cream-2); padding: 8px 12px; }
.file-list li small { margin-left: auto; color: #6d6c72; }
.field-error { display: none; color: #B4473A; font-size: 15px; margin: -8px 0 16px; }
.field-error.is-visible { display: block; }
.form-nav { display: flex; align-items: center; gap: 16px; margin-top: 10px; padding-top: 24px; border-top: 1px solid var(--bella-line); }
.form-nav .step-count { margin-left: auto; font-size: 15px; color: #6d6c72; }
.step-back { background: none; border: 0; color: var(--bella-ink); font-weight: 600; font-size: 15px; padding: 10px 0; cursor: pointer; }
.step-back i { margin-right: 6px; }
.form-status { margin-top: 18px; font-size: 16px; }
.form-status:empty { display: none; }
.form-status.is-ok { background: #EEF3EC; color: #2F5130; padding: 14px 16px; }
.form-status.is-fail { background: #FBEEEC; color: #8A2E24; padding: 14px 16px; }
@media (max-width: 575.98px) {
  .form-nav { flex-wrap: wrap; }
  .form-nav .step-count { order: -1; width: 100%; margin: 0 0 4px; }
  .form-nav [data-next], .form-nav [data-submit], .form-nav [type=submit] { margin-left: auto; }
}
/* o contato usa o form do layout base (.contact-style-three) com anexos e assunto */
.contact-style-three .bella-form { padding: 0; background: transparent; }

/* --------------------------------------------------------------------------
   Servicos: garantia e tabela de prazos
   -------------------------------------------------------------------------- */
.lead-table { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: 16px; }
.lead-table th, .lead-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--bella-line); }
.lead-table th { background: var(--bella-cream-2); color: var(--bella-ink); font-weight: 600; }
.table-scroll { overflow-x: auto; }
.faq-page-section .acc-content ul { padding-left: 18px; margin: 6px 0 0; }
.faq-page-section .acc-content li { list-style: disc; margin-bottom: 6px; }
.warranty-box { padding: 60px; }
.warranty-box .big { font-family: var(--title-font); font-size: 120px; line-height: 1; font-weight: 600; color: var(--bella-rose); }
.warranty-box .big small { display: block; font-size: 24px; line-height: 32px; color: #fff; font-weight: 400; margin-top: 8px; }
.warranty-box .note { border-left: 3px solid var(--bella-rose); padding: 4px 0 4px 18px; margin: 22px 0; color: #fff; }
.warranty-box details { border-top: 1px solid rgba(255,255,255,.14); padding: 16px 0; }
.warranty-box details:last-of-type { border-bottom: 1px solid rgba(255,255,255,.14); }
.warranty-box summary { cursor: pointer; color: #fff; font-weight: 600; list-style: none; display: flex; justify-content: space-between; }
.warranty-box summary::-webkit-details-marker { display: none; }
.warranty-box summary:after { content: "+"; color: var(--bella-rose); font-size: 22px; }
.warranty-box details[open] summary:after { content: "–"; }
.warranty-box ul { padding-left: 18px; margin-top: 12px; }
.warranty-box li { list-style: disc; margin-bottom: 6px; }
.warranty-box .lead-table th { background: rgba(255,255,255,.08); color: #fff; }
.warranty-box .lead-table td, .warranty-box .lead-table th { border-color: rgba(255,255,255,.12); }
@media (max-width: 767.98px) { .warranty-box { padding: 34px 22px; } .warranty-box .big { font-size: 86px; } }

/* servicos em cards (service-block-two com texto) */
.service-block-two .inner-box p { margin: 10px 0 18px; font-size: 16px; line-height: 26px; }

/* contato */
.contact-style-three .info-content .info-list li p { margin-bottom: 0; }
.hours-list { list-style: none; padding: 0; margin: 0 0 24px; }
.hours-list li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--bella-line); font-size: 16px; }
.hours-list li span:first-child { color: var(--bella-ink); font-weight: 600; }
.google-map-section .map-inner { min-height: 450px; background: var(--bella-cream-2); }
.google-map-section iframe { display: block; width: 100%; height: 450px; border: 0; filter: grayscale(.35); }

/* animacoes respeitam quem pediu menos movimento */
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* home: sem a luminaria decorativa do layout base, o logo ocupa o centro do espaco livre a esquerda do menu */
/* desktop: o logo desce para o centro da coluna escura do banner.
   A foto do banner tem largura calc(50% + 200px) presa a direita, entao a coluna
   escura mede 50vw - 200px e o centro dela fica em 25vw - 100px (na tela).
   --l = inicio do .outer-box (inner-container: max 1400px + 15px de padding).
   1201px: o layout base troca para o menu hamburguer em max-width 1200px. */
@media (min-width: 1201px) {
  .main-header:not(.header-style-five) .header-lower .outer-box { --l: calc(max(0px, (100vw - 1400px) / 2) + 15px); }
  .main-header:not(.header-style-five) .header-lower .logo-box {
    position: absolute; z-index: 5; top: 80px;
    left: calc(25vw - 100px - var(--l)); transform: translateX(-50%);
  }
  .main-header:not(.header-style-five) .header-lower .logo-box img { width: 280px; max-height: none; height: auto; }
  .main-header:not(.header-style-five) .header-lower .menu-area { margin-left: auto; }
}
/* cards de recursos na home com a mesma proporcao de imagem */
.news-block-one .inner-box .image-box img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* ancoras (#quote, #sample-form...) nao ficam escondidas atras do header fixo */
[id] { scroll-margin-top: 110px; }

/* nas internas a barra do topo tambem e escura: seletor de idioma claro */
.header-style-five .lang-switch { border-color: rgba(255,255,255,.35); }
.header-style-five .lang-switch > * { color: rgba(255,255,255,.8); }
.header-style-five .lang-switch .is-active { color: var(--bella-ink); }

/* veu escuro no cabecalho das internas: titulo legivel sobre qualquer foto */
.page-title .bg-layer:after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(38,37,44,.78) 0%, rgba(38,37,44,.45) 60%, rgba(38,37,44,.25) 100%); }
.page-title .auto-container { position: relative; z-index: 1; }

/* selo de experiencia e nome no depoimento: texto grafite sobre o rose */
.about-style-six .image-box .experience-box h2, .about-style-six .image-box .experience-box h5 { color: var(--bella-ink) !important; }
.testimonial-section .testimonial-block .text-box .name { color: var(--bella-ink); }

/* fotos da equipe na mesma proporcao */
.team-block-one .inner-box .image-box img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; width: 100%; }

/* pagina de contato: respiro entre a lista de contatos e o horario */
.contact-style-three .info-content .hours-title { font-size: 22px; line-height: 30px; margin: 30px 0 10px; }

/* voltar ao topo no canto inferior esquerdo (o direito fica com o WhatsApp) */
.scroll-to-top { right: auto; left: 30px; }
@media (max-width: 767.98px) {
  .scroll-to-top { left: 18px; bottom: 18px; }
  .whatsapp-float { right: 18px; bottom: 18px; width: 52px; height: 52px; font-size: 28px; }
}

/* about da home (layout index-3): fotos da Bella recortadas na proporcao das originais do layout base */
.image_block_one .image-box .image-1 img { aspect-ratio: 320 / 555; object-fit: cover; }
.image_block_one .image-box .image-2 { width: 198px; z-index: 1; }
.image_block_one .image-box .image-2 img { aspect-ratio: 198 / 248; object-fit: cover; }
@media only screen and (max-width: 499px) {
  .image_block_one .image-box .image-2 { width: 60%; border: 0; }
  .image_block_one .image-box .text { display: none; }
}

/* --------------------------------------------------------------------------
   Services: foto ao lado do card do layout base, alternando lados
   -------------------------------------------------------------------------- */
.svc-list { display: flex; flex-direction: column; }
.svc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: stretch; padding: 50px 0; border-bottom: 1px solid var(--bella-line); }
.svc-row:first-child { padding-top: 0; }
.svc-row:last-child { padding-bottom: 0; border-bottom: 0; }
.svc-row:nth-child(even) .svc-media { order: 2; }
.svc-media { border-radius: 10px; overflow: hidden; min-height: 360px; background: var(--bella-cream-2); }
.svc-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s ease; }
.svc-row:hover .svc-media img { transform: scale(1.04); }
.svc-media.contain img { object-fit: contain; background: #fff; padding: 16px; }
.svc-row .service-block-two, .svc-row .service-block-two .inner-box { height: 100%; }
.svc-row .service-block-two .inner-box { margin-bottom: 0; display: flex; flex-direction: column; }
.svc-row .service-block-two .inner-box:hover { transform: none; }
.svc-row .service-block-two .inner-box .link { margin-top: auto; }
.svc-head { display: flex; justify-content: space-between; align-items: flex-start; }
.svc-head .icon-box { margin-bottom: 24px !important; }
.svc-num { font-family: var(--title-font); font-size: 42px; line-height: 1; font-weight: 600; color: var(--bella-rose); }
.svc-row .service-block-two .inner-box h3 { margin-bottom: 10px; }
.svc-tagline { font-family: var(--title-font); font-weight: 500; color: var(--bella-ink); margin-top: -6px !important; }
@media (max-width: 991px) {
  .svc-row { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; }
  .svc-media { min-height: 0; aspect-ratio: 4 / 3; }
  .svc-row:nth-child(even) .svc-media { order: 0; }
}

/* --------------------------------------------------------------------------
   Depoimentos (Google): iniciais no lugar da foto do cliente
   -------------------------------------------------------------------------- */
.testimonial-section .testimonial-block .image-box .thumb-box.review-initials {
  width: 133px; height: 133px; margin: 0; display: flex; align-items: center; justify-content: center;
  background: var(--bella-cream); color: var(--bella-ink); font-family: var(--title-font); font-size: 40px; font-weight: 600; letter-spacing: .04em;
}
.testimonial-section .review-stars { color: var(--bella-rose); font-size: 20px; letter-spacing: 4px; margin-bottom: 14px; }
.testimonial-section .review-source { display: block; font-size: 14px; color: #767676; margin-top: 2px; }
.testimonial-section .review-summary { margin-top: 40px; font-size: 16px; color: var(--bella-ink); }
.testimonial-section .review-summary .review-stars { display: inline; font-size: 18px; letter-spacing: 0; margin: 0; }
.testimonial-section .review-summary a { color: var(--bella-ink); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Painel lateral (nav-toggler): rola por dentro e trava a pagina por tras
   -------------------------------------------------------------------------- */
.xs-sidebar-widget { overflow-y: auto; overscroll-behavior: contain; }
html:has(.xs-sidebar-group.isActive),
html:has(.xs-sidebar-group.isActive) body { overflow: hidden; }

/* --------------------------------------------------------------------------
   Home (desktop): o menu comeca exatamente na borda esquerda da foto do banner
   (a foto mede calc(50% + 200px) presa a direita -> borda em 50vw - 200px)
   e os itens se distribuem ate o botao do painel lateral.
   -------------------------------------------------------------------------- */
@media (min-width: 1201px) {
  .main-header:not(.header-style-five) .header-lower .menu-area {
    margin-left: calc(50vw - 200px - var(--l)); flex: 1; min-width: 0;
  }
  .main-header:not(.header-style-five) .header-lower .main-menu,
  .main-header:not(.header-style-five) .header-lower .main-menu .navbar-collapse { flex: 1; }
  .main-header:not(.header-style-five) .header-lower .main-menu .navigation {
    display: flex; justify-content: space-between; width: 100%;
  }
  .main-header:not(.header-style-five) .header-lower .main-menu .navigation > li { margin: 0; float: none; }
  .main-header:not(.header-style-five) .header-lower .main-menu .navigation:before,
  .main-header:not(.header-style-five) .header-lower .main-menu .navigation:after { display: none; }
}

/* seta indicando sub-menu (Resources) no menu do desktop e no header fixo */
.main-menu .navigation > li.dropdown > a:after {
  font-family: 'Font Awesome 6 Free'; font-weight: 900; content: "\f107";
  display: inline-block; margin-left: 7px; font-size: 14px; line-height: 1;
  transition: transform 300ms ease;
}
.main-menu .navigation > li.dropdown:hover > a:after { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   Banner da home: o texto fica so na coluna escura, sem passar por cima da foto.
   --dark = largura da coluna escura; --l = inicio do texto (inner-container).
   992-1200px (menu hamburguer): a foto encolhe para 45% para sobrar espaco ao texto.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .banner-section { --dark: calc(50vw - 200px); --l: calc(max(0px, (100vw - 1400px) / 2) + 15px); }
  .banner-carousel .content-box { max-width: calc(var(--dark) - var(--l) - 40px); }
  .banner-carousel .content-box h2 { font-size: clamp(40px, 3.7vw, 70px); line-height: 1.2; }
}
@media (min-width: 992px) and (max-width: 1200px) {
  .banner-section { --dark: 55vw; }
  .banner-carousel .slide-item .bg-layer,
  .banner-section .banner-carousel .slide-item:before { width: 45%; }
}
/* desktop: a area da foto segue a proporcao das midias (fotos 3:2, video 16:9),
   em vez de ficar quase quadrada e cortar as laterais. Sem a faixa bege embaixo;
   as setas ficam sobre a foto (mesmo estilo do celular). */
@media (min-width: 992px) {
  .banner-section { --bgw: calc(50vw + 200px); }
  .banner-section .banner-carousel .slide-item {
    display: flex; align-items: center; padding: 70px 0;
    min-height: calc(var(--bgw) / 1.6);
  }
  .banner-section .banner-carousel .slide-item:before { display: none; }
  /* todos os slides com a altura do mais alto (senao a foto do slide curto nao chega ao fim) */
  .banner-section .banner-carousel .owl-stage { display: flex; }
  .banner-section .banner-carousel .owl-item { display: flex; float: none; flex-shrink: 0; }
  .banner-section .banner-carousel .owl-item > .slide-item { flex: 1; }
  .banner-section .owl-nav {
    position: absolute; left: auto; right: 0; top: 50%; bottom: auto;
    width: var(--bgw); height: 0; margin: 0; transform: none; z-index: 6; pointer-events: none;
  }
  .banner-section .owl-nav button.owl-prev, .banner-section .owl-nav button.owl-next {
    position: absolute; top: 0; width: 52px; height: 52px; margin: -26px 0 0; line-height: 52px;
    border-radius: 50%; border: 1px solid rgba(255, 255, 255, .6);
    background: rgba(38, 37, 44, .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    pointer-events: auto; transition: background-color .3s ease, border-color .3s ease;
  }
  .banner-section .owl-nav button.owl-prev { left: 24px; }
  .banner-section .owl-nav button.owl-next { right: 24px; }
  .banner-section .owl-nav button:hover { background: rgba(38, 37, 44, .55); border-color: #fff; }
  .banner-section .owl-nav button:before {
    content: ''; width: 10px; height: 10px; left: 50%; top: 50%; background: none !important;
    border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff;
  }
  .banner-section .owl-nav button.owl-prev:before { transform: translate(-30%, -50%) rotate(45deg); }
  .banner-section .owl-nav button.owl-next:before { transform: translate(-70%, -50%) rotate(-135deg); }
}
@media (min-width: 992px) and (max-width: 1200px) { .banner-section { --bgw: 45%; } }
/* 1201px+: o logo grande desce para o topo da coluna escura; o texto centraliza abaixo dele */
@media (min-width: 1201px) { .banner-section .banner-carousel .slide-item { padding: 150px 0 60px; } }

/* --------------------------------------------------------------------------
   Projetos na home: carrossel de 3 com setas nas laterais (mesmo estilo do banner)
   -------------------------------------------------------------------------- */
.home-projects { position: relative; }
.home-projects .owl-nav { position: absolute; left: 0; right: 0; top: 0; height: 0; pointer-events: none; }
.home-projects .owl-nav button {
  position: absolute; top: calc(var(--img-h, 260px) / 2); transform: translateY(-50%);
  width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(255,255,255,.45) !important;
  background: rgba(38,37,44,.55) !important; pointer-events: auto; transition: all 400ms ease;
}
.home-projects .owl-nav button:hover { background: var(--bella-rose) !important; border-color: var(--bella-rose) !important; }
.home-projects .owl-nav button span { display: none; }
.home-projects .owl-nav button:before { content: ''; position: absolute; inset: 0; background-repeat: no-repeat; background-position: center; }
.home-projects .owl-nav button.owl-prev { left: -76px; }
.home-projects .owl-nav button.owl-next { right: -76px; }
.home-projects .owl-nav button.owl-prev:before { background-image: url(../images/icons/icon-10.png); }
.home-projects .owl-nav button.owl-next:before { background-image: url(../images/icons/icon-11.png); }
@media (max-width: 991px) {
  .home-projects .owl-nav button.owl-prev { left: 12px; }
  .home-projects .owl-nav button.owl-next { right: 12px; }
}

/* ==========================================================================
   Numeros (funfact): centralizados, e num tamanho em que "135+" cabe na coluna
   ========================================================================== */
.funfact-block-one .inner-box { text-align: center; }
.funfact-block-one .inner-box .count-outer { font-size: 88px; line-height: 80px; height: 80px; white-space: nowrap; }
.funfact-block-one .inner-box .count-outer .symble { top: -6px; margin-left: 4px; }

/* ==========================================================================
   Hover dos cards de projeto (home e galeria): o layout base sobrepunha uma copia
   da foto esticada e borrada, que parecia bug. Aqui a propria foto da um zoom lento.
   ========================================================================== */
.project-block-one .inner-box .image-box .overlay-image { display: none; }
.project-block-one .inner-box .image-box .image img { transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.project-block-one .inner-box:hover .image-box .image img { transform: scale(1.06); }
.project-block-one .inner-box .content-box .info-list,
.project-block-one .inner-box .content-box .text-box { transition: all 600ms cubic-bezier(.2, .7, .2, 1); }
/* na galeria o titulo do card nao e link e herdava a cor escura */
.project-block-one .inner-box .content-box .text-box h3 { color: #fff; }
/* legenda do card com a mesma margem dos dois lados (o layout base so tinha a da esquerda) */
.project-block-one .inner-box .content-box .text-box { left: 0; right: 0; padding: 0 30px; }
/* galeria: cards menores, legenda proporcional */
.gallery-col .project-block-one .inner-box .content-box .text-box { padding: 0 24px; }
.gallery-col .project-block-one .inner-box:hover .content-box .text-box { bottom: 22px; }
.gallery-col .project-block-one .inner-box .content-box .text-box p { font-size: 15px; line-height: 20px; margin-bottom: 2px; }
.gallery-col .project-block-one .inner-box .content-box .text-box h3 { font-size: 19px; line-height: 24px; }

/* ==========================================================================
   Menu em maiusculas (desktop, cabecalho fixo, dropdown e celular)
   ========================================================================== */
.main-menu .navigation > li > a { text-transform: uppercase; font-size: 15px; letter-spacing: .08em; }
.main-menu .navigation > li > ul > li > a { text-transform: uppercase; font-size: 13px; letter-spacing: .08em; }
.mobile-menu .navigation li > a { text-transform: uppercase; letter-spacing: .08em; }

/* ==========================================================================
   Painel lateral: icones SVG de contato, todos do mesmo tamanho e na mesma coluna,
   alinhados a primeira linha do texto (o layout base deslocava cada PNG de um jeito)
   ========================================================================== */
.xs-sidebar-group .content-inner .info-box .info li { padding-left: 40px; }
.xs-sidebar-group .content-inner .info-box .info li .icon,
.xs-sidebar-group .content-inner .info-box .info li:first-child .icon,
.xs-sidebar-group .content-inner .info-box .info li:nth-child(3) .icon {
  left: 0; top: 1px; width: 22px; height: 22px; font-size: 0; line-height: 0; color: var(--theme-color);
}
.xs-sidebar-group .content-inner .info-box .info li .icon svg { display: block; width: 22px; height: 22px; }
/* icones SVG de linha no lugar dos PNGs do layout base (Quem somos: fabrica / design) */
.bm-svg-icon { color: var(--theme-color); line-height: 0; }
.bm-svg-icon svg { display: block; }
/* passos "how it works": SVG centralizado no circulo */
.working-block-one .inner-box .icon-box .icon.bm-svg-icon { display: flex; align-items: center; justify-content: center; height: 100%; }
/* Servicos: seta SVG dos links no lugar do PNG (mesma posicao do layout base) */
.service-block-two .inner-box .link a .link-arrow { position: absolute; top: 4px; right: 0; line-height: 0; transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.service-block-two .inner-box .link a:hover .link-arrow { transform: translateX(4px); }
/* Contato: icones SVG alinhados ao titulo de cada item */
.contact-style-three .info-content .info-list li .icon.bm-svg-icon { top: 2px; width: 30px; display: flex; justify-content: center; }
/* depoimentos: aspas SVG brancas centralizadas no circulo */
.testimonial-section .testimonial-block .image-box .icon-box.bm-quote { display: flex; align-items: center; justify-content: center; line-height: 0; color: #fff; }
/* acordeao de servicos: chevron SVG que gira suave ao abrir */
.faq-section .accordion-box .accordion .acc-btn .icon-box.bm-chevron { line-height: 0; color: var(--bella-ink); top: 22px; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.testimonial-section .testimonial-block .image-box .icon-box.bm-quote svg { transform: rotate(180deg); }

/* ==========================================================================
   Ultimos icones SVG no lugar dos PNGs do layout base
   ========================================================================== */
/* barra do topo: telefone e envelope */
.header-top .info-list li .bm-top-icon { position: absolute; left: 0; top: 4px; line-height: 0; color: var(--theme-color); }
/* botao do painel lateral: branco na home, escuro nas internas */
.main-header .nav-btn.bm-nav-btn { display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.header-style-five .nav-btn.bm-nav-btn { color: var(--bella-ink); }
/* botoes do hover dos cards de projeto */
.project-block-one .inner-box .content-box .info-list li a { display: inline-flex; align-items: center; justify-content: center; color: var(--bella-ink); }
/* play dos videos */
.video-btn a { display: inline-flex !important; align-items: center; justify-content: center; color: var(--bella-ink); }
.video-btn a svg { position: relative; z-index: 1; }
/* credito do desenvolvedor no rodape: o "o" de neo na cor da marca */
.main-footer .copyright .dev-credit span { color: #40b0b6; }
.main-footer .copyright .dev-line { display: block; margin-top: 4px; }

/* "Made in USA / Fabricado nos EUA" vertical ao lado da foto (Quem somos):
   o layout base girava o texto em volta do centro, entao textos longos (PT) invadiam a foto.
   Aqui ele fica preso no mesmo ponto do original e cresce so para baixo. */
.image_block_one .image-box .text {
  left: 74px; top: 35px; line-height: 28px; white-space: nowrap;
  writing-mode: vertical-rl; transform: rotate(180deg);
}
.image_block_one .image-box .text:lang(pt) { letter-spacing: 6px; }
/* 992-1199px: a foto pequena sobe e cobriria o texto vertical (em qualquer idioma) */
@media (min-width: 992px) and (max-width: 1199.98px) { .image_block_one .image-box .text { display: none; } }

/* celular/tablet (menu hamburguer, ate 1200px): sem o botao do painel lateral, so o menu normal */
@media only screen and (max-width: 1200px) {
  .main-header .nav-btn.navSidebar-button { display: none !important; }
}

/* celular/tablet: o layout base nao tinha cabecalho fixo; aqui ele existe (logo + menu hamburguer) */
@media only screen and (max-width: 1200px) {
  .main-header .sticky-header { display: block !important; }
  .main-header .sticky-header .outer-box { display: flex; align-items: center; justify-content: space-between; padding-top: 0px; padding-bottom: 0px; }
  .main-header .sticky-header .logo-box img { max-height: 52px; }
}

/* celular: sem as redes sociais na barra do topo (continuam no rodape) */
@media only screen and (max-width: 767px) {
  .header-top .social-links { display: none !important; }
}

/* ==========================================================================
   Tabbar do celular (ate 1200px), no padrao dos outros projetos:
   barra inteira na base da tela com 5 abas; Portas, Mais e Contato abrem um sub-menu
   ========================================================================== */
.bella-tabbar { display: none; }
@media only screen and (max-width: 1200px) {
  .bella-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 10020; width: 100%; min-height: 64px;
    display: flex; align-items: stretch; justify-content: space-between;
    padding: 0 0 env(safe-area-inset-bottom); background: rgba(38, 37, 44, .97);
    border: 0; border-radius: 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .18);
    -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
    transition: opacity .3s ease, transform .3s ease;
  }
  .bella-tabbar .tab-link, .bella-tabbar .tab-item { flex: 1 1 0; min-width: 0; }
  .bella-tabbar .tab-item { position: relative; display: flex; }
  .bella-tabbar .tab-link, .bella-tabbar .tab-btn {
    width: 100%; height: 64px; padding: 4px 2px; border: 0; border-radius: 0; background: transparent;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    color: #fff; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background-color .25s ease, color .25s ease;
  }
  .bella-tabbar .tab-link svg, .bella-tabbar .tab-btn svg { flex: 0 0 auto; }
  .bella-tabbar .tab-link span, .bella-tabbar .tab-btn span {
    display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--jost); font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: .06em;
    text-transform: uppercase; color: var(--bella-rose);
  }
  .bella-tabbar .tab-link:hover, .bella-tabbar .tab-btn:hover,
  .bella-tabbar .tab-link:focus-visible, .bella-tabbar .tab-btn:focus-visible,
  .bella-tabbar .tab-item.is-open .tab-btn { background: rgba(197, 177, 170, .14); outline: none; }
  /* aba da pagina atual */
  .bella-tabbar .is-current.tab-link, .bella-tabbar .tab-item.is-current .tab-btn { background: rgba(197, 177, 170, .22); }
  .bella-tabbar .is-current.tab-link span, .bella-tabbar .tab-item.is-current .tab-btn span { color: #fff; }

  /* janelinha do sub-menu */
  .bella-tabbar .tab-submenu {
    position: absolute; left: 50%; bottom: calc(100% + 10px); min-width: 210px; padding: 8px;
    transform: translateX(-50%) translateY(10px);
    background: #26252C; border: 1px solid rgba(197, 177, 170, .25); border-radius: 18px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .3);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .22s ease, transform .3s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .3s;
  }
  .bella-tabbar .tab-item.align-left .tab-submenu { left: 8px; transform: translateY(10px); }
  .bella-tabbar .tab-item.align-right .tab-submenu { left: auto; right: 8px; transform: translateY(10px); }
  .bella-tabbar .tab-item.is-open .tab-submenu {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
    transition: opacity .22s ease, transform .3s cubic-bezier(.2, .7, .2, 1), visibility 0s;
  }
  .bella-tabbar .tab-item.align-left.is-open .tab-submenu,
  .bella-tabbar .tab-item.align-right.is-open .tab-submenu { transform: translateY(0); }
  .bella-tabbar .tab-submenu a {
    display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px;
    color: #F1EFE9; text-decoration: none; font-size: 15px; line-height: 1.2; white-space: nowrap;
    transition: background-color .2s ease, color .2s ease;
  }
  .bella-tabbar .tab-submenu a svg, .bella-tabbar .tab-submenu a i { flex: 0 0 16px; width: 16px; color: var(--bella-rose); text-align: center; font-size: 15px; }
  .bella-tabbar .tab-submenu a:hover, .bella-tabbar .tab-submenu a:focus-visible { background: rgba(197, 177, 170, .14); color: #fff; outline: none; }

  /* o resto da pagina abre espaco para a tabbar */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .whatsapp-float { bottom: calc(82px + env(safe-area-inset-bottom)) !important; }
  .scroll-to-top { bottom: calc(82px + env(safe-area-inset-bottom)) !important; }
  /* some quando o menu hamburguer esta aberto */
  .mobile-menu-visible .bella-tabbar { opacity: 0; pointer-events: none; transform: translateY(100%); }
}
@media only screen and (max-width: 380px) {
  .bella-tabbar .tab-link span, .bella-tabbar .tab-btn span { font-size: 9px; letter-spacing: .03em; }
}

/* --------------------------------------------------------------------------
   Banner da home no celular/tablet (ate 991px): o layout base escondia a foto.
   Aqui a foto aparece inteira em cima e o texto vem embaixo, na area escura,
   sem nada por cima da foto (mesma separacao do desktop, empilhada).
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 991px) {
  .banner-section { --bn-ph: clamp(240px, 62vw, 460px); padding-bottom: 0 !important; }
  .banner-section .banner-carousel .slide-item { padding: 0 0 40px; }
  .banner-carousel .slide-item .bg-layer {
    display: block !important; position: relative; left: auto; right: auto; top: auto;
    width: 100%; height: var(--bn-ph); background-position: center center;
  }
  /* setas delicadas sobre a foto, centralizadas na altura dela */
  .banner-section .owl-nav {
    display: block !important; position: absolute; left: 0; right: 0; top: calc(var(--bn-ph) / 2);
    bottom: auto; height: 0; margin: 0; transform: none; z-index: 6; pointer-events: none;
  }
  .banner-section .owl-nav button.owl-prev, .banner-section .owl-nav button.owl-next {
    position: absolute; top: 0; width: 38px; height: 38px; margin: -19px 0 0; line-height: 38px;
    border-radius: 50%; border: 1px solid rgba(255, 255, 255, .55);
    background: rgba(38, 37, 44, .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    pointer-events: auto; -webkit-tap-highlight-color: transparent;
    transition: background-color .3s ease, border-color .3s ease;
  }
  .banner-section .owl-nav button.owl-prev { left: 12px; }
  .banner-section .owl-nav button.owl-next { right: 12px; }
  .banner-section .owl-nav button:hover, .banner-section .owl-nav button:active { background: rgba(38, 37, 44, .5); border-color: #fff; }
  .banner-section .owl-nav button:before {
    content: ''; width: 8px; height: 8px; left: 50%; top: 50%; background: none !important;
    border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff;
  }
  .banner-section .owl-nav button.owl-prev:before { transform: translate(-30%, -50%) rotate(45deg); }
  .banner-section .owl-nav button.owl-next:before { transform: translate(-70%, -50%) rotate(-135deg); }
  .banner-carousel .inner-container { padding-top: 36px; }
  .banner-carousel .content-box { max-width: none; }
}
@media only screen and (max-width: 599px) {
  .banner-carousel .content-box h2 { font-size: 36px; line-height: 1.2; }
  .banner-carousel .content-box p { font-size: 16px; line-height: 1.6; }
}

/* banner da home: video de fundo no 1o slide (a foto fica de poster/fallback) */
.banner-carousel .slide-item .bg-layer.bg-video { overflow: hidden; }
.banner-carousel .slide-item .bg-layer.bg-video video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
}

/* ==========================================================================
   Visualizador 3D da cozinha (home, secao "From your floor plan")
   ========================================================================== */
.k3d-poster { position: relative; }
.k3d-launch {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px;
  border: 0; border-radius: 40px; background: var(--bella-ink); color: #fff;
  font-size: 16px; font-weight: 500; letter-spacing: .02em; white-space: nowrap;
  box-shadow: 0 10px 30px rgba(38, 37, 44, .28); cursor: pointer; transition: background .25s, transform .25s;
}
.k3d-launch:hover, .k3d-launch:focus-visible { background: #3a3942; transform: translateX(-50%) translateY(-2px); }
.k3d-launch svg { color: var(--bella-rose); }
.k3d-launch.is-loading { cursor: progress; opacity: .85; }

html.k3d-open, html.k3d-open body { overflow: hidden; }
html.k3d-open .scroll-to-top { display: none !important; }
.k3d {
  position: fixed; inset: 0; z-index: 10050; color: var(--bella-ink);
  background: radial-gradient(120% 90% at 50% 35%, var(--bella-cream-2) 0%, var(--bella-cream) 70%, #d6d2c4 100%);
  -webkit-user-select: none; user-select: none; overscroll-behavior: contain;
}
.k3d[hidden] { display: none; }
.k3d-stage, .k3d-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.k3d[data-mode="walk"] .k3d-stage canvas { cursor: grab; }
.k3d[data-mode="walk"] .k3d-stage canvas:active { cursor: grabbing; }

.k3d button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.k3d button:focus-visible { outline: 2px solid var(--bella-ink); outline-offset: 2px; }
.k3d-head, .k3d-bar, .k3d-hint, .k3d-joy { position: absolute; z-index: 2; }

.k3d-head {
  top: 0; left: 0; right: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: max(16px, env(safe-area-inset-top)) 16px 0; pointer-events: none;
}
.k3d-head > * { pointer-events: auto; }
.k3d-title { padding: 10px 16px; border-radius: 14px; background: rgba(241, 239, 233, .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); line-height: 1.35; }
.k3d-title strong { display: block; font-size: 17px; font-weight: 600; }
.k3d-title span { display: block; font-size: 13px; color: #5d5c63; }

.k3d-icon {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(241, 239, 233, .9); box-shadow: 0 2px 10px rgba(38, 37, 44, .12); cursor: pointer; transition: background .2s;
}
.k3d-icon:hover { background: #fff; }
.k3d .k3d-close { background: var(--bella-ink); color: #fff; }
.k3d .k3d-close:hover { background: #3a3942; }

.k3d-hint {
  top: calc(max(16px, env(safe-area-inset-top)) + 70px); left: 50%; transform: translateX(-50%);
  max-width: calc(100% - 32px); pointer-events: none; transition: opacity .6s;
}
.k3d-hint.is-faded { opacity: 0; }
.k3d-hint p {
  display: none; margin: 0; padding: 8px 16px; border-radius: 30px; background: rgba(38, 37, 44, .78); color: #fff;
  font-size: 13px; line-height: 1.4; text-align: center;
}
.k3d[data-mode="orbit"] .k3d-hint [data-for="orbit"],
.k3d[data-mode="top"] .k3d-hint [data-for="top"],
.k3d[data-mode="walk"] .k3d-hint [data-for="walk"] { display: block; }
.k3d-coarse { display: none; }
@media (pointer: coarse) { .k3d-fine { display: none; } .k3d-coarse { display: inline; } }

.k3d-bar {
  left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px);
}
.k3d-modes, .k3d-tools {
  display: flex; gap: 4px; padding: 5px; border-radius: 40px;
  background: rgba(241, 239, 233, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 6px 24px rgba(38, 37, 44, .16);
}
.k3d-tools .k3d-icon { width: 40px; height: 40px; box-shadow: none; background: transparent; }
.k3d-tools .k3d-icon:hover { background: rgba(38, 37, 44, .08); }
.k3d-modes button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 30px;
  background: transparent; font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background .2s, color .2s;
}
.k3d-modes button:hover { background: rgba(38, 37, 44, .08); }
.k3d-modes button[aria-pressed="true"] { background: var(--bella-ink); color: #fff; }
.k3d-modes button[aria-pressed="true"] svg { color: var(--bella-rose); }
.k3d-modes button:disabled { opacity: .45; cursor: default; }

/* joystick: so no modo walk, em telas de toque */
.k3d-joy {
  display: none; left: max(24px, env(safe-area-inset-left)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 76px);
  width: 120px; height: 120px; border-radius: 50%; touch-action: none;
  background: rgba(38, 37, 44, .18); border: 2px solid rgba(255, 255, 255, .55);
}
.k3d-joy span {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%;
  background: rgba(241, 239, 233, .95); box-shadow: 0 3px 12px rgba(38, 37, 44, .3); pointer-events: none;
}
@media (any-pointer: coarse) { .k3d[data-mode="walk"] .k3d-joy { display: block; } }

.k3d-loading {
  position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 14px;
  pointer-events: none; text-align: center;
}
.k3d-loading[hidden] { display: none; }
.k3d-progress { width: min(260px, 60vw); height: 4px; border-radius: 4px; background: rgba(38, 37, 44, .12); overflow: hidden; }
.k3d-progress span { display: block; width: 0; height: 100%; background: var(--bella-ink); transition: width .2s; }
.k3d-loading p { margin: 0; font-size: 15px; }
.k3d-err { display: none; }
.k3d-loading.is-error .k3d-err { display: block; }
.k3d-loading.is-error .k3d-msg, .k3d-loading.is-error .k3d-progress { display: none; }

@media (max-width: 767px) {
  .k3d-launch { bottom: 16px; padding: 11px 20px; font-size: 15px; }
  .k3d-title span { display: none; }
  .k3d-title { padding: 9px 14px; }
  .k3d-bar { flex-direction: column-reverse; align-items: center; gap: 8px; width: calc(100% - 32px); }
  .k3d-modes { width: 100%; justify-content: space-between; }
  .k3d-modes button { flex: 1; flex-direction: column; gap: 2px; min-height: 52px; padding: 4px 6px; font-size: 12px; border-radius: 26px; }
  .k3d-joy { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 130px); }
  .k3d-hint { top: calc(max(16px, env(safe-area-inset-top)) + 60px); }
}
@media (prefers-reduced-motion: reduce) { .k3d-launch, .k3d-hint { transition: none; } }

/* ==========================================================================
   Guia de selecao (selection-guide.html): conteudo do catalogo em PDF
   ========================================================================== */
.guide-intro p { margin-bottom: 16px; }
.guide-lead { font-family: var(--title-font); font-size: 22px; line-height: 32px; color: var(--bella-ink); border-left: 3px solid var(--bella-rose); padding-left: 18px; margin: 24px 0 !important; }
.guide-jump { display: flex; flex-wrap: wrap; gap: 10px; }
.guide-jump a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--bella-line); background: var(--bella-cream-2); color: var(--bella-ink); font-family: var(--jost); font-size: 14px; font-weight: 600; letter-spacing: .04em; transition: all .25s; }
.guide-jump a:hover { background: var(--bella-ink); border-color: var(--bella-ink); color: #fff; }
.guide-jump a svg { color: var(--bella-stone); }
.guide-jump a:hover svg { color: var(--bella-rose); }
.guide-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-left: 30px; }
.guide-photos figure { margin: 0; overflow: hidden; }
.guide-photos img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 3 / 4; }
.guide-photos .guide-photo-main { grid-column: 1 / -1; }
.guide-photos .guide-photo-main img { aspect-ratio: 885 / 575; }
@media (max-width: 991.98px) { .guide-photos { margin: 50px 0 0; } }

/* amostras de cor */
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 26px 18px; }
.swatch { margin: 0; }
.swatch img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; box-shadow: 0 10px 22px rgba(38,37,44,.14); transition: transform .35s, box-shadow .35s; }
.swatch:hover img { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(38,37,44,.2); }
.swatch-zoom { position: relative; display: block; cursor: pointer; }
.swatch-zoom-icon { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--bella-ink); box-shadow: 0 4px 12px rgba(38,37,44,.18); opacity: 0; transform: scale(.85); transition: opacity .3s, transform .3s; pointer-events: none; }
.swatch:hover .swatch-zoom-icon, .swatch-zoom:focus-visible .swatch-zoom-icon, .door-tile:hover .swatch-zoom-icon, .door-tile:focus-visible .swatch-zoom-icon, .dc-img:hover .swatch-zoom-icon, .dc-img:focus-visible .swatch-zoom-icon, .north-color:hover .swatch-zoom-icon, .north-color:focus-visible .swatch-zoom-icon, .has-zoom:hover .swatch-zoom-icon, .has-zoom:focus-visible .swatch-zoom-icon { opacity: 1; transform: none; }
@media (hover: none) { .swatch-zoom-icon { opacity: 1; transform: none; width: 32px; height: 32px; } }
.swatch figcaption { margin-top: 10px; line-height: 20px; }
.swatch-name { display: block; font-size: 15px; font-weight: 600; color: var(--bella-ink); }
.swatch-type { display: inline-block; margin-top: 4px; padding: 1px 8px; background: var(--bella-rose); color: var(--bella-ink); font-family: var(--jost); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.swatch-note { margin: 40px 0 0; font-size: 15px; color: #6d6c72; }
.swatch-note a { color: var(--bella-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 575.98px) { .swatch-grid { grid-template-columns: repeat(3, 1fr); gap: 20px 12px; } .swatch-name { font-size: 13px; line-height: 18px; } }

/* projeto em destaque */
.guide-feature { padding: 120px 0 0; }
.guide-feature-img { position: relative; margin: 0; }
.guide-feature-img img { display: block; width: 100%; aspect-ratio: 1024 / 600; object-fit: cover; }
.guide-feature-img figcaption { position: absolute; right: 0; bottom: 40px; background: var(--bella-rose); padding: 22px 34px; color: var(--bella-ink); line-height: 1.35; }
.guide-feature-img figcaption span { display: block; font-family: var(--jost); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.guide-feature-img figcaption strong { display: block; font-family: var(--title-font); font-size: 30px; line-height: 38px; font-weight: 600; }
.guide-feature-img figcaption em { font-size: 17px; }
@media (max-width: 767.98px) {
  .guide-feature { padding-top: 80px; }
  .guide-feature-img figcaption { position: static; padding: 18px 22px; }
}

/* portas do catalogo */
.door-tile-col { margin-bottom: 30px; }
.door-tile { display: block; cursor: pointer; text-align: center; color: var(--bella-ink); }
.door-tile-img { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 5; background: var(--bella-cream-2); padding: 16px; transition: background .3s; }
.door-tile-img img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(38,37,44,.16)); transition: transform .35s; }
.door-tile:hover .door-tile-img { background: var(--bella-cream); }
.door-tile:hover .door-tile-img img { transform: scale(1.04); }
.door-tile-name { display: block; margin-top: 12px; font-family: var(--jost); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.door-tile:hover .door-tile-name { color: var(--bella-stone); }
.guide-door-photo { margin: 0 0 30px; height: calc(100% - 30px); min-height: 320px; overflow: hidden; }
.guide-door-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* construcao */
.spec-card { display: grid; grid-template-columns: 200px 1fr; height: 100%; background: #fff; border: 1px solid var(--bella-line); }
.spec-card figure { margin: 0; }
.spec-card figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spec-body { padding: 30px 32px; }
.spec-body h3 { font-size: 26px; line-height: 34px; margin-bottom: 14px; }
.spec-list { list-style: none; padding: 0; margin: 0; }
.spec-list li { position: relative; padding: 9px 0 9px 22px; border-bottom: 1px solid var(--bella-line); font-size: 16px; line-height: 25px; }
.spec-list li:last-child { border-bottom: 0; }
.spec-list li:before { content: ""; position: absolute; left: 0; top: 18px; width: 8px; height: 8px; background: var(--bella-rose); }
@media (max-width: 575.98px) { .spec-card { grid-template-columns: 1fr; } .spec-card figure img { aspect-ratio: 16 / 10; } .spec-body { padding: 24px 22px; } }
.overlay-card { height: 100%; background: #fff; border: 1px solid var(--bella-line); padding: 30px; }
.overlay-card figure { margin: 0 0 22px; height: 170px; display: flex; align-items: center; justify-content: center; }
.overlay-card figure img { max-height: 100%; width: auto; max-width: 100%; mix-blend-mode: multiply; }
.overlay-card h3 { font-size: 24px; line-height: 32px; margin-bottom: 8px; }
.overlay-card p { margin: 0; font-size: 16px; line-height: 26px; }

/* selos e observacoes */
.guide-notes { border-top: 1px solid var(--bella-line); }
.guide-notes-inner { display: flex; align-items: center; gap: 50px; }
.guide-badges { display: flex; gap: 20px; flex-shrink: 0; }
.guide-badges img { width: 110px; height: 110px; border-radius: 50%; mix-blend-mode: multiply; }
.guide-fineprint p { font-size: 14px; line-height: 22px; color: #6d6c72; margin-bottom: 10px; }
.guide-fineprint p:last-child { margin-bottom: 0; }
@media (max-width: 767.98px) { .guide-notes-inner { flex-direction: column; align-items: flex-start; gap: 26px; } .guide-badges img { width: 90px; height: 90px; } }
.catalog-head .guide-link { display: inline-block; margin-top: 6px; color: var(--bella-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Armarios de base RTA (rta-base-cabinets.html)
   ========================================================================== */
.cab-pdf { display: inline-block; margin-top: 10px; color: var(--bella-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cab-howto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 40px; }
.cab-howto > div { background: var(--bella-cream-2); padding: 18px 20px; border-left: 3px solid var(--bella-rose); }
.cab-howto strong { display: block; font-family: var(--jost); font-size: 18px; letter-spacing: .04em; color: var(--bella-ink); margin-bottom: 4px; }
.cab-howto span { display: block; font-size: 15px; line-height: 23px; }
@media (max-width: 767.98px) { .cab-howto { grid-template-columns: 1fr; } }
.cab-search { margin-bottom: 24px; max-width: 520px; }
.cab-search label { display: block; font-family: var(--jost); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--bella-ink); margin-bottom: 8px; }
.cab-search input { width: 100%; height: 52px; padding: 0 18px; border: 1px solid #dcdad3; background: #fff; font-size: 16px; color: var(--bella-ink); }
.cab-search input:focus { border-color: var(--bella-ink); outline: none; }

.cab-col { margin-bottom: 30px; scroll-margin-top: 140px; }
.cab-card { background: #fff; border: 1px solid var(--bella-line); height: 100%; display: flex; flex-direction: column; transition: box-shadow .4s; }
.cab-card:hover { box-shadow: 0 20px 50px rgba(38,37,44,.1); }
.cab-col:target .cab-card { box-shadow: 0 0 0 3px var(--bella-rose); }
.cab-top { display: grid; grid-template-columns: 42% 1fr; }
.cab-img { display: flex; align-items: center; justify-content: center; background: var(--bella-cream-2); padding: 22px; min-height: 230px; }
.cab-img img { max-width: 100%; max-height: 240px; width: auto; height: auto; mix-blend-mode: multiply; transition: transform .35s; }
.cab-img:hover img { transform: scale(1.04); }
.cab-head { padding: 22px 24px; }
.cab-code { display: inline-block; padding: 2px 9px; background: var(--bella-ink); color: #fff; font-family: var(--jost); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.cab-head h3 { font-size: 22px; line-height: 29px; margin: 10px 0 12px; }
.cab-sub, .cab-label, .sku-title { display: block; font-family: var(--jost); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6d6c72; margin-bottom: 4px; }
.cab-ranges { margin: 0; }
.cab-ranges > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--bella-line); font-size: 14px; line-height: 20px; }
.cab-ranges dt { font-weight: 400; color: #6d6c72; }
.cab-ranges dd { margin: 0; color: var(--bella-ink); font-weight: 600; text-align: right; }
.cab-caption { margin: 10px 0 0; font-size: 13px; color: #6d6c72; }
.cab-skus { padding: 18px 24px 4px; border-top: 1px solid var(--bella-line); }
.sku-group { margin-bottom: 14px; }
.sku-title { text-transform: none; letter-spacing: .02em; font-size: 13px; color: var(--bella-ink); margin: 6px 0 8px; }
.sku-list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.sku-list li { padding: 4px 9px; background: var(--bella-cream-2); border: 1px solid var(--bella-line); font-family: var(--jost); font-size: 13px; font-weight: 600; color: var(--bella-ink); letter-spacing: .02em; }
.sku-none { font-size: 14px; color: #6d6c72; margin: 4px 0 14px; }
.cab-notes { margin-top: auto; border-top: 1px solid var(--bella-line); }
.cab-notes summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 14px 24px; font-family: var(--jost); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bella-ink); }
.cab-notes summary::-webkit-details-marker { display: none; }
.cab-notes summary:after { content: "+"; font-size: 22px; line-height: 1; color: var(--bella-stone); }
.cab-notes[open] summary:after { content: "–"; }
.cab-notes summary:hover { background: var(--bella-cream-2); }
.cab-notes ul { margin: 0; padding: 0 24px 18px 42px; }
.cab-notes li { list-style: disc; font-size: 15px; line-height: 23px; margin-bottom: 6px; }
.cab-plan { display: block; margin: 0 24px 22px; padding: 14px; background: var(--bella-cream-2); text-align: center; }
.cab-plan img { max-width: 100%; max-height: 260px; mix-blend-mode: multiply; }
@media (max-width: 575.98px) {
  .cab-top { grid-template-columns: 1fr; }
  .cab-img { min-height: 0; }
  .cab-head, .cab-skus { padding-left: 18px; padding-right: 18px; }
}

.options-key { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 30px; margin: 0; }
.options-key > div { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--bella-line); font-size: 15px; }
.options-key dt { min-width: 44px; font-family: var(--jost); font-weight: 700; color: var(--bella-ink); }
.options-key dd { margin: 0; }
@media (max-width: 991.98px) { .options-key { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479.98px) { .options-key { grid-template-columns: 1fr; } }
.cab-fineprint { margin: 30px 0 0; font-size: 14px; color: #6d6c72; }

/* ==========================================================================
   Home: cozinha que se monta com o scroll (#kitchen-build)
   SVG gerado por _src2/kitchen_build.py; animacao no bella-motion.js, que liga
   .kb-live (secao presa na tela). Sem animacao a cozinha aparece pronta e os
   passos ficam todos abertos.
   ========================================================================== */
.kitchen-build {
  position: relative; background: var(--bella-cream-2); padding: 120px 0;
  --kb-wall: #e8e2d7; --kb-floor: #cdb699; --kb-plank: rgba(84, 60, 34, .2); --kb-trim: #fbf9f5;
  --kb-ply: #ead8b8; --kb-ply-in: #c8a97d; --kb-shelf: #e2cca4;
  --kb-counter: #f8f7f3; --kb-tile: #fcfbf8; --kb-grout: #d5cfc3; --kb-toe: #3c3a36; --kb-plan: #9c7d72;
  --kb-door: #8f9692; --kb-door-line: rgba(0, 0, 0, .2); --kb-pull: #b8955a;
}
.kitchen-build[data-finish="white"] { --kb-door: #f4f2ec; --kb-door-line: rgba(0, 0, 0, .17); --kb-pull: #2b2a2e; }
.kitchen-build[data-finish="navy"] { --kb-door: #2f3b4c; --kb-door-line: rgba(0, 0, 0, .38); --kb-pull: #c9a467; }
.kitchen-build[data-finish="walnut"] { --kb-door: #6e4f3c; --kb-door-line: rgba(0, 0, 0, .32); --kb-pull: #1f1e22; }

.kb-stage { margin: 0; overflow: hidden; border-radius: 4px; background: var(--kb-wall); box-shadow: 0 40px 70px -40px rgba(38, 37, 44, .45); }
.kb-svg { display: block; width: 100%; height: auto; }

/* passos */
.kb-steps { list-style: none; padding: 0; margin: 0 0 26px; border-bottom: 1px solid var(--bella-line); }
.kb-step { border-top: 1px solid var(--bella-line); }
.kb-step-btn {
  display: flex; align-items: baseline; gap: 14px; width: 100%; padding: 13px 0; border: 0; background: none;
  text-align: left; font-family: var(--title-font); font-size: 19px; line-height: 26px; color: var(--title-color); cursor: default;
}
.kb-num { min-width: 24px; font-family: var(--jost); font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--bella-stone); }
.kb-step p { margin: 0; padding: 0 0 15px 38px; font-size: 16px; line-height: 26px; }
.kb-progress { display: none; }
.kb-cta { margin-top: 4px; }

/* seletor de acabamento */
.kb-finish { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 20px; }
.kb-finish-label { font-family: var(--jost); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bella-ink); margin-right: 4px; }
.kb-finish button {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 7px; border: 1px solid var(--bella-line); border-radius: 40px;
  background: #fff; font-size: 14px; line-height: 20px; color: var(--bella-ink); transition: background .3s, border-color .3s, color .3s;
}
.kb-finish button i { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.kb-finish button:hover { border-color: var(--bella-ink); }
.kb-finish button[aria-pressed="true"] { background: var(--bella-ink); border-color: var(--bella-ink); color: #fff; }

/* sem animacao: cozinha pronta, sem a planta tracejada, presa ao lado do texto */
.kitchen-build:not(.kb-live) .kb-plan { display: none; }
@media (min-width: 992px) {
  .kitchen-build:not(.kb-live) .kb-art-col { align-self: flex-start; position: sticky; top: 120px; }
}

/* versao animada: secao presa, so o passo atual aberto */
.kitchen-build.kb-live { padding: 0; }
.kb-live .kb-pin { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 110px 0 40px; }
.kb-live .kb-pin > .auto-container { width: 100%; }
.kb-live .kb-step-btn { cursor: pointer; opacity: .42; transition: opacity .4s var(--bm-ease, ease); }
.kb-live .kb-step-btn:hover, .kb-live .kb-step.is-done .kb-step-btn { opacity: .7; }
.kb-live .kb-step.is-active .kb-step-btn { opacity: 1; }
.kb-live .kb-step.is-done .kb-num, .kb-live .kb-step.is-active .kb-num { color: var(--bella-ink); }
.kb-live .kb-step p {
  height: 0; padding-bottom: 0; opacity: 0; overflow: hidden;
  transition: height .5s var(--bm-ease, ease), padding .5s var(--bm-ease, ease), opacity .35s;
}
/* --kb-p = altura do maior paragrafo (medida no JS): trocar de passo nao empurra o titulo */
.kb-live .kb-step.is-active p { height: var(--kb-p, auto); padding-bottom: 15px; opacity: 1; transition-delay: 0s, 0s, .12s; }
.kb-live .kb-steps { margin-bottom: 0; border-bottom: 0; }
.kb-live .kb-progress { display: block; height: 2px; margin: 0 0 26px; background: var(--bella-line); }
.kb-live .kb-progress span { display: block; height: 100%; background: var(--bella-ink); transform: scaleX(0); transform-origin: left center; }

/* pecas do desenho */
.kb-svg .kb-wall { fill: var(--kb-wall); }
.kb-svg .kb-floor { fill: var(--kb-floor); }
.kb-svg .kb-plank { fill: none; stroke: var(--kb-plank); stroke-width: 1.2; }
.kb-svg .kb-trim, .kb-svg .kb-sill { fill: var(--kb-trim); }
.kb-svg .kb-sill { stroke: rgba(0, 0, 0, .07); }
.kb-svg .kb-sash { fill: none; stroke: rgba(0, 0, 0, .1); }
.kb-svg .kb-hill { fill: #b8bead; }
.kb-svg .kb-tree { fill: #98a490; }
.kb-svg .kb-glare { fill: #fff; opacity: .28; }
.kb-svg .kb-outlet > rect:first-child { fill: #fcfbf8; stroke: rgba(0, 0, 0, .14); }
.kb-svg .kb-slot { fill: #6f6a62; }
.kb-svg .kb-plan rect, .kb-svg .kb-plan path { fill: none; stroke: var(--kb-plan); stroke-width: 1.5; }
.kb-svg .kb-outline rect { stroke-dasharray: 7 6; }
.kb-svg .kb-dims text { fill: var(--kb-plan); font-family: var(--jost); font-size: 16px; font-weight: 600; paint-order: stroke; stroke: var(--kb-wall); stroke-width: 6px; stroke-linejoin: round; }
.kb-svg .kb-ply { fill: var(--kb-ply); }
.kb-svg .kb-ply-in { fill: var(--kb-ply-in); }
.kb-svg .kb-shelf { fill: var(--kb-shelf); }
.kb-svg .kb-toe rect { fill: var(--kb-toe); }
.kb-svg .kb-counter rect { fill: var(--kb-counter); stroke: rgba(0, 0, 0, .12); }
.kb-svg .kb-vein { fill: none; stroke: rgba(110, 110, 110, .3); stroke-width: .8; }
.kb-svg .kb-grout rect { fill: var(--kb-grout); }
.kb-svg .kb-tile rect { fill: var(--kb-tile); }
.kb-svg .kb-crown rect, .kb-svg .kb-face, .kb-svg .kb-panel { fill: var(--kb-door); stroke: var(--kb-door-line); stroke-width: 1.2; }
.kb-svg .kb-pull { fill: var(--kb-pull); }
.kb-svg .kb-crown rect, .kb-svg .kb-face, .kb-svg .kb-panel, .kb-svg .kb-pull { transition: fill .6s ease, stroke .6s ease; }
.kb-svg .kb-steel { fill: url(#kbSteel); stroke: rgba(0, 0, 0, .14); }
.kb-svg .kb-steel-2 { fill: #c0c4c6; }
.kb-svg .kb-handle, .kb-svg .kb-faucet { fill: #959b9e; }
.kb-svg .kb-faucet { fill: none; stroke: #959b9e; stroke-width: 5; stroke-linecap: round; }
.kb-svg .kb-faucet.kb-thin { stroke-width: 3; }
.kb-svg .kb-dark { fill: #2d2c30; }
.kb-svg .kb-oven { fill: #2b2b30; }
.kb-svg .kb-knob { fill: #3b3a3e; }
.kb-svg .kb-led { fill: #86c98a; }
.kb-svg .kb-led-strip { fill: #fff6dc; }
.kb-svg .kb-wood { fill: #c49a6c; }
.kb-svg .kb-hole { fill: var(--kb-tile); }
.kb-svg .kb-leaf { fill: #7f9473; }
.kb-svg .kb-pot { fill: var(--bella-rose); }
.kb-svg .kb-utensil { fill: none; stroke: #8a6a48; stroke-width: 3; stroke-linecap: round; }
.kb-svg .kb-crock, .kb-svg .kb-bowl { fill: #fbfaf7; stroke: rgba(0, 0, 0, .14); }
.kb-svg .kb-lemon { fill: #e6c65a; }

/* notebooks e telas baixas: a coluna de texto precisa caber inteira na tela presa */
@media (min-width: 992px) and (max-height: 860px) {
  .kb-live .kb-pin { padding: 100px 0 24px; }
  .kb-live .kb-text-col .sec-title { margin-bottom: 20px !important; }
  .kb-live .kb-text-col .sec-title h2 { font-size: 38px; line-height: 46px; }
  .kb-live .kb-step-btn { padding: 8px 0; font-size: 18px; }
  .kb-live .kb-progress { margin-bottom: 0; }
  .kb-live .kb-cta { display: none; }
}
@media (max-width: 991.98px) {
  .kitchen-build { padding: 90px 0; }
  .kb-text-col { margin-bottom: 40px; }
  /* animada no celular: titulo, desenho e passo atual (os outros passos somem) */
  .kb-live .kb-text-col { display: contents; }
  .kb-live .kb-text-col > * { width: 100%; padding-left: calc(var(--bs-gutter-x, 30px) * .5); padding-right: calc(var(--bs-gutter-x, 30px) * .5); }
  .kb-live .kb-text-col .sec-title { order: 1; margin-bottom: 18px !important; }
  .kb-live .kb-art-col { order: 2; }
  .kb-live .kb-steps { order: 3; margin-top: 16px; }
  .kb-live .kb-text-col > .kb-progress { order: 4; flex: 0 0 auto; width: calc(100% - var(--bs-gutter-x, 30px)); margin: 0 calc(var(--bs-gutter-x, 30px) * .5); padding: 0; }
  .kb-live .kb-cta { display: none; }
  /* passos empilhados na mesma celula: so o atual aparece, e todos continuam mediveis */
  .kb-live .kb-steps { display: grid; }
  .kb-live .kb-step { grid-area: 1 / 1; visibility: hidden; border-top: 0; }
  .kb-live .kb-step.is-active { visibility: visible; }
  .kb-live .kb-step-btn { padding: 4px 0 6px; }
  .kb-live .kb-step p { transition: none; }
  .kb-live .kb-pin { padding: 84px 0 96px; }
  .kb-live .kb-finish { margin-top: 12px; }
}
@media (max-width: 575.98px) {
  .kb-live .kb-text-col .sec-title h2 { font-size: 30px; line-height: 38px; }
  .kb-step-btn { font-size: 18px; }
  .kb-finish-label { width: 100%; }
  .kb-live .kb-finish-label { display: none; }
  .kb-finish button { padding: 5px 11px 5px 6px; font-size: 13px; }
}

/* ==========================================================================
   Colecao Super Matte (super-matte.html)
   ========================================================================== */
.matte-perks { list-style: none; padding: 0; margin: 0 0 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.matte-perks li { display: flex; align-items: center; gap: 12px; font-size: 16px; line-height: 22px; color: var(--bella-ink); }
.matte-perks svg { flex-shrink: 0; color: var(--bella-stone); }
@media (max-width: 575.98px) { .matte-perks { grid-template-columns: 1fr; } }
.matte-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.matte-actions .cab-pdf { margin-top: 0; }
.matte-hero { margin: 0 0 0 30px; overflow: hidden; }
.matte-hero img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 60%; }
@media (max-width: 991.98px) { .matte-hero { margin: 50px 0 0; } .matte-hero img { aspect-ratio: 4 / 3; } }
.matte-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 26px; }
.matte-color { display: block; color: var(--bella-ink); }
.matte-color img { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; box-shadow: 0 12px 26px rgba(38,37,44,.14); transition: transform .35s, box-shadow .35s; }
.matte-color:hover img { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(38,37,44,.2); }
.matte-color span { display: block; margin-top: 12px; font-family: var(--jost); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 767.98px) { .matte-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; } }
.matte-panel { margin: 0 0 0 30px; }
.matte-panel img { display: block; width: 100%; height: auto; }
@media (max-width: 991.98px) { .matte-panel { margin: 40px 0 0; } }
.matte-acc { display: block; background: #fff; border: 1px solid var(--bella-line); color: var(--bella-ink); transition: box-shadow .4s; }
.matte-acc:hover { box-shadow: 0 20px 50px rgba(38,37,44,.1); }
.matte-acc img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.matte-acc span { display: block; padding: 16px 20px; font-family: var(--jost); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* ==========================================================================
   Catalogo de portas (door-catalog.html)
   ========================================================================== */
.dc-group { margin-bottom: 60px; scroll-margin-top: 140px; }
.dc-col { margin-bottom: 30px; }
.dc-card { background: #fff; border: 1px solid var(--bella-line); height: 100%; display: flex; flex-direction: column; transition: box-shadow .4s; }
.dc-card:hover { box-shadow: 0 20px 50px rgba(38,37,44,.1); }
.dc-img { position: relative; display: flex; cursor: pointer; align-items: center; justify-content: center; aspect-ratio: 4 / 5; background: var(--bella-cream-2); padding: 22px; }
.dc-img.is-drawer { aspect-ratio: auto; min-height: 150px; }
.dc-img img { max-height: 100%; max-width: 100%; width: auto; box-shadow: 0 10px 20px rgba(38,37,44,.16); transition: transform .35s; }
.dc-img:hover img { transform: scale(1.04); }
.dc-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.dc-label { display: block; font-family: var(--jost); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6d6c72; }
.dc-body h3 { font-size: 21px; line-height: 28px; margin: 4px 0 10px; }
.dc-size { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 8px; padding: 6px 0; border-top: 1px solid var(--bella-line); border-bottom: 1px solid var(--bella-line); font-size: 14px; }
.dc-size dt { font-weight: 400; color: #6d6c72; }
.dc-size dd { margin: 0; font-weight: 600; color: var(--bella-ink); }
.dc-notes { list-style: none; padding: 0; margin: 0 0 14px; }
.dc-notes li, .dc-drawer li { font-size: 14px; line-height: 21px; color: #55545b; }
.dc-drawer { margin-top: auto; display: grid; grid-template-columns: 82px 1fr; gap: 12px; align-items: start; padding-top: 14px; border-top: 1px dashed var(--bella-line); }
.dc-drawer-img { display: block; background: var(--bella-cream-2); padding: 6px; }
.dc-drawer-img img { display: block; width: 100%; height: auto; }
.dc-drawer strong { display: block; font-size: 14px; color: var(--bella-ink); margin: 2px 0; }
.dc-drawer ul { list-style: none; padding: 0; margin: 0; }
.dc-drawer li { font-size: 13px; line-height: 19px; }

/* ==========================================================================
   Guia completo de cores (color-guide.html)
   ========================================================================== */
.cg-cover img { aspect-ratio: 1 / 1; }
.cg-group { padding-top: 50px; margin-top: 50px; border-top: 1px solid var(--bella-line); scroll-margin-top: 130px; }
.cg-group:first-of-type { border-top: 0; margin-top: 10px; padding-top: 0; }
.cg-head { margin-bottom: 34px; }
.cg-head.has-photo { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: center; }
.cg-photo { margin: 0; position: relative; overflow: hidden; }
.cg-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cg-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 12px 8px; background: linear-gradient(transparent, rgba(38,37,44,.75)); color: #fff; font-size: 12px; line-height: 16px; }
.cg-intro h2 { font-size: 40px; line-height: 50px; margin: 4px 0 10px; }
.cg-intro p { margin: 0; max-width: 560px; }
.cg-count { font-family: var(--jost); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bella-stone); }
.cg-sub { font-size: 22px; line-height: 30px; margin: 30px 0 16px; }
.cg-sub:first-child { margin-top: 0; }
.cg-grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
.cg-sw img { aspect-ratio: 1 / 1; background: #fff; }
.cg-sw a { display: block; }
.cg-paint { display: block; width: 100%; aspect-ratio: 1 / 1; box-shadow: 0 10px 22px rgba(38,37,44,.14), inset 0 0 0 1px rgba(38,37,44,.08); transition: transform .35s; }
.cg-sw:hover .cg-paint { transform: translateY(-4px); }
.cg-meta { display: block; font-size: 13px; line-height: 18px; color: #6d6c72; }
.cg-meta > span { color: var(--bella-ink); font-weight: 600; }
.cg-specie { font-style: italic; }
@media (max-width: 767.98px) {
  .cg-head.has-photo { grid-template-columns: 1fr; gap: 20px; }
  .cg-intro h2 { font-size: 30px; line-height: 38px; }
}
@media (max-width: 575.98px) { .cg-grid { grid-template-columns: repeat(3, 1fr); } }

/* guia de cores: clique seleciona a amostra para o pedido; a lupa no canto amplia */
.cg-hint { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px !important; font-size: 15px; line-height: 22px; color: #6d6c72; }
.cg-hint svg { flex: 0 0 16px; margin-top: 3px; color: var(--bella-ink); }
.cg-media { position: relative; }
.cg-pick { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.cg-pick img, .cg-pick .cg-paint { outline: 3px solid transparent; outline-offset: 3px; transition: transform .35s, box-shadow .35s, outline-color .2s; }
.cg-sw.is-picked .cg-pick img, .cg-sw.is-picked .cg-pick .cg-paint { outline-color: var(--bella-ink); }
.cg-check { position: absolute; left: 8px; top: 8px; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bella-ink); color: #fff; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s; pointer-events: none; }
.cg-sw.is-picked .cg-check { opacity: 1; transform: none; }
.cg-sw:hover .cg-check, .cg-sw.is-picked:hover .cg-check { top: 4px; }
.cg-sw:hover .cg-check { transition: opacity .2s, transform .2s, top .35s; }
.cg-sw .cg-zoom { position: absolute; right: 8px; top: 8px; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.94); color: var(--bella-ink); box-shadow: 0 4px 12px rgba(38,37,44,.18); opacity: 0; transform: scale(.85); transition: opacity .25s, transform .25s, top .35s; }
.cg-sw:hover .cg-zoom, .cg-sw .cg-zoom:focus-visible { opacity: 1; transform: none; top: 4px; }
.cg-sw .cg-zoom:hover { background: var(--bella-ink); color: #fff; }
@media (hover: none) { .cg-sw .cg-zoom { opacity: 1; transform: none; width: 30px; height: 30px; right: 6px; top: 6px; } .cg-check { left: 6px; top: 6px; } }

/* barra fixa com a contagem e o atalho para o pedido de amostras */
.cg-tray { position: fixed; left: 50%; bottom: 24px; z-index: 1000; width: min(560px, calc(100% - 32px)); transform: translate(-50%, calc(100% + 40px)); visibility: hidden; transition: transform .35s ease, visibility 0s .35s; }
.cg-tray.is-on { transform: translate(-50%, 0); visibility: visible; transition: transform .35s ease; }
.cg-tray-in { display: flex; align-items: center; gap: 16px; padding: 10px 10px 10px 22px; background: #fff; border: 1px solid var(--bella-line); box-shadow: 0 12px 34px rgba(38,37,44,.22); }
.cg-tray-count { flex: 1; margin: 0; font-size: 15px; line-height: 20px; color: var(--bella-ink); }
.cg-tray-count b { font-weight: 700; }
.cg-tray-clear { padding: 6px 4px; border: 0; background: none; font-size: 14px; color: #6d6c72; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cg-tray-clear:hover { color: var(--bella-ink); }
.cg-tray .theme-btn { flex: 0 0 auto; padding: 12px 22px; }
body.has-cg-tray .whatsapp-float, body.has-cg-tray .scroll-to-top { bottom: 100px; transition: bottom .35s; }
@media only screen and (max-width: 1200px) {
  .cg-tray { bottom: calc(76px + env(safe-area-inset-bottom)); }
  body.has-cg-tray .whatsapp-float, body.has-cg-tray .scroll-to-top { bottom: calc(150px + env(safe-area-inset-bottom)) !important; }
}
@media (max-width: 575.98px) {
  .cg-tray-in { gap: 10px; padding-left: 14px; }
  .cg-tray-count { font-size: 14px; }
  .cg-tray .theme-btn { padding: 10px 14px; font-size: 13px; }
}

/* catalogos com pagina online: selo na capa e botao "Browse online" */
.catalog-card .cover { position: relative; }
.catalog-card .online-badge { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 3px 10px; background: var(--bella-ink); color: #fff; font-family: var(--jost); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.catalog-card .online { display: block; margin: auto 0 8px; padding: 10px 6px; text-align: center; background: var(--bella-rose); border: 1px solid var(--bella-rose); color: var(--bella-ink); font-family: var(--jost); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; transition: all .25s; }
.catalog-card .online:hover { background: var(--bella-ink); border-color: var(--bella-ink); color: #fff; }
.catalog-card .online i { margin-left: 6px; }
.catalog-card.has-online .actions { margin-top: 0; }

/* ==========================================================================
   Acessorios e organizadores (rta-accessories.html)
   ========================================================================== */
.acc-col { margin-bottom: 30px; scroll-margin-top: 140px; }
.acc-card { background: #fff; border: 1px solid var(--bella-line); height: 100%; display: flex; flex-direction: column; transition: box-shadow .4s; }
.acc-card:hover { box-shadow: 0 20px 50px rgba(38,37,44,.1); }
.acc-img { display: flex; gap: 12px; align-items: center; justify-content: center; background: var(--bella-cream-2); padding: 18px; height: 280px; }
.acc-img a { display: flex; align-items: center; justify-content: center; height: 100%; min-width: 0; flex: 1 1 0; }
.acc-img img { max-height: 100%; max-width: 100%; width: auto; height: auto; mix-blend-mode: multiply; transition: transform .35s; }
.acc-img a:hover img { transform: scale(1.03); }
.acc-body { padding: 24px 26px 26px; }
.acc-body h3 { font-size: 22px; line-height: 29px; margin-bottom: 10px; }
.acc-body .spec-list li { font-size: 15px; line-height: 23px; padding: 7px 0 7px 20px; }
.acc-body .spec-list li:before { top: 15px; width: 7px; height: 7px; }
.acc-parts { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--bella-line); }
.acc-parts table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.acc-parts th { width: 1%; white-space: nowrap; padding: 6px 14px 6px 0; vertical-align: top; font-family: var(--jost); font-weight: 700; color: var(--bella-ink); }
.acc-parts td { padding: 6px 0; color: #55545b; }
.acc-parts tr + tr th, .acc-parts tr + tr td { border-top: 1px solid var(--bella-line); }
@media (max-width: 575.98px) { .acc-img { height: 220px; } .acc-body { padding: 20px 18px; } }

/* ==========================================================================
   Parceiros: Jeffrey Alexander, North Cabinetry, MasterTrac
   ========================================================================== */
.fin-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 18px; }
.fin-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; line-height: 18px; color: var(--bella-ink); white-space: nowrap; }
.fin-chips .fin-chip { padding: 4px 10px 4px 5px; border: 1px solid var(--bella-line); background: #fff; }
.fin-chip i { display: inline-block; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(38,37,44,.18); flex-shrink: 0; }
.fin-chips.is-small { margin: 12px 0 0; gap: 6px; }
.fin-chips.is-small .fin-chip { font-size: 12px; padding: 2px 8px 2px 3px; }
.ja-col { padding-top: 50px; margin-top: 50px; border-top: 1px solid var(--bella-line); scroll-margin-top: 130px; }
.ja-col:first-of-type { border-top: 0; margin-top: 10px; padding-top: 0; }
.ja-head { display: grid; grid-template-columns: 45% 1fr; gap: 40px; align-items: start; margin-bottom: 30px; }
.ja-hero { display: block; overflow: hidden; }
.ja-hero img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s; }
.ja-hero:hover img { transform: scale(1.03); }
.ja-badge { display: inline-block; padding: 3px 10px; background: var(--bella-ink); color: #fff; font-family: var(--jost); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ja-badge.is-silver { background: #b9babd; color: var(--bella-ink); }
.ja-intro h2 { font-size: 40px; line-height: 50px; margin: 10px 0 10px; }
.ja-intro p { margin: 0; }
.ja-sizes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ja-size { display: grid; grid-template-columns: 130px 1fr; gap: 16px; align-items: start; background: #fff; border: 1px solid var(--bella-line); padding: 16px; }
.ja-size-img { display: flex; align-items: center; justify-content: center; background: var(--bella-cream-2); aspect-ratio: 1 / 1; padding: 8px; }
.ja-size-img img { max-width: 100%; max-height: 100%; mix-blend-mode: multiply; }
.ja-size h4 { font-size: 18px; line-height: 24px; margin: 2px 0 8px; }
.ja-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 18px; }
.ja-table th { text-align: left; font-family: var(--jost); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6d6c72; padding: 0 8px 6px 0; }
.ja-table td { padding: 7px 8px 7px 0; border-top: 1px solid var(--bella-line); vertical-align: top; color: #55545b; }
.ja-table td strong { display: block; font-family: var(--jost); color: var(--bella-ink); letter-spacing: .02em; }
.ja-table td small { display: block; color: #6d6c72; }
.ja-tops { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; margin-bottom: 10px; }
.ja-top { background: #fff; border: 1px solid var(--bella-line); }
.ja-top a { display: block; background: var(--bella-cream-2); padding: 14px; }
.ja-top img { display: block; width: 100%; height: 110px; object-fit: contain; mix-blend-mode: multiply; }
.ja-top > div { padding: 14px 16px 16px; }
.ja-top h4 { font-size: 18px; line-height: 24px; margin: 8px 0 2px; }
.ja-thick { font-size: 12px; color: #6d6c72; }
.ja-top p { margin: 6px 0 0; font-size: 14px; line-height: 21px; }
.ja-bowl-note { margin: 0; padding: 0 20px 18px; font-size: 14px; color: #55545b; }
.matte-acc img { background: #fff; }
.ja-steps { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1199.98px) { .ja-sizes { grid-template-columns: 1fr; } }
@media (max-width: 991.98px) { .ja-head { grid-template-columns: 1fr; gap: 24px; } .ja-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575.98px) { .ja-size { grid-template-columns: 1fr; } .ja-size-img { max-width: 180px; } .ja-steps { grid-template-columns: 1fr; } .ja-intro h2 { font-size: 30px; line-height: 38px; } }
.north-grid { grid-template-columns: repeat(4, 1fr); }
.north-color img { aspect-ratio: 3 / 5; object-fit: contain; background: var(--bella-cream-2); padding: 10px; box-shadow: none; }
.north-color-img { position: relative; }
.has-zoom { position: relative; cursor: pointer; }
.ja-size-img .swatch-zoom-icon, .ja-top .swatch-zoom-icon { right: 6px; bottom: 6px; width: 30px; height: 30px; }
.north-color { cursor: pointer; }
.north-color small { display: block; font-size: 13px; line-height: 19px; color: #6d6c72; margin-top: 2px; }
.north-color .north-code { color: var(--bella-ink); font-weight: 600; }
@media (max-width: 767.98px) { .north-grid { grid-template-columns: repeat(2, 1fr); } }
.north-cab img { max-height: 520px; width: auto; margin: 0 auto; }
.north-parts { display: flex; gap: 16px; align-items: center; margin-top: 24px; }
.north-parts img { height: 110px; width: auto; max-width: 32%; object-fit: contain; }
.north-notes li { font-size: 15px; line-height: 24px; }
.mt-hero img { aspect-ratio: 3 / 2; object-position: center; }
.mt-photo { margin: 0; overflow: hidden; }
.mt-photo img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.mt-photo.is-wide img { aspect-ratio: 21 / 9; object-position: center 40%; }
.mt-config img { aspect-ratio: 1 / 1; object-fit: cover; }
.mt-config p { margin: 0; padding: 0 20px 20px; font-size: 15px; line-height: 24px; color: #55545b; }
.mt-colors { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.mt-color img, .mt-white { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; box-shadow: 0 10px 22px rgba(38,37,44,.14); }
.mt-white { background: #fbfbf9; box-shadow: 0 10px 22px rgba(38,37,44,.14), inset 0 0 0 1px rgba(38,37,44,.08); }
.mt-color span { display: block; margin-top: 12px; font-family: var(--jost); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bella-ink); }
.mt-color small { display: block; font-size: 13px; color: #6d6c72; }
@media (max-width: 767.98px) { .mt-colors { grid-template-columns: repeat(2, 1fr); } }
.ja-table td strong { white-space: nowrap; font-size: 12px; }

/* ==========================================================================
   Organizacao dos catalogos: pagina central e faixa do fim (quadro do PDF + "Mais catalogos")
   ========================================================================== */
.pdf-box { display: inline-flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 26px; background: var(--bella-cream-2); border: 1px solid var(--bella-line); color: var(--bella-ink); flex-wrap: wrap; }
.pdf-box .pdf-ico { line-height: 0; color: var(--bella-stone); }
.pdf-box .pdf-txt { display: flex; flex-direction: column; line-height: 1.2; margin-right: 6px; }
.pdf-box .pdf-txt strong { font-family: var(--jost); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pdf-box .pdf-txt span { font-size: 13px; color: #6d6c72; }
.pdf-box a { padding: 8px 14px; border: 1px solid var(--bella-ink); color: var(--bella-ink); font-family: var(--jost); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transition: all .25s; }
.pdf-box a.dl { background: var(--bella-ink); color: #fff; }
.pdf-box a:hover { background: var(--bella-rose); border-color: var(--bella-rose); color: var(--bella-ink); }
@media (max-width: 767.98px) { .pdf-box { width: 100%; } .pdf-box .pdf-txt { flex: 1; } }

.hub-card .cover { position: relative; aspect-ratio: 4 / 3; padding: 20px; }
.hub-card .hub-hi { position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; background: var(--bella-ink); color: #fff; font-family: var(--jost); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.hub-card h3 a { color: var(--bella-ink); }
.hub-card h3 a:hover { color: var(--bella-stone); }
.hub-card .hub-desc { font-size: 15px; line-height: 23px; margin: 0 0 18px; }
.hub-card .online { margin-top: auto; }
.hub-pdf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--bella-line); font-size: 13px; color: #6d6c72; }
.hub-pdf span { margin-right: auto; }
.hub-pdf a { color: var(--bella-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hub-pdf a:hover { color: var(--bella-stone); }
.hub-jump a { background: #fff; }

.more-cats { background: #fff; border-top: 1px solid var(--bella-line); padding: 34px 0; }
.more-cats-inner { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.more-cats-label { font-family: var(--jost); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bella-stone); }
.more-cats-links { display: flex; flex-wrap: wrap; gap: 10px; }
.more-cats-links a { padding: 8px 16px; border: 1px solid var(--bella-line); background: var(--bella-cream-2); color: var(--bella-ink); font-size: 14px; font-weight: 500; transition: all .25s; }
.more-cats-links a:hover { background: var(--bella-ink); border-color: var(--bella-ink); color: #fff; }
.more-cats-links a.is-all { background: var(--bella-rose); border-color: var(--bella-rose); font-weight: 600; }
.hub-card .cover { aspect-ratio: auto; height: 250px; display: flex; align-items: center; justify-content: center; }
.hub-card .cover img { width: 100%; height: 100%; object-fit: contain; }
.hub-pdf span { flex-basis: 100%; margin-right: 0; }

/* ==========================================================================
   Mega menu "Catalogs" (3 colunas) — usa o .megamenu do layout base
   ========================================================================== */
.main-menu .navigation > li.has-mega > .megamenu { width: 860px; max-width: calc(100vw - 40px); left: auto; right: 0; padding: 34px 40px 0; }
/* fechado (inclusive durante o fade de saida) nao recebe o mouse; senao reabre ao passar por cima da area invisivel */
.main-menu .navigation > li.has-mega > .megamenu { pointer-events: none; transition: opacity .3s ease, margin-top .3s ease, visibility 0s linear .3s; }
.main-menu .navigation > li.has-mega:hover > .megamenu,
.main-menu .navigation > li.has-mega:focus-within > .megamenu { visibility: visible; opacity: 1; margin-top: 0; pointer-events: auto; transition: opacity .3s ease, margin-top .3s ease, visibility 0s; }
.megamenu .mega-cols { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 0 40px; }
.megamenu .mega-col h4 { margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--bella-line); font-family: var(--jost); font-size: 13px !important; line-height: 18px !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bella-stone) !important; }
.megamenu .mega-col ul { list-style: none; padding: 0; margin: 0; }
.main-menu .navigation > li > .megamenu .mega-col li > a { display: block; padding: 6px 0; line-height: 24px; font-size: 16px; text-transform: none; letter-spacing: 0; }
.main-menu .navigation > li > .megamenu .mega-col li > a:hover,
.main-menu .navigation > li > .megamenu .mega-col li.current > a { padding-left: 10px; color: var(--bella-ink); }
.main-menu .navigation > li > .megamenu .mega-col li > a:before { top: 15px; background: var(--bella-rose); }
.megamenu .mega-foot { display: flex; gap: 10px 26px; flex-wrap: wrap; align-items: center; margin: 24px -40px 0; padding: 16px 40px; background: var(--bella-cream-2); border-top: 1px solid var(--bella-line); }
.main-menu .navigation > li > .megamenu .mega-foot a { padding: 0; font-family: var(--jost); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bella-ink); }
.main-menu .navigation > li > .megamenu .mega-foot a.is-all { padding: 7px 14px; background: var(--bella-rose); }
.main-menu .navigation > li > .megamenu .mega-foot a:hover { color: var(--bella-stone); }
.main-menu .navigation > li > .megamenu .mega-foot a:before { display: none; }

/* celular: o mesmo conteudo vira lista dentro do menu lateral */
.mobile-menu .megamenu { padding: 4px 0 10px; }
.mobile-menu .megamenu .mega-cols { display: block; }
.mobile-menu .megamenu .mega-col h4 { margin: 14px 25px 4px; padding: 0 0 6px; border-color: rgba(255,255,255,.15); color: var(--bella-rose) !important; }
.mobile-menu .megamenu .mega-col li { border-top: 0; }
.mobile-menu .megamenu .mega-col li > a { padding: 7px 25px 7px 45px; font-size: 15px; text-transform: none; }
.mobile-menu .megamenu .mega-foot { display: flex; flex-direction: column; gap: 0; margin-top: 10px; border-top: 1px solid rgba(255,255,255,.1); }
.mobile-menu .megamenu .mega-foot a { display: block; padding: 9px 25px; color: #fff; font-size: 14px; }
.mobile-menu .megamenu .mega-foot a.is-all { color: var(--bella-rose); font-weight: 600; }
.main-menu .navigation > li.has-mega > .megamenu ul { position: static; display: block !important; visibility: inherit !important; opacity: 1 !important; width: auto; margin: 0; padding: 0; border: 0; box-shadow: none; background: none; }

/* lightbox: legenda abaixo da imagem (sem o degrade por cima da foto) */
.fancybox-caption-wrap { padding-top: 0; background: none; }

/* Logo unico (assets/logo-novo.png, vetorizado). Nos fundos grafite (topo da home,
   rodape) usa logo-bella-kitchen-cabinetry-fundo-escuro.svg: mesmo desenho, so o texto
   e as linhas em creme. No cinza (cabecalho fixo, menu mobile) e no branco, o original. */
@media (min-width: 1201px) {
  .main-header:not(.header-style-five) .header-lower .logo-box img { width: 260px; }
}

/* Pagina 404 (error-section do layout base + atalhos) */
.error-section .inner-box .error-code { font-family: var(--jost); font-size: 200px; line-height: 200px; font-weight: 700; margin-bottom: 10px; color: var(--bella-rose); }
.error-section .inner-box h2 { margin-bottom: 40px; }
.error-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }
.error-actions .theme-btn.is-ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--bella-ink); }
.error-links { margin-top: 60px; padding-top: 34px; border-top: 1px solid var(--bella-line); display: flex; flex-direction: column; align-items: center; gap: 16px; }
.error-links .more-cats-links { justify-content: center; }
@media (max-width: 767px) {
  .error-section .inner-box .error-code { font-size: 140px; line-height: 140px; }
  .error-section .inner-box h2 { font-size: 22px; line-height: 32px; }
}
.fancybox-slide--video { overflow: hidden; }
.fancybox-slide--video > video { display: inline-block; vertical-align: middle; margin: 0; padding: 0; width: min(1280px, 92vw, calc(86vh * 16 / 9)); height: auto; background: #000; }

/* Paginas legais (privacy-policy, terms-and-conditions): indice fixo a esquerda + texto */
.legal-section { padding: 110px 0 120px; }
/* o .boxed_wrapper do layout base usa overflow:hidden, que desliga o sticky; clip corta igual sem desligar (so nestas paginas) */
.boxed_wrapper:has(.legal-section) { overflow: clip !important; }
.legal-aside { position: sticky; top: 130px; margin-bottom: 40px; padding-right: 30px; }
.legal-updated { font-size: 15px; margin-bottom: 26px; color: var(--bella-ink); }
.legal-updated span { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--bella-stone); margin-bottom: 2px; }
.legal-toc { border-top: 1px solid var(--bella-line); padding-top: 22px; }
.legal-toc-title { display: block; font-family: var(--title-font); font-weight: 600; color: var(--bella-ink); margin-bottom: 12px; }
.legal-toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.legal-toc li { counter-increment: toc; }
.legal-toc a { display: flex; gap: 10px; padding: 6px 0; font-size: 15px; line-height: 22px; color: var(--text-color); }
.legal-toc a::before { content: counter(toc, decimal-leading-zero); color: var(--bella-stone); font-size: 13px; min-width: 20px; }
.legal-toc a:hover { color: var(--bella-ink); }
.legal-switch { display: inline-block; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--bella-line); font-weight: 500; color: var(--bella-ink); }
.legal-switch:hover { color: var(--bella-stone); }
.legal-content { max-width: 760px; }
.legal-content .legal-lead { font-size: 20px; line-height: 32px; color: var(--bella-ink); margin-bottom: 34px; }
.legal-content h2 { font-size: 28px; line-height: 38px; margin: 54px 0 16px; scroll-margin-top: 120px; }
.legal-content h3 { font-size: 20px; line-height: 30px; margin: 26px 0 10px; }
.legal-content p { margin-bottom: 16px; }
.legal-content ul { list-style: none; padding: 0; margin: 0 0 18px; }
.legal-content ul li { position: relative; padding-left: 22px; margin-bottom: 10px; line-height: 28px; }
.legal-content ul li::before { content: ''; position: absolute; left: 2px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--bella-rose); }
.legal-content strong { color: var(--bella-ink); font-weight: 600; }
.legal-content a:not(.theme-btn) { color: var(--bella-ink); text-decoration: underline; text-decoration-color: var(--bella-rose); text-underline-offset: 3px; }
.legal-summary { background: var(--bella-cream-2); border-left: 3px solid var(--bella-rose); padding: 28px 32px 14px; margin-bottom: 10px; }
.legal-summary h2 { font-size: 22px; line-height: 30px; margin: 0 0 14px; }
.legal-contact { display: flex; flex-wrap: wrap; gap: 10px 60px; background: var(--bella-cream-2); padding: 26px 32px 10px; margin-top: 10px; }
.main-footer .copyright .legal-line { display: block; margin-top: 4px; }
@media (max-width: 991.98px) {
  .legal-section { padding: 70px 0 80px; }
  .legal-aside { position: static; padding-right: 0; }
  .legal-toc ol { columns: 2; column-gap: 30px; }
  .legal-toc li { break-inside: avoid; }
}
@media (max-width: 575.98px) {
  .legal-toc ol { columns: 1; }
  .legal-content .legal-lead { font-size: 18px; line-height: 29px; }
  .legal-content h2 { font-size: 23px; line-height: 32px; margin-top: 42px; }
  .legal-summary, .legal-contact { padding-left: 20px; padding-right: 20px; }
}

/* Contato: destaque para o orcamento completo (free-quote.html) */
.quote-callout { display: flex; align-items: center; gap: 30px; background: var(--bella-ink); padding: 34px 40px; border-left: 4px solid var(--bella-rose); }
.quote-callout-icon { flex: 0 0 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(197, 177, 170, .16); color: var(--bella-rose); }
.quote-callout-text { flex: 1; min-width: 0; }
.quote-callout-tag { display: inline-block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--bella-rose); margin-bottom: 6px; }
.quote-callout h3 { color: #fff; font-size: 26px; line-height: 34px; margin-bottom: 8px; }
.quote-callout p { color: rgba(255, 255, 255, .75); margin: 0; }
.quote-callout .theme-btn.quote-callout-btn { flex: 0 0 auto; background: var(--bella-rose); color: var(--bella-ink) !important; }
.quote-callout .theme-btn.quote-callout-btn:hover { color: var(--bella-ink) !important; }
.quote-callout .theme-btn.quote-callout-btn::before, .quote-callout .theme-btn.quote-callout-btn::after { background: #fff; }
.contact-style-three .form-inner p a { color: var(--bella-ink); text-decoration: underline; text-decoration-color: var(--bella-rose); text-underline-offset: 3px; }
@media (max-width: 991.98px) {
  .quote-callout { flex-wrap: wrap; padding: 28px 24px; gap: 18px 22px; }
  .quote-callout-icon { flex-basis: 60px; height: 60px; }
  .quote-callout-text { flex-basis: calc(100% - 90px); }
  .quote-callout .theme-btn.quote-callout-btn { width: 100%; text-align: center; }
}
@media (max-width: 575.98px) {
  .quote-callout-icon { display: none; }
  .quote-callout-text { flex-basis: 100%; }
  .quote-callout h3 { font-size: 22px; line-height: 30px; }
}

/* --------------------------------------------------------------------------
   MasterTrac: faixa do designer 3D online (17squares)
   -------------------------------------------------------------------------- */
.mt-3d-cta { display: flex; align-items: center; gap: 22px 28px; margin-top: 60px; padding: 26px 30px; background: var(--bella-cream-2); border-left: 4px solid var(--bella-rose); }
.mt-3d-icon { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--bella-ink); color: var(--bella-rose); }
.mt-3d-text { flex: 1 1 auto; min-width: 0; }
.mt-3d-text h3 { margin: 0 0 4px; font-size: 22px; line-height: 30px; }
.mt-3d-text p { margin: 0; font-size: 15px; line-height: 24px; color: #55545b; }
.mt-3d-actions { flex: none; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mt-3d-send { font-size: 14px; font-weight: 500; color: var(--bella-ink); text-decoration: underline; text-underline-offset: 3px; }
.mt-3d-send:hover { color: var(--bella-ink); text-decoration-color: var(--bella-rose); }
@media (max-width: 767.98px) {
  .mt-3d-cta { flex-wrap: wrap; align-items: flex-start; margin-top: 40px; padding: 22px 20px; }
  .mt-3d-icon { width: 48px; height: 48px; }
  .mt-3d-text h3 { font-size: 20px; line-height: 27px; }
  .mt-3d-text { flex-basis: calc(100% - 76px); }
  .mt-3d-actions { width: 100%; align-items: flex-start; }
}