/* ==========================================================================
   Passadoria Rotondi · camada da marca (rotondi.css)
   Carregar DEPOIS do bootstrap.min.css 5.3.8 e do tokens.css.
   Nomes de classes/variáveis em inglês; comentários em português.
   ========================================================================== */

/* --- 1. Ponte com o Bootstrap 5.3 (sem efeito nos previews, que não carregam Bootstrap) --- */
:root {
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.625;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--surface);
  --bs-secondary-color: var(--ink-muted);
  --bs-primary: #446699;
  --bs-primary-rgb: 68, 102, 153;
  --bs-link-color: #446699;
  --bs-link-color-rgb: 68, 102, 153;
  --bs-link-hover-color: #224477;
  --bs-link-hover-color-rgb: 34, 68, 119;
  --bs-border-color: var(--border);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-focus-ring-color: rgba(34, 68, 119, 0.5);
  --bs-heading-color: var(--ink);
}

/* --- 2. Base --- */
.rt-root, body.rt-root {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}
.rt-root *, .rt-root *::before, .rt-root *::after { box-sizing: border-box; }
.rt-root h1, .rt-root h2, .rt-root h3, .rt-root h4, .rt-root p { margin: 0; }
.rt-root a { color: var(--brand); text-decoration: none; }
.rt-root a:hover { color: var(--brand-strong); }
.rt-root :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rt-dark :focus-visible { outline-color: var(--sky-300) !important; }

.rt-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--space-5); }
.rt-section { padding: var(--space-9) 0; }
.rt-section--alt { background: var(--surface-alt); }
@media (max-width: 767.98px) { .rt-section { padding: var(--space-8) 0; } }

.rt-model {
  font-family: var(--font-mono); font-size: 13px; line-height: 16px;
  font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase;
}

/* --- 3. Eyebrow + cabeçalho de seção --- */
.rt-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-size: 13px; line-height: 16px; font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--brand);
}
.rt-eyebrow::before {
  content: ""; width: 24px; height: 2px; border-radius: var(--radius-sm); background: var(--accent);
}
.rt-dark .rt-eyebrow { color: var(--sky-300); }

.rt-section-header { max-width: 720px; margin-bottom: var(--space-6); }
.rt-section-header h2 { margin-top: var(--space-3); font-size: 32px; line-height: 38px; font-weight: 600; letter-spacing: -0.5px; }
.rt-section-header p { margin-top: var(--space-4); font-size: 20px; line-height: 30px; color: var(--ink-muted); }
.rt-section-header--split { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); }
.rt-dark .rt-section-header h2 { color: var(--on-dark); }
.rt-dark .rt-section-header p { color: var(--on-dark-muted); }
@media (max-width: 767.98px) {
  .rt-section-header h2 { font-size: 26px; line-height: 32px; }
  .rt-section-header p { font-size: 18px; line-height: 28px; }
  .rt-section-header--split { flex-direction: column; align-items: flex-start; }
}

/* --- 4. Botões --- */
.rt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: var(--space-3) var(--space-5);
  font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 500;
  border: 1px solid transparent; border-radius: var(--radius-md);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.rt-btn svg { width: 16px; height: 16px; flex: none; }
