:root {
  --rag-white: #f7fafc;
  --rag-paper: #ffffff;
  --rag-paper-soft: #eef5f7;
  --rag-ink: #071f2b;
  --rag-muted: #516976;
  --rag-line: rgba(7, 31, 43, 0.12);
  --rag-green: #12c85b;
  --rag-green-dark: #087a38;
  --rag-cyan: #0788a4;
  --rag-shadow: 0 18px 46px rgba(7, 31, 43, 0.10);
}

.theme-toggle {
  align-items: center;
  background: #ffffff;
  border: 1px solid rgba(7, 31, 43, 0.14);
  border-radius: 50%;
  box-shadow: 0 18px 36px rgba(7, 31, 43, 0.16);
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font-size: 34px;
  font-weight: 800;
  height: 86px;
  justify-content: center;
  min-width: 0;
  padding: 0;
  position: static;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  vertical-align: middle;
  width: 86px;
}

.theme-toggle:hover {
  background: #f6fbf8;
  border-color: rgba(18, 200, 91, 0.45);
  transform: translateY(-2px);
}

.theme-toggle i {
  color: var(--rag-green-dark);
}

.theme-toggle--floating {
  bottom: 142px;
  position: fixed;
  right: 40px;
  z-index: 100;
  backdrop-filter: blur(18px);
}

html[data-theme="dark"] .theme-toggle {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.18);
}

html[data-theme="dark"] .theme-toggle i {
  color: #f8d866;
}

html:not([data-theme="dark"]) body {
  background: var(--rag-white) !important;
  color: var(--rag-ink);
}

html:not([data-theme="dark"]) body *,
html:not([data-theme="dark"]) body *:before,
html:not([data-theme="dark"]) body *:after {
  box-sizing: border-box;
}