.rt-root a.rt-btn--primary, .rt-btn--primary { background: var(--brand); color: var(--white); }
.rt-root a.rt-btn--primary:hover, .rt-btn--primary:hover { background: var(--brand-strong); color: var(--white); }
.rt-root a.rt-btn--secondary, .rt-btn--secondary { background: transparent; color: var(--brand); border-color: var(--brand); }
.rt-root a.rt-btn--secondary:hover, .rt-btn--secondary:hover { background: var(--navy-050); color: var(--brand-strong); border-color: var(--brand-strong); }
.rt-root a.rt-btn--ghost, .rt-btn--ghost { background: transparent; color: var(--brand); padding-left: 0; padding-right: 0; }
.rt-root a.rt-btn--ghost:hover, .rt-btn--ghost:hover { color: var(--brand-strong); }
.rt-btn--ghost:hover svg { transform: translateX(2px); }
.rt-btn--ghost svg { transition: transform .15s ease; }
.rt-root a.rt-btn--light, .rt-btn--light { background: var(--white); color: var(--navy-700); }
.rt-root a.rt-btn--light:hover, .rt-btn--light:hover { background: var(--sky-100); color: var(--navy-900); }
.rt-root a.rt-btn--outline-light, .rt-btn--outline-light { background: transparent; color: var(--white); border-color: var(--navy-200); }
.rt-root a.rt-btn--outline-light:hover, .rt-btn--outline-light:hover { border-color: var(--white); color: var(--white); background: rgba(255,255,255,.06); }
.rt-btn--lg { min-height: 52px; padding: 14px var(--space-6); font-size: 16px; }
.rt-btn--sm { min-height: 36px; padding: 8px var(--space-4); font-size: 14px; }
.rt-btn:disabled, .rt-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* --- 5. Tag / badge --- */
.rt-tag {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 4px var(--space-2); border-radius: var(--radius-sm);
  font-size: 12px; line-height: 16px; font-weight: 500;
  background: var(--navy-050); color: var(--navy-700);
}
.rt-tag--outline { background: transparent; border: 1px solid var(--border); color: var(--ink-muted); }
.rt-tag--sky { background: var(--sky-100); color: var(--navy-700); }
.rt-tag--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* --- 6. Cabeçalho / navegação --- */
.rt-header {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255,255,255,.96); backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--border);
}
.rt-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); height: 80px; }
.rt-header__logo img { display: block; height: 52px; width: auto; }
.rt-nav { display: flex; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.rt-nav a {
  position: relative; display: block; padding: var(--space-2) var(--space-3);
  font-size: 15px; line-height: 20px; font-weight: 500; color: var(--ink);
}
.rt-root .rt-nav a { color: var(--ink); }
.rt-root .rt-nav a:hover { color: var(--brand); }
.rt-nav a.active::after {
  content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: -2px;
  height: 2px; border-radius: var(--radius-sm); background: var(--accent);
}
.rt-header__actions { display: flex; align-items: center; gap: var(--space-4); }
.rt-header__phone { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 14px; color: var(--ink-muted); white-space: nowrap; }
.rt-header__phone svg { width: 16px; height: 16px; color: var(--brand); }
.rt-header__toggle {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  border: 1px solid var(--border-control); border-radius: var(--radius-md); background: var(--white); color: var(--ink);
}
.rt-header__toggle svg { width: 20px; height: 20px; }
@media (max-width: 1199.98px) { .rt-header__actions .rt-header__phone, .rt-header__actions .rt-header__cta { display: none; } }
.rt-header__phone--menu { margin-top: var(--space-4); }
@media (max-width: 991.98px) {
  .rt-header__inner { height: 68px; }
  .rt-header__logo img { height: 40px; }
  .rt-nav, .rt-header__actions .rt-btn { display: none; }
  .rt-header__toggle { display: inline-flex; }
}
/* Menu mobile (no site: Bootstrap offcanvas, lado direito) */
.rt-mobile-menu { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-4); }
.rt-mobile-menu ul { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.rt-mobile-menu li a { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--border); font-size: 17px; font-weight: 500; }
.rt-root .rt-mobile-menu li a { color: var(--ink); }
.rt-mobile-menu li a.active { color: var(--brand); }
.rt-mobile-menu .rt-btn { width: 100%; }

/* --- 7. Hero --- */
.rt-hero { padding: var(--space-8) 0 var(--space-9); background: var(--surface); }
.rt-hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--space-8); align-items: center; }
.rt-hero h1 { margin-top: var(--space-4); font-size: 56px; line-height: 60px; font-weight: 600; letter-spacing: -1.5px; }
.rt-hero__lead { margin-top: var(--space-5); max-width: 34em; font-size: 20px; line-height: 30px; color: var(--ink-muted); }
.rt-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.rt-hero__media { position: relative; aspect-ratio: 5 / 4; border-radius: var(--radius-lg); background: var(--sky-100); overflow: hidden; }
.rt-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
.rt-hero__media-caption {
  position: absolute; left: var(--space-4); bottom: var(--space-4);
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 6px var(--space-3); border-radius: var(--radius-sm); background: var(--white); color: var(--ink);
  font-size: 13px; line-height: 16px; box-shadow: var(--shadow-sm);
}
.rt-facts { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: var(--space-8); border-top: 1px solid var(--border); }
.rt-fact { padding: var(--space-5) var(--space-5) 0 0; }
.rt-fact + .rt-fact { padding-left: var(--space-5); border-left: 1px solid var(--border); }
.rt-fact strong { display: block; font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.2px; color: var(--ink); }
.rt-fact span { display: block; margin-top: var(--space-1); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
@media (max-width: 991.98px) {
  .rt-hero__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .rt-hero h1 { font-size: 36px; line-height: 40px; letter-spacing: -1px; }
  .rt-hero__lead { font-size: 18px; line-height: 28px; }
}
@media (max-width: 575.98px) {
  .rt-facts { grid-template-columns: 1fr; }
  .rt-fact, .rt-fact + .rt-fact { padding: var(--space-4) 0; border-left: 0; border-bottom: 1px solid var(--border); }
}

/* --- 8. Card de categoria --- */
.rt-category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.rt-category-card {
  position: relative; display: flex; flex-direction: column; min-height: 200px;
  padding: var(--space-5); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.rt-root a.rt-category-card { color: var(--ink); }
.rt-category-card:hover { border-color: var(--navy-200); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.rt-category-card__index { font-family: var(--font-mono); font-size: 13px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }
.rt-category-card h3 { margin-top: var(--space-5); font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.2px; }
.rt-category-card p { margin-top: var(--space-2); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.rt-category-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: var(--space-5); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.rt-category-card__arrow { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--navy-050); color: var(--brand); transition: background-color .2s ease, color .2s ease; }
.rt-category-card__arrow svg { width: 16px; height: 16px; }
.rt-category-card:hover .rt-category-card__arrow { background: var(--brand); color: var(--white); }
@media (max-width: 991.98px) { .rt-category-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .rt-category-grid { grid-template-columns: 1fr; } .rt-category-card { min-height: 0; } }

/* --- 9. Card de produto (listagem única, sem página interna) --- */
.rt-product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.rt-product-card {
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); scroll-margin-top: 96px;
}
.rt-product-card:target { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); }
.rt-product-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--gray-100); overflow: hidden; }
.rt-product-card__media img { width: 100%; height: 100%; object-fit: contain; }
.rt-product-card__noimg {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
  width: 100%; height: 100%; color: var(--ink-muted); font-size: 13px; line-height: 16px;
}
.rt-product-card__noimg svg { width: 28px; height: 28px; color: var(--gray-500); }
.rt-product-card__noimg .bi { font-size: 28px; color: var(--gray-500); }
.rt-product-card__noimg .rt-model { color: var(--navy-700); font-size: 15px; }
.rt-product-card__body { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); flex: 1; }
.rt-product-card__model { color: var(--brand); }
.rt-product-card__name { margin-top: var(--space-1); font-size: 18px; line-height: 24px; font-weight: 600; color: var(--ink); }
.rt-product-card__category { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.rt-product-card__actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); margin-top: auto; padding-top: var(--space-4); }
.rt-product-card__actions .rt-btn--sm { width: 100%; }
.rt-product-card__actions .rt-btn--ghost { justify-content: center; min-height: 36px; }
@media (max-width: 1199.98px) { .rt-product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767.98px) { .rt-product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } .rt-product-card__body { padding: var(--space-3); } .rt-product-card__name { font-size: 16px; line-height: 22px; } }
@media (max-width: 419.98px) { .rt-product-grid { grid-template-columns: 1fr; } }

/* Placeholder de imagem (apenas design system / enquanto faltar foto) */
.rt-img-placeholder {
  display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;
  color: var(--ink-muted); font-size: 12px; line-height: 16px; text-align: center; padding: var(--space-4);
  background-image: linear-gradient(135deg, transparent 49.6%, var(--gray-200) 49.6%, var(--gray-200) 50.4%, transparent 50.4%);
}
.rt-img-placeholder span { background: var(--gray-100); padding: 2px 6px; border-radius: var(--radius-sm); }
.rt-hero__media .rt-img-placeholder span { background: var(--sky-100); }