html:not([data-theme="dark"]) body .top-header-area,
html:not([data-theme="dark"]) body .sticky-wrapper.is-sticky .top-header-area {
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom: 1px solid var(--rag-line);
  box-shadow: 0 12px 30px rgba(7, 31, 43, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

html:not([data-theme="dark"]) body .main-menu ul li a {
  color: var(--rag-ink) !important;
  line-height: 1.2;
}

html:not([data-theme="dark"]) body .theme-toggle {
  background: #ffffff;
  border-color: rgba(7, 31, 43, 0.15);
  color: var(--rag-ink);
}

html:not([data-theme="dark"]) body .theme-toggle:hover {
  background: #f6fbf8;
  border-color: rgba(18, 200, 91, 0.36);
}

html:not([data-theme="dark"]) body .main-menu ul li.current-list-item > a,
html:not([data-theme="dark"]) body .main-menu ul li a:hover {
  color: var(--rag-green-dark) !important;
}

html:not([data-theme="dark"]) body .site-logo img,
html:not([data-theme="dark"]) body .footer-brand-logo img {
  filter: brightness(0) saturate(100%);
  opacity: 1;
}

html:not([data-theme="dark"]) body .main-menu ul ul.sub-menu {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid var(--rag-line);
  box-shadow: var(--rag-shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

html:not([data-theme="dark"]) body.home-refined .homepage-slider,
html:not([data-theme="dark"]) body.home-refined .single-homepage-slider {
  background-color: #f8fbfd !important;
}

html:not([data-theme="dark"]) body.home-refined .single-homepage-slider {
  background-blend-mode: normal;
}

html:not([data-theme="dark"]) body.home-refined .single-homepage-slider:after {
  background:
    radial-gradient(circle at 74% 20%, rgba(18, 200, 91, 0.12), transparent 34%),
    radial-gradient(circle at 16% 78%, rgba(7, 136, 164, 0.10), transparent 36%),
    linear-gradient(110deg, rgba(255, 255, 255, 0.66) 0%, rgba(246, 250, 252, 0.50) 44%, rgba(7, 31, 43, 0.16) 100%) !important;
  opacity: 1 !important;
}

html:not([data-theme="dark"]) body.home-refined .hero-text h1,
html:not([data-theme="dark"]) body.home-refined .hero-text h2 {
  color: var(--rag-ink) !important;
  text-shadow:
    0 2px 0 rgba(255, 255, 255, 0.82),
    0 18px 42px rgba(7, 31, 43, 0.18);
}

html:not([data-theme="dark"]) body.home-refined .hero-text p,
html:not([data-theme="dark"]) body.home-refined .hero-text .subtitle {
  color: var(--rag-ink) !important;
  text-shadow: none;
  font-weight: 800;
  text-transform: uppercase;
}

html:not([data-theme="dark"]) body.home-refined .owl-prev,
html:not([data-theme="dark"]) body.home-refined .owl-next {
  align-items: center;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(7, 31, 43, 0.12);
  border-radius: 50%;
  box-shadow: 0 18px 42px rgba(7, 31, 43, 0.12);
  color: var(--rag-ink) !important;
  display: inline-flex;
  height: 66px;
  justify-content: center;
  margin-top: -33px;
  width: 66px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

html:not([data-theme="dark"]) body.home-refined .owl-prev:hover,
html:not([data-theme="dark"]) body.home-refined .owl-next:hover {
  background: var(--rag-green);
  border-color: var(--rag-green);
  color: #042414 !important;
}

html:not([data-theme="dark"]) body .breadcrumb-section {
  background:
    linear-gradient(135deg, rgba(247, 250, 252, 0.94), rgba(229, 244, 248, 0.90)),
    url("../img/breadcrumb-bg.jpg") center/cover !important;
  min-height: 320px;
}

html:not([data-theme="dark"]) body .breadcrumb-section:before,
html:not([data-theme="dark"]) body .breadcrumb-section:after {
  opacity: 0.22;
}

html:not([data-theme="dark"]) body .breadcrumb-text h1,
html:not([data-theme="dark"]) body .breadcrumb-text h2,
html:not([data-theme="dark"]) body .section-title h3,
html:not([data-theme="dark"]) body .single-product-content h3,
html:not([data-theme="dark"]) body .single-product-item h3,
html:not([data-theme="dark"]) body .news-text-box h3,
html:not([data-theme="dark"]) body .list-box h3,
html:not([data-theme="dark"]) body .list-box h5,
html:not([data-theme="dark"]) body .contact-page h2,
html:not([data-theme="dark"]) body .contact-page h4 {
  color: var(--rag-ink) !important;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

html:not([data-theme="dark"]) body .breadcrumb-text p,
html:not([data-theme="dark"]) body .orange-text,
html:not([data-theme="dark"]) body .accent-text {
  color: var(--rag-green-dark) !important;
}

html:not([data-theme="dark"]) body .breadcrumb-text ul {
  align-items: center;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid var(--rag-line);
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(7, 31, 43, 0.08);
  display: inline-flex;
  gap: 10px;
  list-style: none;
  margin: 15px 0 0;
  max-width: 100%;
  padding: 8px 15px;
  white-space: normal;
}

html:not([data-theme="dark"]) body .breadcrumb-text ul li {
  color: var(--rag-muted) !important;
  list-style: none;
  margin: 0;
}

html:not([data-theme="dark"]) body .breadcrumb-text ul li:before {
  display: none !important;
}

html:not([data-theme="dark"]) body .breadcrumb-text ul li + li:before {
  color: rgba(7, 31, 43, 0.32);
  content: "/";
  display: inline-block !important;
  margin-right: 10px;
}

html:not([data-theme="dark"]) body .breadcrumb-text a {
  color: var(--rag-green-dark) !important;
}

html:not([data-theme="dark"]) body .list-section,
html:not([data-theme="dark"]) body .latest-news,
html:not([data-theme="dark"]) body .store-page,
html:not([data-theme="dark"]) body .service-page,
html:not([data-theme="dark"]) body .single-product,
html:not([data-theme="dark"]) body .more-products,
html:not([data-theme="dark"]) body .contact-page,
html:not([data-theme="dark"]) body .shop-banner,
html:not([data-theme="dark"]) body .abt-section {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(238, 245, 247, 0.96)) !important;
  color: var(--rag-ink);
}

html:not([data-theme="dark"]) body .section-title p,
html:not([data-theme="dark"]) body .single-product-content p,
html:not([data-theme="dark"]) body .single-product-item p,
html:not([data-theme="dark"]) body .news-text-box p,
html:not([data-theme="dark"]) body .list-box p,
html:not([data-theme="dark"]) body .store-card__body p,
html:not([data-theme="dark"]) body .service-card p,
html:not([data-theme="dark"]) body .contact-page p,
html:not([data-theme="dark"]) body .abt-text p,
html:not([data-theme="dark"]) body .client-meta h3 span,
html:not([data-theme="dark"]) body p.testimonial-body {
  color: var(--rag-muted) !important;
  overflow-wrap: anywhere;
}

html:not([data-theme="dark"]) body .store-controls,
html:not([data-theme="dark"]) body .service-page .row.align-items-center,
html:not([data-theme="dark"]) body .store-card,
html:not([data-theme="dark"]) body .service-card,
html:not([data-theme="dark"]) body .single-product-content,
html:not([data-theme="dark"]) body .single-product-item,
html:not([data-theme="dark"]) body .single-latest-news,
html:not([data-theme="dark"]) body .single-testimonial-slider,
html:not([data-theme="dark"]) body .list-box,
html:not([data-theme="dark"]) body .contact-form-wrap {
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid var(--rag-line) !important;
  box-shadow: var(--rag-shadow) !important;
  color: var(--rag-ink) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  min-width: 0;
}

html:not([data-theme="dark"]) body .store-card:hover,
html:not([data-theme="dark"]) body .service-card:hover,
html:not([data-theme="dark"]) body .single-product-item:hover,
html:not([data-theme="dark"]) body .list-box:hover {
  border-color: rgba(18, 200, 91, 0.34) !important;
  box-shadow: 0 22px 56px rgba(7, 31, 43, 0.14) !important;
}

html:not([data-theme="dark"]) body .store-card-icon {
  background: linear-gradient(135deg, rgba(18, 200, 91, 0.10), rgba(7, 136, 164, 0.10)) !important;
  color: var(--rag-green-dark) !important;
}

html:not([data-theme="dark"]) body .store-search .form-control,
html:not([data-theme="dark"]) body #loja-sort,
html:not([data-theme="dark"]) body #service-sort,
html:not([data-theme="dark"]) body .contact-form-wrap input,
html:not([data-theme="dark"]) body .contact-form-wrap textarea,
html:not([data-theme="dark"]) body .contact-form-wrap select {
  background: #ffffff !important;
  border: 1px solid rgba(7, 31, 43, 0.16) !important;
  color: var(--rag-ink) !important;
  min-height: 48px;
  width: 100%;
}

html:not([data-theme="dark"]) body input::placeholder,
html:not([data-theme="dark"]) body textarea::placeholder {
  color: #718893 !important;
}

html:not([data-theme="dark"]) body .store-chip,
html:not([data-theme="dark"]) body .service-chip,
html:not([data-theme="dark"]) body .store-card__tag,
html:not([data-theme="dark"]) body .service-card .tag {
  background: #ffffff !important;
  border: 1px solid rgba(7, 31, 43, 0.14) !important;
  color: var(--rag-ink) !important;
  line-height: 1.25;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
  white-space: normal;
}

html:not([data-theme="dark"]) body .store-chip.is-active,
html:not([data-theme="dark"]) body .store-chip:hover,
html:not([data-theme="dark"]) body .service-chip.is-active,
html:not([data-theme="dark"]) body .service-chip:hover {
  background: var(--rag-green) !important;
  border-color: var(--rag-green) !important;
  color: #042414 !important;
}

html:not([data-theme="dark"]) body .store-card__body h3 a,
html:not([data-theme="dark"]) body .service-card h3 a,
html:not([data-theme="dark"]) body .news-text-box h3 a,
html:not([data-theme="dark"]) body .read-more-btn {
  color: var(--rag-ink) !important;
}

html:not([data-theme="dark"]) body .client-meta h3,
html:not([data-theme="dark"]) body .abt-text h2,
html:not([data-theme="dark"]) body .shop-banner h3 {
  color: var(--rag-ink) !important;
}

html:not([data-theme="dark"]) body .abt-text p.top-sub {
  color: var(--rag-green-dark) !important;
}

html:not([data-theme="dark"]) body .ragnatela-banner,
html:not([data-theme="dark"]) body .shop-banner {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(226, 243, 248, 0.88)),
    url("../img/1.webp") center/cover !important;
}

html:not([data-theme="dark"]) body .ragnatela-testimonial-section {
  background:
    linear-gradient(180deg, #f8fbfd 0, #edf5f8 100%) !important;
}

html:not([data-theme="dark"]) body .single-testimonial-slider .last-icon i {
  color: rgba(7, 31, 43, 0.22) !important;
}

html:not([data-theme="dark"]) body .boxed-btn,
html:not([data-theme="dark"]) body .cart-btn,
html:not([data-theme="dark"]) body button[type="submit"] {
  background: var(--rag-green) !important;
  border-color: var(--rag-green) !important;
  color: #042414 !important;
  font-weight: 800;
}

html:not([data-theme="dark"]) body .site-search__button,
html:not([data-theme="dark"]) body .site-search-panel__form button {
  color: #ffffff !important;
}

html:not([data-theme="dark"]) body .site-search__button i,
html:not([data-theme="dark"]) body .site-search-panel__form button i {
  color: #ffffff !important;
}

html:not([data-theme="dark"]) body .logo-carousel-section {
  background: var(--rag-paper-soft) !important;
}

html:not([data-theme="dark"]) body .ragnatela-clientes .single-logo-item,
html:not([data-theme="dark"]) body .logo-carousel-section .single-logo-item {
  align-items: center;
  /* fundo escuro do cartao REMOVIDO em 15/08/2026: o cartao claro passou a ser o padrao
     (bloco canonico mais abaixo). Esta regra tinha especificidade maior e vencia a nova,
     deixando TODAS as logos em cartao preto — inclusive as de letra escura. */
  border: 1px solid rgba(7, 31, 43, 0.12);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(7, 31, 43, 0.12);
  display: flex;
  height: 132px;
  justify-content: center;
  margin: 0;
  padding: 22px 24px;
}

html:not([data-theme="dark"]) body .ragnatela-clientes .single-logo-item.logo-card--light,
html:not([data-theme="dark"]) body .logo-carousel-section .single-logo-item.logo-card--light {
  background: #f7fafb !important;
  border-color: rgba(7, 31, 43, 0.16);
}

html:not([data-theme="dark"]) body .ragnatela-clientes .single-logo-item img,
html:not([data-theme="dark"]) body .logo-carousel-section .single-logo-item img {
  filter: none !important;
  height: auto !important;
  max-height: 72px !important;
  max-width: min(160px, 100%) !important;
  object-fit: contain;
  opacity: 1;
  width: auto !important;
}

html:not([data-theme="dark"]) body.home-refined .logo-carousel-inner .owl-nav .owl-prev,
html:not([data-theme="dark"]) body.home-refined .logo-carousel-inner .owl-nav .owl-next {
  background: var(--rag-green);
  border: 0;
  color: #031016 !important;
  height: 44px;
  margin: 0;
  width: 44px;
}

html:not([data-theme="dark"]) body.home-refined .logo-carousel-inner .owl-nav .owl-prev:hover,
html:not([data-theme="dark"]) body.home-refined .logo-carousel-inner .owl-nav .owl-next:hover {
  background: #ffffff;
  color: #031016 !important;
}

html:not([data-theme="dark"]) body .footer-area {
  background: #e9f1f4 !important;
}

html:not([data-theme="dark"]) body .footer-area,
html:not([data-theme="dark"]) body .footer-area p,
html:not([data-theme="dark"]) body .footer-area a,
html:not([data-theme="dark"]) body .footer-area li,
html:not([data-theme="dark"]) body .footer-area span {
  color: #294552 !important;
}

html:not([data-theme="dark"]) body .footer-area .widget-title {
  color: var(--rag-ink) !important;
}

html:not([data-theme="dark"]) body .copyright {
  background: #dde9ee !important;
  color: #294552 !important;
}

html:not([data-theme="dark"]) body .footer-social-buttons a,
html:not([data-theme="dark"]) body .whatsapp-float {
  background: var(--rag-green) !important;
  color: #042414 !important;
}

html:not([data-theme="dark"]) body .profile-name {
  color: var(--rag-ink) !important;
}

html:not([data-theme="dark"]) body .profile-desc {
  color: var(--rag-green-dark) !important;
}

html:not([data-theme="dark"]) body .link {
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(7, 31, 43, 0.12);
  box-shadow: var(--rag-shadow);
  color: var(--rag-ink) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

html:not([data-theme="dark"]) body .link:hover {
  background: var(--rag-green) !important;
  color: #042414 !important;
}

html[data-theme="dark"] body {
  background: #03151f;
}

html[data-theme="dark"] body .seo-commercial-section {
  background:
    radial-gradient(circle at 76% 26%, rgba(18, 200, 91, 0.12), transparent 30%),
    radial-gradient(circle at 14% 84%, rgba(7, 136, 164, 0.10), transparent 34%),
    linear-gradient(180deg, #03151f 0%, #020f16 100%) !important;
  color: #d8edf2;
}

html[data-theme="dark"] body .seo-commercial-copy .top-sub {
  color: #22cf43 !important;
}

html[data-theme="dark"] body .seo-commercial-copy h2 {
  color: #ffffff !important;
}

html[data-theme="dark"] body .seo-commercial-copy p {
  color: #abc4cc !important;
}

html[data-theme="dark"] body .seo-service-tags span {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
  color: #eef9f2 !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

html[data-theme="dark"] body.home-refined .hero-text p.subtitle {
  color: #e2f6df !important;
  text-shadow: 0 2px 0 rgba(3, 12, 17, 0.4);
}

body.home-refined .single-homepage-slider.hero-gradient-dark:after,
html[data-theme="dark"] body.home-refined .single-homepage-slider.hero-gradient-auto:after {
  background:
    radial-gradient(circle at 68% 18%, rgba(16, 230, 80, 0.16), transparent 34%),
    linear-gradient(110deg, rgba(3, 12, 17, 0.84) 0%, rgba(5, 25, 34, 0.70) 46%, rgba(3, 12, 17, 0.78) 100%) !important;
  opacity: 1 !important;
}

body.home-refined .single-homepage-slider.hero-gradient-light:after,
html:not([data-theme="dark"]) body.home-refined .single-homepage-slider.hero-gradient-auto:after {
  background:
    radial-gradient(circle at 74% 20%, rgba(18, 200, 91, 0.12), transparent 34%),
    radial-gradient(circle at 16% 78%, rgba(7, 136, 164, 0.10), transparent 36%),
    linear-gradient(110deg, rgba(255, 255, 255, 0.70) 0%, rgba(246, 250, 252, 0.52) 44%, rgba(7, 31, 43, 0.18) 100%) !important;
  opacity: 1 !important;
}

body.home-refined .single-homepage-slider.hero-gradient-light .hero-text h1,
body.home-refined .single-homepage-slider.hero-gradient-light .hero-text h2,
html:not([data-theme="dark"]) body.home-refined .single-homepage-slider.hero-gradient-auto .hero-text h1,
html:not([data-theme="dark"]) body.home-refined .single-homepage-slider.hero-gradient-auto .hero-text h2 {
  color: var(--rag-ink) !important;
  text-shadow:
    0 2px 0 rgba(255, 255, 255, 0.82),
    0 18px 42px rgba(7, 31, 43, 0.18);
}

body.home-refined .single-homepage-slider.hero-gradient-light .hero-text p,
body.home-refined .single-homepage-slider.hero-gradient-light .hero-description,
html:not([data-theme="dark"]) body.home-refined .single-homepage-slider.hero-gradient-auto .hero-text p,
html:not([data-theme="dark"]) body.home-refined .single-homepage-slider.hero-gradient-auto .hero-description {
  color: var(--rag-ink) !important;
  text-shadow: none;
}

body.home-refined .single-homepage-slider.hero-gradient-light .hero-text .subtitle,
html:not([data-theme="dark"]) body.home-refined .single-homepage-slider.hero-gradient-auto .hero-text .subtitle {
  color: var(--rag-ink) !important;
  font-weight: 800;
  text-shadow: none;
}

body.home-refined .single-homepage-slider.hero-gradient-dark .hero-text h1,
body.home-refined .single-homepage-slider.hero-gradient-dark .hero-text h2,
html[data-theme="dark"] body.home-refined .single-homepage-slider.hero-gradient-auto .hero-text h1,
html[data-theme="dark"] body.home-refined .single-homepage-slider.hero-gradient-auto .hero-text h2 {
  color: #ffffff !important;
  text-shadow: 0 18px 42px rgba(0, 0, 0, 0.35);
}

body.home-refined .single-homepage-slider.hero-gradient-dark .hero-description,
html[data-theme="dark"] body.home-refined .single-homepage-slider.hero-gradient-auto .hero-description {
  color: rgba(255, 255, 255, 0.9) !important;
}

@media (max-width: 1199px) {
  .theme-toggle {
    font-size: 27px;
    height: 66px;
    width: 66px;
  }

  .theme-toggle--floating {
    bottom: 100px;
    right: 22px;
  }

  html:not([data-theme="dark"]) body .mean-container .mean-bar {
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom: 1px solid var(--rag-line);
    box-shadow: 0 12px 30px rgba(7, 31, 43, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  html:not([data-theme="dark"]) body .mean-container a.meanmenu-reveal {
    color: var(--rag-ink) !important;
  }

  html:not([data-theme="dark"]) body .mean-container a.meanmenu-reveal span {
    background: var(--rag-ink) !important;
  }

  html:not([data-theme="dark"]) body .mean-container .mean-nav {
    background: rgba(255, 255, 255, 0.98) !important;
  }

  html:not([data-theme="dark"]) body .mean-container .mean-nav ul li a {
    border-color: rgba(7, 31, 43, 0.10) !important;
    color: var(--rag-ink) !important;
    line-height: 1.35;
    white-space: normal;
  }
}

@media (max-width: 575px) {
  .theme-toggle {
    font-size: 24px;
    height: 56px;
    width: 56px;
  }

  .theme-toggle--floating {
    bottom: 84px;
    right: 16px;
  }

  html:not([data-theme="dark"]) body.home-refined .single-homepage-slider:after {
    background:
      radial-gradient(circle at 80% 12%, rgba(18, 200, 91, 0.14), transparent 34%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(238, 246, 249, 0.48)) !important;
  }

  html:not([data-theme="dark"]) body.home-refined .owl-prev,
  html:not([data-theme="dark"]) body.home-refined .owl-next {
    height: 50px;
    margin-top: -25px;
    width: 50px;
  }

  html:not([data-theme="dark"]) body .breadcrumb-section {
    min-height: 260px;
  }

  html:not([data-theme="dark"]) body .breadcrumb-text h1 {
    font-size: 2.15rem !important;
    line-height: 1.1;
  }

  html:not([data-theme="dark"]) body .store-controls,
  html:not([data-theme="dark"]) body .service-page .row.align-items-center {
    padding: 14px !important;
  }
}


/* ===========================================================================
   CARTAO CLARO NAS FAIXAS DE MARCAS — NOC 14/08/2026 (ordem do dono)
   O cartao era #071f2b (azul quase preto) porque varias logos eram versoes
   BRANCAS sobre transparente. Trocamos as artes pelas versoes padrao (colorida
   ou escura) de cada marca, entao o cartao pode ser branco — e branco e o
   padrao da industria para faixa de marcas: preserva a cor de cada logo e
   dispensa manter duas artes por marca.
   Vale nos DOIS temas de proposito; no escuro, a borda sutil evita que o
   cartao se dissolva no fundo.
   =========================================================================== */
.logo-carousel-section .single-logo-item,
html[data-theme="dark"] .logo-carousel-section .single-logo-item,
body.dark-theme .logo-carousel-section .single-logo-item {
    background: #ffffff !important;
    border: 1px solid rgba(5, 85, 8, .12) !important;
    border-radius: 10px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
}
html[data-theme="dark"] .logo-carousel-section .single-logo-item,
body.dark-theme .logo-carousel-section .single-logo-item {
    border-color: rgba(255, 255, 255, .18) !important;
}
.logo-carousel-section .single-logo-item img {
    max-width: 100%;
    height: auto;
    max-height: 72px;
    width: auto;
    object-fit: contain;
    filter: none !important;   /* nenhuma marca de terceiro e alterada por CSS */
    mix-blend-mode: normal !important;
}
/* o tema escuro invertia/clareava logo — nunca em marca de terceiro */
html[data-theme="dark"] .logo-carousel-section .single-logo-item img,
body.dark-theme .logo-carousel-section .single-logo-item img {
    filter: none !important;
}
.logo-carousel-section .logo-item-name { display: none; }
@media (max-width: 767px) {
    .logo-carousel-section .single-logo-item { min-height: 76px; padding: 10px 12px; }
    .logo-carousel-section .single-logo-item img { max-height: 56px; }
}


/* EXCECAO logo-card--force-dark — NOC 15/08/2026.
   Cartao escuro APENAS para marca cuja unica arte oficial e branca sobre transparente
   (hoje: Grupo GM Solucoes). Some assim que o cliente enviar a versao para fundo claro.
   Vem depois da regra do cartao branco de proposito, para venc.e-la. */
.logo-carousel-section .single-logo-item.logo-card--force-dark,
html[data-theme="dark"] .logo-carousel-section .single-logo-item.logo-card--force-dark,
body.dark-theme .logo-carousel-section .single-logo-item.logo-card--force-dark {
    /* fundo escuro do cartao REMOVIDO em 15/08/2026: o cartao claro passou a ser o padrao
     (bloco canonico mais abaixo). Esta regra tinha especificidade maior e vencia a nova,
     deixando TODAS as logos em cartao preto — inclusive as de letra escura. */
    border-color: rgba(255,255,255,.18) !important;
}


/* ALTURA IGUAL nos cartoes de avaliacao — NOC 15/08/2026, CORRIGIDO 07:10.
   ⚠️ A primeira versao deste bloco punha `display:flex` no `.owl-stage`. Isso QUEBROU o
   carrossel no celular: o owl calcula a largura de cada `.owl-item` por style inline, e o
   flex ignorava essa largura — os 5 cartoes mais os clones do `loop` se espremiam na mesma
   linha, cada um com ~55px, o texto quebrava letra a letra e o palco ficava com quase mil
   pixels de altura. Como o `.owl-stage-outer` estava com `overflow: visible`, essa altura
   vazava como um vao branco enorme entre o carrossel e o botao "ver todas no Google".
   Foi o que o dono fotografou.
   A correcao NAO mexe no palco: quem estica o cartao e o proprio cartao. */
.google-reviews-slider .owl-stage-outer {
    overflow: hidden !important;   /* recorta o transbordo; as setas ficam FORA do stage */
    height: auto !important;       /* anula qualquer altura inline que o owl deixe para tras */
}
.google-reviews-slider .owl-item { height: auto; }
.google-reviews-slider .google-review-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 210px;
}
.google-reviews-slider .google-review-card p { flex: 1 1 auto; }
@media (max-width: 575px) {
    .google-reviews-slider .google-review-card { min-height: 190px; }
}



/* CLARO E O PADRAO — NOC 15/08/2026.
   O tema trazia `#071f2b !important` como fundo padrao do cartao, e o claro so entrava se o
   JS aplicasse `logo-card--light` depois de ANALISAR OS PIXELS da imagem. Quando a analise
   falhava (CORS, canvas, imagem ainda nao carregada, erro de JS), o cartao ficava escuro —
   foi o que fez a ECONOVA, um PNG transparente de letras verde-escuras, aparecer com "fundo
   preto". Agora a decisao e do CSS e e fixa: claro sempre, escuro so com classe escrita no
   HTML. Nao depende de JS nenhum. */
.logo-carousel-section .single-logo-item,
.logo-carousel-section .single-logo-item.logo-card--light,
html[data-theme="dark"] .logo-carousel-section .single-logo-item,
body.dark-theme .logo-carousel-section .single-logo-item {
    background: #ffffff !important;
}
.logo-carousel-section .single-logo-item.logo-card--force-dark,
html[data-theme="dark"] .logo-carousel-section .single-logo-item.logo-card--force-dark {
    /* fundo escuro do cartao REMOVIDO em 15/08/2026: o cartao claro passou a ser o padrao
     (bloco canonico mais abaixo). Esta regra tinha especificidade maior e vencia a nova,
     deixando TODAS as logos em cartao preto — inclusive as de letra escura. */
}

/* ============================================================================
   15/08/2026 — ARRASTAR O CARROSSEL ARRASTAVA A PAGINA INTEIRA
   Sintoma (celular): deslizar para o lado levava o site todo junto e o layout
   quebrava. Causa: o palco do owl e mais largo que a tela e nada continha o
   transbordo, entao o gesto horizontal virava rolagem da PAGINA. A correcao e
   conter no container e declarar que o dedo so rola na vertical — o horizontal
   e do carrossel. O overflow-x no body e rede de seguranca, nao a solucao.
   ========================================================================== */
.logo-carousel-section,
.google-reviews-section { max-width: 100%; overflow-x: clip; }
.logo-carousel-inner,
.google-reviews-slider { max-width: 100%; overflow: hidden; touch-action: pan-y; }
.logo-carousel-inner .owl-stage-outer,
.google-reviews-slider .owl-stage-outer { overflow: hidden; }
html, body { max-width: 100%; overflow-x: hidden; }


/* ============================================================================
   ACESSIBILIDADE 15/08/2026 — itens que o Lighthouse reprovava, um a um.
   ========================================================================== */

/* CONTRASTE. O rodape usava #7... sobre fundo escuro e media 3,24:1 — abaixo do
   minimo de 4,5:1 da WCAG AA. Nao e detalhe: e a linha cadastral da empresa e os
   links de termos e privacidade, justamente o que precisa ser legivel. */
/* ⚠️ CORRIGIDO 07:40 — a primeira versao punha #e8f0ee supondo rodape ESCURO. O rodape e
   CLARO (#dde9ee): texto claro sobre fundo claro deu 1,06:1, PIOR que o 3,24 original.
   Erro meu, e a licao vale: cor de contraste se escolhe MEDINDO o fundo real, nao supondo. */
.copyright p,
.ragnatela-footer-bottom p,
.footer-legal-links a { color: #1d3b3f !important; }
.footer-legal-links a:hover { color: #055508 !important; }

/* ALVO DE TOQUE. Os pontinhos do carrossel de logos tinham 8x8 px; o minimo
   utilizavel e 24x24 (WCAG 2.2) e o recomendado 44x44. Crescemos a AREA DE
   TOQUE sem crescer o ponto visivel, com padding e fundo transparente. */
.logo-slider-dot,
.owl-dot {
    position: relative;
    min-width: 24px;
    min-height: 24px;
    padding: 8px;
    background: transparent;
    border: 0;
}
.logo-slider-dot::after,
.owl-dot::after {
    content: "";
    position: absolute;
    inset: -6px;            /* estende a area clicavel para 36x36 sem mudar o desenho */
}
.logo-slider-controls { display: flex; gap: 6px; align-items: center; justify-content: center; }

/* FOCO VISIVEL em tudo que recebe teclado — sem isto quem navega por Tab se perde. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid #2CC54E;
    outline-offset: 2px;
    border-radius: 4px;
}


/* CONTRASTE 15/08 (segunda volta) — medido pelo Lighthouse, um a um.
   Verde claro sobre fundo quase branco e bonito e ilegivel: sao os tons que
   reprovavam com 2,91 a 4,22:1, abaixo do minimo de 4,5:1 da WCAG AA.
   Trocados pelo verde PRIMARIO da marca (#055508), que passa folgado, e por um
   cinza de texto de verdade. A identidade nao muda: e o mesmo verde da logo. */
.seo-commercial-copy p.top-sub,
.top-sub { color: #055508 !important; }
.service-eyebrow { color: #044406 !important; }
.google-reviews-heading p { color: #3d5052 !important; }
#google-reviews-summary span,
.google-reviews-summary span { color: #3d5052 !important; }


/* ULTIMOS CONTRASTES — 15/08/2026, medidos um a um pelo Lighthouse.
   Dois destes eram meus: o aviso de titularidade da faixa de marcas (opacity .75 sobre
   fundo claro = 1,08:1) e o texto que substituiu o mapa na pagina de contato (branco sobre
   branco = 1,05:1). Opacidade e um jeito facil de criar texto ilegivel sem perceber. */
.marcas-aviso {
    color: #3d5052 !important;
    opacity: 1 !important;      /* a opacidade era o problema, nao a cor */
}
.ragnatela-contact__local { color: #1d3b3f !important; }
.ragnatela-contact__local strong { color: #055508 !important; }
.ragnatela-contact__eyebrow { color: #055508 !important; }
.google-review-card__top small,
.single-product-content small,
small { color: #4a5c5e; }
/* o verde #12984b nao passa em AA sobre branco (3,7:1). O primario da marca passa. */
a[href^="https://wa.me/"], .ragnatela-contact__item a { color: #055508 !important; }


/* LISTAGEM DE NOTICIAS — contraste medido: etiqueta branca sobre verde #12984b dava 3,73:1,
   a data 3,94:1 e o link 4,17:1. Todos abaixo de 4,5:1. O verde primario da marca resolve
   os tres sem mudar a identidade — e a etiqueta fica com o mesmo verde da logo. */
.news-tag { background: #055508 !important; color: #ffffff !important; }
.news-date { color: #4a5c5e !important; }
.news-link { color: #055508 !important; }
.news-link:hover { color: #044406 !important; }


/* PILHA DE FONTES com fallback de metricas — NOC 15/08/2026.
   As familias "Open Sans Fallback" e "Poppins Fallback" (declaradas em
   assets/fonts/fontes.css) so servem para alguma coisa se estiverem NA PILHA. Sem isto o
   navegador usa a fonte do sistema durante o swap, com metricas diferentes, e o conteudo
   pula quando a fonte real chega — foi o CLS de 0,339 da home. */
body, p, li, td, th, input, textarea, select, button, .btn, a {
    font-family: "Open Sans", "Open Sans Fallback", Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6, .section-title h3, .hero-text h2 {
    font-family: "Poppins", "Poppins Fallback", "Open Sans", Arial, Helvetica, sans-serif;
}


/* ALVO DE TOQUE nos links de lista do rodape — NOC 15/08/2026.
   Mediam 39x17 px; o minimo da WCAG 2.2 e 24x24. Damos altura de linha e area
   sem mudar o desenho: o texto continua igual, o alvo cresce. */
.footer-box ul li a, .footer-menu ul li a, .footer-legal-links a,
.pagination a, .blog-pagination a {
    display: inline-block;
    min-height: 24px;
    padding: 4px 2px;
    line-height: 1.5;
}
.pagination a, .blog-pagination a { min-width: 24px; text-align: center; }


/* ALTURA RESERVADA DO HERÓI — NOC 15/08/2026, TERCEIRA volta, e agora com a causa certa.
   O CLS de 0,341 no desktop vinha de UM deslocamento de 0,300 na `.list-section`. A causa
   NAO era fonte (o Lighthouse nao aponta causa nele) nem o carrossel crescer: e o oposto.
   Antes do owl montar, os TRES slides ficam empilhados um sobre o outro no fluxo normal —
   e a minha propria reserva de altura piorou isso, porque passou a dar 720px A CADA UM:
   2.160px de herói que viravam 720px assim que o carrossel assumia. A pagina ENCOLHIA
   1.440px e tudo abaixo subia de uma vez.
   A correcao e mostrar so o primeiro slide ate o owl assumir: a altura e a mesma antes e
   depois, e nada se move. `:not(.owl-loaded)` garante que isto vale apenas no intervalo
   entre a pintura e a inicializacao — e tambem serve de rede se o JS nunca rodar. */
/* ⚠️ REMOVIDO em 15/08/2026 (regressão vista pelo dono):
   .homepage-slider:not(.owl-loaded) > .single-homepage-slider:not(:first-child) { display: none; }
   `display:none` é veneno para o Owl: no instante em que ele MEDE os itens, os slides 2 e 3
   estavam escondidos e mediram 0 px — e o Owl não remede. Com `loop:true` ele clonava o slide 1,
   e o clone ficava sobreposto ao original: o herói aparecia com o MESMO texto duplicado e
   deslocado. A reserva de altura NÃO depende desta linha — quem cura o CLS é o bloco de ALTURA
   FIXA mais abaixo (`height:720px; overflow:hidden`), que fixa o espaço antes, durante e depois
   do JS, e ainda serve de rede se o JS nunca rodar (o overflow esconde os slides empilhados). */
.homepage-slider, .homepage-slider > .single-homepage-slider:first-child { min-height: 720px; }
.homepage-slider .owl-item .single-homepage-slider { min-height: 720px; }
@media (max-width: 1199px) {
  .homepage-slider, .homepage-slider > .single-homepage-slider:first-child,
  .homepage-slider .owl-item .single-homepage-slider { min-height: 640px; }
}
@media (max-width: 991px) {
  .homepage-slider, .homepage-slider > .single-homepage-slider:first-child,
  .homepage-slider .owl-item .single-homepage-slider { min-height: 520px; }
}
@media (max-width: 575px) {
  .homepage-slider, .homepage-slider > .single-homepage-slider:first-child,
  .homepage-slider .owl-item .single-homepage-slider { min-height: 430px; }
}


/* ALVO DE TOQUE (2a volta) — NOC 15/08/2026.
   A primeira regra mirava `.footer-box ul li a`, que nao e o seletor desta pagina. Os links
   mediam 39x17 px. Em vez de perseguir seletor por seletor, a regra abaixo vale para
   QUALQUER link dentro de lista de rodape e de paginacao — que e onde o problema mora. */
.footer-area li > a,
.footer-area .footer-legal-links a,
.news-pagination a,
.pagination a {
    display: inline-block;
    min-height: 24px;
    padding-top: 4px;
    padding-bottom: 4px;
    line-height: 1.6;
}
.news-pagination a, .pagination a { min-width: 24px; text-align: center; padding-left: 6px; padding-right: 6px; }
/* o contraste da listagem, com especificidade maior que a do tema */
.news-text-box .news-tag, span.news-tag { background: #055508 !important; color: #fff !important; }
.news-text-box .news-date, span.news-date { color: #45585a !important; }
.news-text-box .news-link, span.news-link, a .news-link { color: #055508 !important; }


/* HERÓI SEMPRE VISÍVEL — NOC 15/08/2026, rede de seguranca do `NO_LCP`.
   O texto do herói e o candidato a maior elemento da pagina. Se ele estiver invisivel no
   momento em que o navegador decide o LCP, o Lighthouse encerra com `Error! NO_LCP` e a
   nota de desempenho perde o sentido — aconteceu quatro vezes, sempre parecendo ruido.
   A causa (opacidade inline no JS) foi removida; isto aqui garante que nenhuma outra regra
   futura consiga deixar o texto do slide ATIVO invisivel. A animacao de entrada continua
   funcionando: ela roda sobre um estado base visivel, e nao a partir do nada. */
.homepage-slider .hero-text-tablecell .subtitle,
.homepage-slider .hero-text-tablecell h1,
.homepage-slider .hero-text-tablecell h2,
.homepage-slider .hero-btns { opacity: 1; }
/* enquanto o carrossel nao assumiu, nada pode esconder o primeiro slide */
.homepage-slider:not(.owl-loaded) .hero-text-tablecell *,
.homepage-slider .owl-item.active .hero-text-tablecell * { opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  .homepage-slider .hero-text-tablecell *, .homepage-slider .hero-btns { animation: none !important; opacity: 1 !important; }
}


/* IMAGEM DO HERÓI como <img> real — NOC 15/08/2026.
   O <img> existe para ser DETECTAVEL na varredura inicial do HTML (o `background-image`
   do CSS nao e, e era isso que custava 1.930 ms de atraso no LCP). Visualmente ele ocupa
   exatamente o lugar do fundo: cobre o slide, fica atras do texto e nao recebe clique.
   O `background-image` do CSS continua valendo para os slides 2 e 3. */
.single-homepage-slider { position: relative; }
.single-homepage-slider > .hero-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}
/* z-index 2 porque agora existe um véu (::before) em z-index 1 entre a foto e o texto */
.single-homepage-slider > .container { position: relative; z-index: 2; }
/* com o <img> desenhando o fundo dos TRES slides, o background do CSS vira redundante —
   e pior que redundante: deixado ligado, o navegador baixaria as fotos antigas alem das
   novas. `none` nos tres. (15/08/2026: os slides 2 e 3 tambem passaram a usar <img>.) */
.homepage-bg-1, .homepage-bg-2, .homepage-bg-3 { background-image: none; }


/* ─────────────────────────────────────────────────────────────────────────────
   HERÓI: VÉU POR CIMA DA FOTO + MOVIMENTO SEM PESO — NOC 15/08/2026
   Pedido do dono: "imagem de impacto no topo, de preferência um gif animado, pode
   deixar um pouco transparente deixando o texto mais em evidência".

   POR QUE NÃO É UM GIF. GIF em tela cheia com movimento suave pesa alguns MB (10 a
   50x o equivalente em vídeo), só tem 256 cores — o que serrilha justamente os
   degradês escuros desta arte —, a transparência dele é de 1 bit (borda serrilhada)
   e ele é decodificado na thread principal. O topo é o elemento de LCP desta página,
   e o LCP do celular já está ruim: um GIF ali derrubaria a nota, que é exatamente a
   condição que o dono impôs ("se não comprometer o desempenho"). O movimento que ele
   quer é entregue por CSS — `transform` composto na GPU, ZERO byte a mais.

   O VÉU. O `:after` que já existia NÃO escurece a foto: `main.css` o deixa em
   `z-index:-1`, ou seja, ele pinta ATRÁS do <img>. Era decoração invisível. Em vez de
   mexer no `:after` (que também veste os temas claro/escuro e as outras variantes),
   entra um `::before` novo, em z-index 1: fica ACIMA da foto e ABAIXO do texto.
   Ele escurece o MIOLO, onde o texto vive, e preserva as bordas, onde está o detalhe
   que dá o impacto — "escurecer a arte sob o texto, não o texto".

   `overflow:hidden` no slide é obrigatório: sem ele, tanto o zoom da foto quanto a
   deriva do véu vazariam para fora do herói. */
.single-homepage-slider { overflow: hidden; }

.homepage-slider .single-homepage-slider::before {
    content: "";
    position: absolute;
    inset: -7%;                 /* folga para a deriva nunca revelar a borda */
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 76% 60% at 50% 50%, rgba(2, 10, 14, 0.70) 0%, rgba(2, 10, 14, 0.42) 56%, rgba(2, 10, 14, 0.06) 100%),
        linear-gradient(180deg, rgba(2, 10, 14, 0.50) 0%, rgba(2, 10, 14, 0.14) 40%, rgba(2, 10, 14, 0.34) 100%),
        radial-gradient(circle at 72% 28%, rgba(44, 197, 78, 0.10), transparent 42%);
}

/* MOVIMENTO. Só `transform` — o compositor resolve na GPU, sem layout e sem repaint,
   então não entra no TBT (que é thread principal). Nada de `opacity` partindo de 0:
   foi exatamente isso que causou o `NO_LCP` intermitente hoje de manhã; aqui tudo
   começa visível e continua visível. `alternate` evita o corte seco na volta do laço. */
@media (prefers-reduced-motion: no-preference) {
    /* o zoom roda so no slide VISIVEL. Sao tres fotos de tela cheia: animar as tres ao
       mesmo tempo seria memoria de compositor jogada fora no celular. Como o Owl troca a
       classe `.active` a cada giro, cada slide recomeca o zoom quando entra — que e
       exatamente o efeito desejado. */
    .homepage-slider .hero-bg-img { transform-origin: 58% 46%; }
    .homepage-slider:not(.owl-loaded) > .single-homepage-slider:first-child .hero-bg-img,
    .homepage-slider .owl-item.active .hero-bg-img {
        animation: rag-heroi-zoom 30s ease-in-out infinite alternate;
    }
    /* a deriva roda só no slide VISÍVEL: três camadas animando ao mesmo tempo é
       memória de compositor jogada fora no celular */
    .homepage-slider:not(.owl-loaded) > .single-homepage-slider:first-child::before,
    .homepage-slider .owl-item.active .single-homepage-slider::before {
        animation: rag-heroi-deriva 34s ease-in-out infinite alternate;
    }
}
/* SUBTÍTULO DO HERÓI ESCURO — defeito ANTIGO, que só ficou visível com a arte nova.
   A regra genérica lá de cima (`html:not([data-theme="dark"]) ... .hero-text .subtitle`)
   pinta o subtítulo com a tinta ESCURA do tema claro — e ela vale mesmo quando o slide é
   `hero-gradient-dark`, porque só existiam regras de subtítulo para `light` e `auto`.
   Resultado: texto escuro sobre foto quase preta. O `#27dd52` é a cor original do tema
   (`main.css:1683`), que dá 10,5:1 contra o miolo desta arte — bem acima do 4,5:1 da AA. */
body.home-refined .single-homepage-slider.hero-gradient-dark .hero-text .subtitle,
html:not([data-theme="dark"]) body.home-refined .single-homepage-slider.hero-gradient-dark .hero-text .subtitle {
    color: #27dd52 !important;
    text-shadow: 0 2px 6px rgba(2, 10, 14, 0.85);
}

@keyframes rag-heroi-zoom {
    from { transform: scale(1);     }
    to   { transform: scale(1.085); }
}
@keyframes rag-heroi-deriva {
    from { transform: translate3d(-1.6%, -1%, 0);  }
    to   { transform: translate3d(1.6%,  1.2%, 0); }
}


/* ALTURA FIXA DO HERÓI — NOC 15/08/2026, quarta e última volta no CLS.
   `min-height` resolve o caso em que o conteúdo é MENOR que o reservado, mas não impede o
   contrário: quando o carrossel monta, reorganiza os slides e a altura efetiva muda, a
   seção seguinte sobe ou desce. Era o deslocamento de 0,09 a 0,3 que sobrava, sempre no
   mesmo nó (`div#conteudo`), e oscilava de leitura para leitura — sinal de que dependia
   de QUANDO o JS chegava, não de quanto.
   Altura FIXA elimina a variável: o espaço é o mesmo antes, durante e depois do JS.
   O `overflow:hidden` é o par obrigatório disto — sem ele, conteúdo maior vazaria. */
.homepage-slider { height: 720px; overflow: hidden; }
.homepage-slider > .single-homepage-slider:first-child,
.homepage-slider .owl-item .single-homepage-slider,
.homepage-slider .owl-stage-outer { height: 720px; }
@media (max-width: 1199px) {
  .homepage-slider, .homepage-slider > .single-homepage-slider:first-child,
  .homepage-slider .owl-item .single-homepage-slider,
  .homepage-slider .owl-stage-outer { height: 640px; }
}
@media (max-width: 991px) {
  .homepage-slider, .homepage-slider > .single-homepage-slider:first-child,
  .homepage-slider .owl-item .single-homepage-slider,
  .homepage-slider .owl-stage-outer { height: 520px; }
}
@media (max-width: 575px) {
  .homepage-slider, .homepage-slider > .single-homepage-slider:first-child,
  .homepage-slider .owl-item .single-homepage-slider,
  .homepage-slider .owl-stage-outer { height: 430px; }
}


/* FAIXAS DE MARCAS: MESMA ARMADILHA DO HERÓI — NOC 15/08/2026.
   Três faixas (clientes, parceiros, fabricantes) montadas pelo owl. Antes de ele assumir,
   os cartões ficam EMPILHADOS no fluxo: 6 clientes = 6 alturas somadas, que viram UMA
   quando o carrossel monta. A página encolhe e tudo abaixo sobe — exatamente o que
   aconteceu no herói e custou três voltas para eu enxergar.
   Mesma cura: enquanto não há `.owl-loaded`, só o primeiro cartão aparece, e a faixa tem
   altura reservada igual à final. */
/* ⚠️ REMOVIDO em 15/08/2026 — esta linha era o defeito que o dono viu nas faixas:
   .logo-carousel-inner:not(.owl-loaded) > .single-logo-item:not(:first-child) { display: none; }
   Erro de leitura meu: `:not(.owl-loaded)` NÃO é transitório aqui. Esta faixa não é Owl —
   `initLogoCarousel` (assets/js/main.js:199) é um slider próprio que, ao montar, REMOVE
   `owl-loaded` e marca `logo-slider-ready` (main.js:249). Nada, em lugar nenhum, adiciona
   `owl-loaded` a `.logo-carousel-inner`. A condição era PERMANENTEMENTE verdadeira e sobrava
   um cartão só nas três faixas — clientes, parceiros e fabricantes. Determinístico, não corrida.
   O `main.css:903` já usa esse mesmo seletor como o estado NORMAL da fileira
   (`display:flex; overflow:hidden`), então o empilhamento que eu quis curar não existe:
   ele era efeito do CSS assíncrono, e o `a5d02af` já devolveu essas folhas a bloqueantes.
   A reserva de altura abaixo continua valendo. */
.logo-carousel-inner { min-height: 124px; }
.logo-carousel-inner .owl-stage-outer { min-height: 124px; }
@media (max-width: 767px) {
  .logo-carousel-inner, .logo-carousel-inner .owl-stage-outer { min-height: 104px; }
}
/* AVALIAÇÕES — mesmo padrão, mesma armadilha, cura pela ALTURA e não por esconder.
   A linha antiga era:
     .google-reviews-slider:not(.owl-loaded) > .google-review-card:not(:first-child) { display: none; }
   e caía na mesma cilada do herói, agravada: `clearSlider` (assets/js/google-reviews.js:37)
   REMOVE `owl-loaded` e só então chama `.owlCarousel()` — ou seja, no exato instante da medição
   os cartões 2..n estavam `display:none` e mediram 0 px.
   Cura: clampar o CONTÊINER (altura + overflow), como já é feito no herói. O espaço reservado é
   o mesmo, nada se move, e os cartões continuam VISÍVEIS para o Owl medir com a largura certa. */
.google-reviews-slider:not(.owl-loaded) { height: 230px; overflow: hidden; }
.google-reviews-slider { min-height: 230px; }
@media (max-width: 575px) {
  .google-reviews-slider { min-height: 210px; }
  .google-reviews-slider:not(.owl-loaded) { height: 210px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   LOGO DO CABEÇALHO — desfaz o vazamento do CSS crítico da HOME (NOC, 15/08/2026)

   O dono viu a logo por cima de "Home" e "Sobre" numa janela de 1350 px.
   Causa: no `responsive.css` as regras que tiram a logo do fluxo vivem DENTRO de
   `@media (max-width:767px)` e `@media (max-width:1199px)` — são de celular e tablet.
   A extração do CSS crítico embutido no `index.html` ACHATOU as media queries e as
   copiou soltas, então `.site-logo{position:absolute;left:15px;top:0;z-index:999}`
   passou a valer em TODA largura. No desktop o menu é centralizado, e a logo, agora
   fora do fluxo, caiu em cima dos primeiros itens.

   Cura aqui e não no HTML: esta folha é carregada DEPOIS do bloco embutido, então
   vence na cascata — e mexer num arquivo .css é seguro, enquanto operar a estrutura
   do `index.html` já me custou duas quebras hoje.
   O estado restaurado é exatamente o que o `main.css` define para desktop
   (float:left; max-width:150px; padding:6px 0), e nada abaixo de 1200 px é tocado. */
@media only screen and (min-width: 1200px) {
  .site-logo {
    position: static;
    float: left;
    left: auto;
    right: auto;
    top: auto;
    z-index: auto;
    max-width: 150px;
    padding: 6px 0;
    text-align: left;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   FAIXAS DE LOGOS E AVALIAÇÕES — ajustes pedidos pelo dono em 15/08/2026.
   Medido antes de mexer: Clientes 6 logos · Parceiros 4 · Especialistas 5.
   A fileira é construída para 5 por vez (flex-basis de 20%), e isso explica os dois
   sintomas de uma vez: com 4 logos, Parceiros sobra espaço à direita e a faixa parece
   encostada à esquerda; com 5, Especialistas preenche exato e NÃO sobra nada para
   correr — por isso o giro automático nunca aparecia ali. */

/* 1) centraliza quando os logos NÃO enchem a fileira. `safe` é o detalhe que importa:
      se o conteúdo passar a transbordar, o navegador volta sozinho a alinhar pelo começo,
      em vez de cortar o primeiro cartão — que é o defeito clássico de centralizar carrossel. */
.logo-carousel-inner:not(.owl-loaded) {
  justify-content: safe center;
}

/* 2) "Especialista nos fabricantes": 4 por fileira em vez de 5. Com 5 logos passam a existir
      DUAS páginas, e aí o giro automático de 5 s tem para onde ir. Os cartões ficam um pouco
      maiores, que é o efeito colateral desejável — as marcas ficam mais legíveis. */
#fabricantes .logo-carousel-inner:not(.owl-loaded) > .single-logo-item {
  flex: 0 0 calc(25% - 14px);
}
@media (max-width: 991px) {
  #fabricantes .logo-carousel-inner:not(.owl-loaded) > .single-logo-item { flex: 0 0 calc(33.333% - 12px); }
}

/* 3) AVALIAÇÕES — o vão branco antes do botão "Ver todas as avaliações no Google".
      Duas causas somadas: altura que o owl deixa gravada no palco (já tratada no
      `.owl-stage-outer`, mas o `.owl-stage` também guarda a sua) e respiro de seção
      generoso demais para o que fica ali. */
.google-reviews-slider .owl-stage { height: auto !important; }
.google-reviews-section { padding: 70px 0; }
.google-reviews-footer { margin-top: 14px; }
@media (max-width: 991px) {
  .google-reviews-section { padding: 52px 0; }
}