/* --- 10. Barra de filtros do catálogo --- */
.rt-filter { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); margin-bottom: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.rt-filter__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.rt-input {
  flex: 1 1 260px; display: flex; align-items: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-3); background: var(--white);
  border: 1px solid var(--border-control); border-radius: var(--radius-md);
}
.rt-input:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--focus); }
.rt-input svg { width: 16px; height: 16px; color: var(--ink-muted); flex: none; }
.rt-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; color: var(--ink); }
.rt-input input::placeholder { color: var(--ink-muted); }
.rt-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rt-chip {
  min-height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--white); color: var(--ink);
  font: inherit; font-size: 14px; line-height: 20px; cursor: pointer; white-space: nowrap;
}
.rt-chip:hover { border-color: var(--border-control); }
.rt-chip[aria-pressed="true"] { background: var(--navy-050); border-color: var(--brand); color: var(--navy-700); font-weight: 500; }
.rt-filter__count { margin-left: auto; font-size: 14px; color: var(--ink-muted); white-space: nowrap; }
/* Seletor de categoria: no celular substitui as chips (com 11 categorias elas rolavam escondidas) */
.rt-select {
  position: relative; display: flex; align-items: center; flex: 1 1 100%;
  min-height: 44px; background: var(--white);
  border: 1px solid var(--border-control); border-radius: var(--radius-md);
}
.rt-select:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--focus); }
.rt-select select {
  flex: 1; min-width: 0; min-height: 42px; padding: 0 var(--space-6) 0 var(--space-3);
  border: 0; outline: 0; background: transparent; appearance: none; -webkit-appearance: none;
  font: inherit; font-size: 15px; color: var(--ink); cursor: pointer;
}
.rt-select .bi { position: absolute; right: var(--space-3); font-size: 14px; color: var(--ink-muted); pointer-events: none; }
.rt-filter__select { display: none; }
@media (max-width: 767.98px) {
  .rt-chips { display: none; }
  .rt-filter__select { display: flex; }
  .rt-filter__count { margin-left: 0; width: 100%; }
}

/* --- 10b. Paginação (JavaScript, depois de carregar todos os produtos) --- */
.rt-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-6); }
.rt-pagination[hidden] { display: none; }
.rt-pagination ol { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
/* Reticências entre os números e o "Página X de Y" do celular */
.rt-page-gap { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 40px; color: var(--ink-muted); }
.rt-pagination__status { display: none; padding: 0 var(--space-2); font-size: 14px; font-weight: 500; color: var(--ink); white-space: nowrap; }
@media (max-width: 575.98px) {
  .rt-pagination ol { display: none; }
  .rt-pagination__status { display: inline; }
}
.rt-page-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  min-width: 40px; height: 40px; padding: 0 var(--space-3); border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--white); color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.rt-page-btn:hover { border-color: var(--border-control); }
.rt-page-btn[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: var(--white); }
.rt-page-btn:disabled { opacity: .45; cursor: default; }
.rt-page-btn svg { width: 14px; height: 14px; }
@media (max-width: 479.98px) { .rt-page-btn--nav span { display: none; } }

/* --- 11. Breadcrumb --- */
.rt-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.rt-breadcrumb li { display: inline-flex; align-items: center; gap: var(--space-2); }
.rt-breadcrumb li + li::before { content: "/"; color: var(--gray-500); }
.rt-breadcrumb a { color: var(--ink-muted); }
.rt-root .rt-breadcrumb a { color: var(--ink-muted); }
.rt-root .rt-breadcrumb a:hover { color: var(--brand); }
.rt-breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 500; }

/* --- 12. Ficha técnica --- */
.rt-specs { margin: 0; border-top: 1px solid var(--border); }
.rt-specs__row { display: grid; grid-template-columns: minmax(160px, 38%) 1fr; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.rt-specs dt { font-size: 14px; line-height: 22px; font-weight: 500; color: var(--ink-muted); }
.rt-specs dd { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink); }
.rt-specs dd .rt-model { font-size: 14px; line-height: 22px; text-transform: none; }
@media (max-width: 575.98px) { .rt-specs__row { grid-template-columns: 1fr; gap: 2px; } }

/* --- 13. Pilares (importação · venda · assistência) em faixa escura --- */
.rt-dark { background: var(--brand-strong); color: var(--on-dark); }
.rt-footer.rt-dark, .rt-cta.rt-dark { background: var(--surface-dark); }
.rt-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(201, 214, 232, .35); }
.rt-pillar { padding: var(--space-6) var(--space-5) 0 0; }
.rt-pillar + .rt-pillar { padding-left: var(--space-5); border-left: 1px solid rgba(201, 214, 232, .35); }
.rt-pillar__num { font-family: var(--font-mono); font-size: 13px; line-height: 16px; font-weight: 500; color: var(--sky-300); }
.rt-pillar h3 { margin-top: var(--space-4); font-size: 22px; line-height: 28px; font-weight: 600; color: var(--on-dark); }
.rt-pillar p { margin-top: var(--space-3); font-size: 16px; line-height: 26px; color: var(--on-dark-muted); }
@media (max-width: 767.98px) {
  .rt-pillars { grid-template-columns: 1fr; }
  .rt-pillar, .rt-pillar + .rt-pillar { padding: var(--space-5) 0; border-left: 0; border-bottom: 1px solid rgba(201, 214, 232, .35); }
}

/* --- 14. Segmentos atendidos --- */
.rt-segments { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.rt-segment { padding-top: var(--space-4); border-top: 2px solid var(--brand); }
.rt-segment svg { width: 28px; height: 28px; color: var(--brand); }
.rt-segment h3 { margin-top: var(--space-4); font-size: 18px; line-height: 24px; font-weight: 600; }
.rt-segment p { margin-top: var(--space-2); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
@media (max-width: 991.98px) { .rt-segments { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479.98px) { .rt-segments { grid-template-columns: 1fr; } }

/* --- 15. Contato --- */
.rt-contact { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.rt-contact__card { padding: var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.rt-contact__card--feature { background: var(--sky-100); border-color: var(--sky-100); }
.rt-contact__card h3 { font-size: 22px; line-height: 28px; font-weight: 600; }
.rt-contact__card > p { margin-top: var(--space-2); color: var(--ink-muted); }
.rt-contact__card--feature > p { color: var(--navy-700); }
.rt-contact__list { list-style: none; margin: var(--space-5) 0 0; padding: 0; }
.rt-contact__list li { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.rt-contact__card--feature .rt-contact__list li { border-top-color: rgba(34, 68, 119, .15); }
.rt-contact__list svg { width: 20px; height: 20px; margin-top: 3px; color: var(--brand); flex: none; }
.rt-contact__label { display: block; font-size: 13px; line-height: 16px; color: var(--ink-muted); }
.rt-contact__card--feature .rt-contact__label { color: var(--navy-700); }
.rt-contact__value { display: block; margin-top: 2px; font-size: 17px; line-height: 24px; font-weight: 500; color: var(--ink); }
.rt-root a.rt-contact__value { color: var(--ink); }
.rt-root a.rt-contact__value:hover { color: var(--brand); }
.rt-contact__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
@media (max-width: 767.98px) { .rt-contact { grid-template-columns: 1fr; } .rt-contact__card { padding: var(--space-5); } }

/* --- 16. Rodapé --- */
.rt-footer { background: var(--surface-dark); color: var(--on-dark-muted); padding: var(--space-8) 0 var(--space-5); font-size: 14px; line-height: 22px; }
.rt-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--space-6); }
.rt-footer__brand strong { display: block; font-size: 18px; line-height: 24px; font-weight: 600; color: var(--on-dark); }
.rt-footer__brand p { margin-top: var(--space-3); max-width: 30em; }
.rt-footer h4 { font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--sky-300); margin: 0 0 var(--space-4); }
.rt-footer ul { list-style: none; margin: 0; padding: 0; }
.rt-footer li + li { margin-top: var(--space-2); }
.rt-root .rt-footer a { color: var(--on-dark); }
.rt-root .rt-footer a:hover { color: var(--sky-300); }
.rt-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid rgba(201, 214, 232, .2); font-size: 13px; line-height: 20px; }
@media (max-width: 991.98px) { .rt-footer__grid { grid-template-columns: 1fr 1fr; } .rt-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 575.98px) { .rt-footer__grid { grid-template-columns: 1fr; } }

/* --- 17. Faixa de CTA --- */
.rt-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-7); border-radius: var(--radius-lg); background: var(--navy-900); color: var(--on-dark); }
.rt-cta h2 { font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.5px; color: var(--on-dark); }
.rt-cta p { margin-top: var(--space-2); color: var(--on-dark-muted); }
.rt-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); flex: none; }
@media (max-width: 767.98px) { .rt-cta { flex-direction: column; align-items: flex-start; padding: var(--space-6) var(--space-5); } .rt-cta h2 { font-size: 24px; line-height: 30px; } }

/* --- 18. Produto: layout da página --- */
.rt-product-page { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-7); align-items: start; }
.rt-gallery__main { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); background: var(--gray-100); overflow: hidden; border: 1px solid var(--border); }
.rt-gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-top: var(--space-3); }
.rt-gallery__thumbs button { aspect-ratio: 1; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--gray-100); cursor: pointer; overflow: hidden; }
.rt-gallery__thumbs button[aria-current="true"] { border: 2px solid var(--brand); }
.rt-product-info h1 { margin-top: var(--space-3); font-size: 40px; line-height: 46px; font-weight: 600; letter-spacing: -1px; }
.rt-product-info .rt-lead { margin-top: var(--space-4); font-size: 18px; line-height: 28px; color: var(--ink-muted); }
.rt-product-info__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-6) 0; }
@media (max-width: 991.98px) { .rt-product-page { grid-template-columns: 1fr; gap: var(--space-6); } .rt-product-info h1 { font-size: 32px; line-height: 38px; } }

/* --- 19. Ícones (Bootstrap Icons no site; SVG inline nos previews) --- */
.rt-root .bi { display: inline-block; line-height: 1; }
.rt-btn .bi { font-size: 16px; }
.rt-header__phone .bi, .rt-input .bi { font-size: 16px; color: var(--brand); }
.rt-input .bi { color: var(--ink-muted); }
.rt-header__toggle .bi { font-size: 22px; }
.rt-category-card__arrow .bi { font-size: 16px; }
.rt-segment .bi { font-size: 28px; color: var(--brand); }
.rt-contact__list .bi { font-size: 20px; color: var(--brand); margin-top: 2px; flex: none; }
.rt-mobile-menu li a .bi { font-size: 16px; color: var(--brand); }

/* --- 20. Âncoras, scroll e movimento reduzido --- */
html { scroll-behavior: smooth; }
.rt-root section[id] { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rt-root *, .rt-root *::before, .rt-root *::after { transition: none !important; }
  .rt-category-card:hover, .rt-product-card:hover .rt-product-card__media img { transform: none; }
}

/* --- 21. Menu mobile dentro do Offcanvas do Bootstrap --- */
.rt-offcanvas { --bs-offcanvas-width: 320px; }
.rt-offcanvas .offcanvas-header { justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); }
.rt-mobile-menu--flat { border: 0; border-radius: 0; box-shadow: none; padding: var(--space-4) var(--space-5); }

/* --- 22. Estrutura de páginas internas --- */
.rt-page { padding: var(--space-6) 0 var(--space-9); background: var(--surface-alt); min-height: 60vh; }
.rt-page--plain { background: var(--surface); }
.rt-page-title { max-width: 720px; margin: var(--space-5) 0 var(--space-6); }
.rt-page-title h1 { margin-top: var(--space-3); font-size: 40px; line-height: 46px; font-weight: 600; letter-spacing: -1px; }
.rt-page-title p { margin-top: var(--space-3); font-size: 18px; line-height: 28px; color: var(--ink-muted); }
/* .rt-root na frente: sem ele, `.rt-root h2 { margin: 0 }` anulava esta margem */
.rt-root .rt-subtitle { margin: var(--space-6) 0 var(--space-6); font-size: 18px; line-height: 24px; font-weight: 600; color: var(--ink); }
.rt-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
.rt-split .rt-section-header { margin-bottom: 0; }
.rt-empty { padding: var(--space-7) 0; text-align: center; color: var(--ink-muted); }
.rt-empty[hidden] { display: none; }
@media (max-width: 991.98px) { .rt-split { grid-template-columns: 1fr; gap: var(--space-5); } }
@media (max-width: 767.98px) { .rt-page-title h1 { font-size: 32px; line-height: 38px; } }

/* --- 23. Texto corrido (prose) --- */
.rt-prose { font-size: 17px; line-height: 28px; color: var(--ink); }
.rt-prose p + p, .rt-prose p + h2, .rt-prose h2 + p { margin-top: var(--space-4); }
.rt-prose h2 { margin-top: var(--space-6); font-size: 22px; line-height: 28px; font-weight: 600; }
.rt-prose strong { font-weight: 600; }
.rt-prose a:not(.rt-btn) { text-decoration: underline; text-underline-offset: 3px; }
.rt-prose__muted { color: var(--ink-muted); }
.rt-product-desc { max-width: 760px; margin-top: var(--space-8); }
.rt-product-info__model { display: block; margin-top: var(--space-2); font-size: 15px; color: var(--brand); }

/* --- 24. Valores "Equipamento Rotondi significa" (informativos, padrão Segments) --- */
.rt-values-wrap { margin-top: var(--space-7); }
.rt-value__kicker { display: block; margin-top: var(--space-4); font-size: 13px; line-height: 16px; color: var(--ink-muted); }
.rt-segment.rt-value h3 { margin-top: var(--space-1); }
.rt-value__more { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: auto; padding-top: var(--space-4); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--brand); }
.rt-value__more svg { width: 14px; height: 14px; }
.rt-value__more .bi { font-size: 14px; }

/* --- 25. Card de artigo institucional --- */
.rt-article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.rt-article-grid--2 { grid-template-columns: repeat(2, 1fr); }
.rt-article-grid--4 { grid-template-columns: repeat(4, 1fr); }
.rt-article-grid--4 .rt-article-card__body { padding: var(--space-4); }
.rt-article-grid--4 .rt-article-card h3 { font-size: 18px; line-height: 24px; }
.rt-article-grid--4 .rt-article-card p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 22px; }
.rt-article-card {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.rt-root a.rt-article-card { color: var(--ink); }
.rt-article-card:hover { box-shadow: var(--shadow-md); border-color: var(--navy-200); }
.rt-article-card__media { aspect-ratio: 16 / 9; background: var(--gray-100); overflow: hidden; }
.rt-article-card__media img { width: 100%; height: 100%; object-fit: cover; }
.rt-article-card__icon { display: flex; align-items: center; height: 96px; padding: 0 var(--space-5); background: var(--navy-050); color: var(--brand); }
.rt-article-card__icon svg { width: 32px; height: 32px; }
.rt-article-card__icon .bi { font-size: 32px; }
.rt-article-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--space-5); }
.rt-article-card__kicker { font-size: 13px; line-height: 16px; color: var(--ink-muted); }
.rt-article-card h3 { margin-top: var(--space-2); font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.2px; }
.rt-article-card p { margin-top: var(--space-2); font-size: 15px; line-height: 24px; color: var(--ink-muted); }
@media (max-width: 1199.98px) { .rt-article-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 991.98px) { .rt-article-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .rt-article-grid, .rt-article-grid--2, .rt-article-grid--4 { grid-template-columns: 1fr; } }

/* --- 26. Página de artigo --- */
.rt-article { max-width: 760px; margin: var(--space-6) auto 0; }
.rt-article__header h1 { margin-top: var(--space-3); font-size: 40px; line-height: 46px; font-weight: 600; letter-spacing: -1px; }
.rt-article__header .rt-lead { margin-top: var(--space-4); font-size: 20px; line-height: 30px; color: var(--ink-muted); }
.rt-figure { margin: var(--space-6) 0; }
.rt-figure__media { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); background: var(--gray-100); overflow: hidden; }
.rt-figure__media img { width: 100%; height: 100%; object-fit: cover; }
.rt-figure figcaption { margin-top: var(--space-2); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
@media (max-width: 767.98px) { .rt-article__header h1 { font-size: 30px; line-height: 36px; } .rt-article__header .rt-lead { font-size: 18px; line-height: 28px; } }

/* --- 27. Crédito da agência no rodapé: logo AMDB (SVG com o "amdb" em branco, só sobre fundo escuro) --- */
.rt-root .rt-footer .rt-footer__credit { align-self: flex-end; }
.rt-footer__credit img { display: block; height: 40px; width: auto; }

/* --- 28. Botão flutuante de WhatsApp (todas as páginas) --- */
.rt-whatsapp {
  position: fixed; z-index: 1040;
  right: calc(var(--space-5) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--whatsapp); color: var(--white);
  border: 2px solid var(--white); box-shadow: var(--shadow-md);
  transition: background-color .15s ease, transform .15s ease;
}
.rt-root a.rt-whatsapp, .rt-root a.rt-whatsapp:hover { color: var(--white); }
.rt-whatsapp:hover { background: var(--whatsapp-strong); transform: translateY(-2px); }
.rt-whatsapp svg { width: 34px; height: 34px; }
.rt-whatsapp .bi { font-size: 34px; line-height: 1; }
.rt-whatsapp__label {
  position: absolute; right: calc(100% + var(--space-3)); top: 50%;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  background: var(--white); color: var(--ink); box-shadow: var(--shadow-md);
  font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap;
  opacity: 0; transform: translate(4px, -50%); pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.rt-whatsapp:hover .rt-whatsapp__label, .rt-whatsapp:focus-visible .rt-whatsapp__label,
.rt-whatsapp--open .rt-whatsapp__label { opacity: 1; transform: translate(0, -50%); }
/* Variante estática: só para exibir o componente em guias e previews */
.rt-whatsapp--inline { position: relative; right: auto; bottom: auto; }
@media (max-width: 767.98px) {
  .rt-whatsapp { width: 60px; height: 60px; right: calc(var(--space-4) + env(safe-area-inset-right, 0px)); bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); }
  .rt-whatsapp .bi { font-size: 32px; }
  .rt-whatsapp__label { display: none; }
  .rt-footer__bottom { padding-right: 80px; }
}
@media (prefers-reduced-motion: reduce) { .rt-whatsapp:hover { transform: none; } }
@media print { .rt-whatsapp { display: none; } }

/* --- 29. Hero v2: foto inteira (sem texto na imagem) + texto em HTML --- */
.rt-hero-full { position: relative; display: flex; align-items: center; min-height: min(82vh, 760px); background: var(--surface); overflow: hidden; }
.rt-hero-full__media { position: absolute; inset: 0; }
.rt-hero-full__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
/* Véu branco à esquerda (como no banner aprovado) para o texto escuro ter contraste */
.rt-hero-full__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .9) 34%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 66%); }
.rt-hero-full__content { position: relative; padding-top: var(--space-9); padding-bottom: var(--space-9); }
.rt-hero-full__content > * { max-width: 580px; }
.rt-hero-full h1, .rt-hero-banner__mobile-title { margin-top: var(--space-4); font-size: 56px; line-height: 60px; font-weight: 600; letter-spacing: -1.5px; color: var(--navy-900); }
.rt-hero-full__accent { color: var(--brand); }
.rt-hero-full__lead { margin-top: var(--space-5); font-size: 20px; line-height: 30px; color: var(--ink); }
.rt-hero-features { display: flex; gap: 0; list-style: none; margin: var(--space-7) 0 0; padding: 0; }
.rt-hero-features li { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: 0 var(--space-5); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); max-width: 190px; }
.rt-hero-features li:first-child { padding-left: 0; }
.rt-hero-features li + li { border-left: 1px solid var(--navy-200); }
.rt-hero-features svg { width: 28px; height: 28px; color: var(--navy-700); }
.rt-hero-features .bi { font-size: 28px; color: var(--navy-700); }
@media (max-width: 991.98px) {
  .rt-hero-full { min-height: 0; }
  .rt-hero-full__scrim { background: rgba(255, 255, 255, .88); }
  .rt-hero-full h1, .rt-hero-banner__mobile-title { font-size: 36px; line-height: 40px; letter-spacing: -1px; }
  .rt-hero-full__lead { font-size: 18px; line-height: 28px; }
  .rt-hero-full__content { padding-top: var(--space-8); padding-bottom: var(--space-8); }
}
@media (max-width: 575.98px) {
  .rt-hero-features { flex-direction: column; gap: var(--space-3); }
  .rt-hero-features li, .rt-hero-features li:first-child { flex-direction: row; align-items: center; gap: var(--space-3); padding: 0; max-width: none; }
  .rt-hero-features li + li { border-left: 0; }
  .rt-hero-features svg { width: 22px; height: 22px; } .rt-hero-features .bi { font-size: 22px; }
}

/* --- 29b. Hero v3: banner com o texto na própria imagem --- */
.rt-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.rt-hero-banner { background: var(--surface); }
.rt-hero-banner__image img { display: block; width: 100%; height: auto; }
.rt-hero-banner__mobile { display: none; }
.rt-hero-banner__bar { border-bottom: 1px solid var(--border); }
.rt-hero-banner__bar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-5); padding-bottom: var(--space-5); }
.rt-hero-banner__bar .rt-hero__actions { margin-top: 0; }
/* Abaixo de 768px o texto embutido na imagem fica ilegível: troca pela foto sem texto + texto em HTML */
@media (max-width: 767.98px) {
  .rt-hero-banner__image { display: none; }
  .rt-hero-banner__mobile { display: block; padding-bottom: var(--space-6); }
  .rt-hero-banner__mobile-media { aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: var(--space-4); }
  .rt-hero-banner__mobile-media img { width: 100%; height: 100%; object-fit: cover; object-position: 75% center; }
  .rt-hero-banner__bar-inner { flex-direction: column; align-items: flex-start; }
  .rt-hero-banner__bar .rt-hero__actions { width: 100%; }
  .rt-hero-banner__bar .rt-btn { flex: 1 1 100%; }
}

/* --- 30. Artigo: voltar --- */
.rt-article__back { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.rt-product-grid { scroll-margin-top: 112px; }

/* --- 31. Link "Pular para o conteúdo" (presente nos layouts, faltava no bundle) --- */
.rt-skip{position:absolute;left:16px;top:8px;z-index:2000;padding:8px 12px;background:var(--white);border-radius:var(--radius-md);box-shadow:var(--shadow-md)}