/* ============================================================
   ProAgentes — componentes compartilhados (fonte: 05-componentes.md)
   ============================================================ */

/* ————— barra fixa ————— */
.headera { height: 83.2px; position: relative; }
@media (max-width: 991px) { .headera { height: 92px; } }

[data-sticky-header] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  transform: translateY(0);
  transition: transform 500ms ease;
  display: flex;
  justify-content: center;
  padding-top: 16px;
}
[data-sticky-header].is-hidden { transform: translateY(-100%); }

/* HEADER-ENTRAR (17/08/2026): a barra era `width: 907px` — número copiado da régua
   da referência, quando o menu tinha menos itens e rótulos mais curtos. O nosso
   menu em PT-BR pede 919 px de conteúdo (logo 159,6 + 24 de gap + menu 735) contra
   875 px de área útil (907 − 24 − 8 de padding): 43,6 px a mais. Como todo item é
   `white-space: nowrap` (e `min-width: auto` no flex), nada encolhe — a sobra saía
   pelo lado direito e o CTA "Começar" ficava 35,6 px FORA do pill, em TODAS as
   larguras de desktop (medido em 1920/1440/1280/1024, laudo no relatório).
   A correção é tirar o número mágico: a barra passa a ser do tamanho do que ela
   carrega (`max-content`), continua limitada pela viewport e continua centrada. */
.navbara {
  width: max-content;
  max-width: calc(100vw - 48px);
  height: 51.2px;
  padding: 0 8px 0 24px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: var(--shadow-navbar);
  z-index: 12;
  display: flex;
  align-items: center;
}
.navbara__wrapper {
  width: 100%;
  min-width: 0;
  padding: 8px 0;
  display: flex;
  align-items: center;
  gap: 24px;
}
/* R-9 (laudo da conferência de 12/08): o logo precisa de alvo de toque de 44 px — o
   `min-height` de 44 com margens negativas segue valendo (a barra não cresce).
   Follow-up 15/08 (ordem do Rafael, régua sintra.ai): a ESCRITA "proagentes" estava
   desproporcional — no lockup 798×140, a imagem a 18 px deixava o wordmark com ~8 px de
   altura de capitular, contra ~18 px do wordmark da sintra (medido: .headera_logo
   58×18 com as letras ocupando o quadro inteiro). A imagem sobe para 28 px
   (wordmark ≈13 px, mesmo peso visual dos itens do menu); as margens negativas
   recalculadas devolvem ao layout a mesma pegada ((44-28)/2 = 8). */
.navbara__logo {
  display: inline-flex; align-items: center; flex: none;
  min-height: 44px; margin-top: -8px; margin-bottom: -8px;
}
.navbara__logo .logo-img { height: 28px; width: auto; display: block; }
/* o logo maior não pode pagar com quebra de linha nos itens do menu — a própria
   sintra usa nowrap no .navbara__link */
.navbara__navigation .navbara__link { white-space: nowrap; }
.navbara__logo .logo-claro { display: none; }
.navbar__menu {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1;
  min-width: 0;
  justify-content: space-between;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 19.2px;
  font-weight: 500;
  color: var(--nav-text);
}
.navbara__navigation { display: flex; align-items: center; gap: 4px; min-width: 0; }
.navbara__link {
  padding: 7px 14px;
  border-radius: var(--radius-chip);
  transition: background-color 250ms ease;
}
.navbara__link:hover { background-color: rgba(15, 23, 42, 0.06); }
.navbara__drawer_trigger {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-chip);
  cursor: pointer;
  transition: background-color 250ms ease;
}
.navbara__drawer_trigger:hover { background-color: rgba(15, 23, 42, 0.06); }
.navbara__drawer_trigger > svg { transition: transform 250ms cubic-bezier(0.33, 1, 0.68, 1); }
.navbara__drawer_trigger.open > svg { transform: rotate(180deg); }

.navbara__link.cta {
  display: inline-flex;
  align-items: center;
  height: 35.2px;
  padding: 7px 14px;
  border-radius: var(--radius-nav-cta);
  background-image: linear-gradient(rgb(15, 23, 42) 49.83%, rgb(16, 12, 82) 100%);
  border: 1px solid rgb(226, 232, 240);
  color: #fff;
  transition: background-color 250ms ease, opacity 250ms ease;
}
.navbara__link.cta:hover { background-color: rgb(51, 65, 85); }

.navbara__dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 120ms ease-in-out, transform 120ms ease-in-out;
  z-index: 40;
}
.navbara__drawer_trigger.open .navbara__dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.navbara__helper_dropdown__card {
  width: 442.7px;
  padding: 6px;
  display: grid;
  gap: 4px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgb(203, 213, 225);
  box-shadow: var(--shadow-dropdown);
}
.helpera_drawer__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-drawer-item);
  transition: background-color 250ms ease;
  color: var(--nav-text);
}
.helpera_drawer__item:hover { background-color: rgba(15, 23, 42, 0.06); }
.helpera_drawer__item .drawer-ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex: none;
}
.helpera_drawer__item small {
  display: block;
  font-weight: 400;
  color: var(--text-tertiary);
  font-size: 13px;
  line-height: 16px;
}

.navbar__burger {
  display: none;
  width: 44px;
  height: 44px;
  background: #fff;
  border: 0;
  border-radius: 12px;
  box-shadow: rgb(203, 213, 225) 0 0 0 1px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  padding: 0;
}
.navbar__burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--nav-text);
  border-radius: 2px;
}

/* Faixa estreita de desktop (992–1199): entre o último ponto em que o menu inteiro
   ainda aparece e o primeiro em que sobra espaço de verdade, a barra passaria a
   raspar no limite `calc(100vw - 48px)` — a 992 px sobram 944 e o conteúdo pede 943.
   Um px de folga não é folga (fonte de fallback antes do webfont carregar já come
   isso). Aqui os respiros encolhem em vez do CTA vazar: o conteúdo cai para ~845 px
   e a barra volta a ter margem. */
@media (min-width: 992px) and (max-width: 1199px) {
  .navbara { padding-left: 16px; }
  .navbara__wrapper { gap: 12px; }
  .navbar__menu { gap: 12px; }
  .navbara__link { padding: 7px 10px; }
  .navbara__link.cta { padding: 7px 12px; }
  .navbara__drawer_trigger { padding: 8px 10px; }
}

@media (max-width: 991px) {
  [data-sticky-header] { padding-top: 16px; }
  .navbara {
    width: calc(100vw - 48px);
    height: 60px;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    justify-content: space-between;
  }
  .navbara__wrapper { gap: 0; justify-content: space-between; }
  .navbar__menu {
    display: none;
  }
  .navbar__burger { display: flex; }
  .navbara__logo .logo-escuro { display: none; }
  .navbara__logo .logo-claro { display: block; }
  .page-light .navbara__logo .logo-escuro { display: block; }
  .page-light .navbara__logo .logo-claro { display: none; }

  /* CAROL 25/08/2026 — a barra fixa transparente sobre conteúdo rolado.
     No topo ela continua limpa (é onde o desenho a quer assim); a partir do
     primeiro respiro de rolagem ela ganha piso, e o texto da página deixa de
     atravessar a logo. Segue o tema da página: escuro por padrão, claro nas
     landings de produto. */
  .navbara { transition: background-color 180ms ease, box-shadow 180ms ease; }
  [data-sticky-header].is-rolado .navbara {
    width: calc(100vw - 32px);
    padding: 0 12px;
    border-radius: 14px;
    background: rgba(12, 12, 12, .86);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .38);
  }
  .page-light [data-sticky-header].is-rolado .navbara {
    background: rgba(255, 255, 255, .90);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
  }
}

/* menu mobile: tela cheia opaca */
.navbar__positioner {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  background: #ffffff;
}
.navbar__positioner.active { display: block; }
.navbar__mobile-nav {
  position: absolute;
  top: 96px;
  left: 50%;
  transform: translateX(-50%);
  width: 358px;
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  color: var(--nav-text);
}
.navbar__mobile-nav a { padding: 10px 12px; border-radius: 10px; }
.navbar__mobile-nav a:hover { background: rgba(15, 23, 42, 0.06); }
.navbar__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: rgb(203, 213, 225) 0 0 0 1px;
  font-size: 20px;
  color: var(--nav-text);
}

/* ————— FAQ / acordeão (05 §8) ————— */
.faq_accordion { border-bottom: 1px solid transparent; }
.faq_question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  background: none;
  border: 0;
  padding: 22px 0;
  text-align: left;
  color: inherit;
}
.faq_question h3 {
  font-size: 1.3rem;
  line-height: 1.4;
  letter-spacing: -0.03em;
  font-weight: 500;
}
.faq_icon {
  flex: none;
  width: 24px;
  height: 24px;
  transition: transform 400ms ease;
}
.faq_accordion.open .faq_icon { transform: rotate(45deg); }
.faq_answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 400ms ease;
}
.faq_answer > p { padding: 0 0 24px; }
@media (max-width: 991px) {
  .faq_question { padding: 32px 0; }
}
@media (max-width: 767px) {
  .faq_question { padding: 30px 0; }
  .faq_question h3 { font-size: 1.25rem; line-height: 1.4; max-width: 279.5px; }
}

/* ————— acordeão de passos (04 §5) ————— */
.step-dropdown {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  opacity: 0.75;
  transition: opacity var(--t-med) var(--ease-smooth), gap var(--t-slow) var(--ease-smooth);
  cursor: pointer;
}
.step-dropdown .step-num {
  font-size: 1.3rem;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.03em;
  transform-origin: left center;
  transition: font-size var(--t-slow) var(--ease-emph), transform var(--t-slow) var(--ease-emph);
  will-change: font-size, transform;
}
.step-dropdown h3 {
  font-size: 1.3rem;
  line-height: 1.4;
  letter-spacing: -0.03em;
  transition: font-size var(--t-slow) var(--ease-emph), margin-bottom var(--t-med) var(--ease-smooth);
  will-change: font-size, margin-bottom;
}
.step-dropdown p {
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  overflow: hidden;
  margin: 0;
  transition: max-height var(--t-slow) var(--ease-smooth), opacity var(--t-med) var(--ease-smooth), transform var(--t-med) var(--ease-smooth);
  will-change: max-height, opacity, transform;
}
.step-dropdown.active {
  opacity: 1;
  gap: 2rem;
}
.step-dropdown.active .step-num { font-size: 2rem; transform: translateY(-1px); }
.step-dropdown.active h3 { font-size: 2rem; margin-bottom: 0.813rem; }
.step-dropdown.active p {
  max-height: 1000px;
  opacity: 1;
  transform: translateY(0);
  overflow: visible;
}
@media (max-width: 991px) {
  .step-dropdown { gap: 1rem; }
  .step-dropdown h3, .step-dropdown .step-num { font-size: 1rem; }
  .step-dropdown.active h3 { font-size: 1.25rem; margin-bottom: 0.125rem; }
  .step-dropdown.active .step-num { font-size: 1.25rem; }
  .step-dropdown p { font-size: 0.75rem; }
}

/* ————— carrossel (05 §12, 04 §7) ————— */
.slider_component { position: relative; width: 100%; }
.slider_viewport { overflow: hidden; width: 100%; }
.slider_track {
  display: flex;
  gap: 32px;
  will-change: transform;
}
.slider_track.no-anim { transition: none !important; }
@media (max-width: 991px) { .slider_track { gap: 16px; } }
.slider_curtains { position: absolute; inset: 0; pointer-events: none; }
.slider_overlay--left, .slider_overlay--right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 200px;
  z-index: 3;
}
.slider_overlay--left  { left: 0;  background: linear-gradient(90deg, #000, transparent); }
.slider_overlay--right { right: 0; background: linear-gradient(270deg, #000, transparent); }
.slider_arrow {
  width: 56px;
  height: 56px;
  border-radius: 100%;
  border: 1px solid var(--border-dark);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 100ms ease;
  z-index: 4;
}
.slider_arrow:hover { background: rgba(255, 255, 255, 0.2); }
.slider_arrow svg { width: 40px; height: 40px; }
@media (max-width: 767px) {
  .slider_overlay--left, .slider_overlay--right { display: none; }
}

/* ————— cartão de depoimento (05 §5) ————— */
.testimonial_card {
  /* QA-sintra: os cartões são <figure> e herdavam margin 40px do UA stylesheet,
     empurrando 40px à direita e cortando a 3ª coluna (1440) e 21px no 390 */
  margin: 0;
  width: 410.7px;
  max-width: 100%;
  min-height: 281.9px;
  padding: 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ————— tabela comparativa (05 §7) ————— */
.comparison-table_wrap { width: 100%; }
.comparison-table_grid {
  display: grid;
  grid-template-columns: 28.57% repeat(5, 14.286%);
  gap: 0;
}
.comparison-table_cell {
  padding: 24px;
  min-height: 108.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.comparison-table_cell.is-label {
  justify-content: flex-start;
  padding: 24px 24px 24px 0;
}
.comparison-table_cell.is-highlight { background: var(--accent); }
.comparison-table_cell.is-top.is-highlight { border-radius: 22px 22px 0 0; }
.comparison-table_cell.is-top { font-weight: 500; }
.chk { width: 22px; height: 22px; flex: none; }
@media (max-width: 767px) {
  .comparison-table_cell { padding: 18px 4px; min-height: 110px; font-size: 0.75rem; }
  .comparison-table_cell.is-label { padding: 18px 4px 18px 0; }
}

/* ————— seletor de plano pr4 (05 §2.1) ————— */
.pr4-hero_plan-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
}
.pr4-hero_plan-option {
  min-height: 210.4px;
  padding: 24px;
  border-radius: var(--radius-plan-option);
  border: 3px solid rgb(46, 59, 82);
  background: #0d0d0d;
  color: #fff;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  transition: border-color 200ms ease, height 200ms ease;
}
.pr4-hero_plan-option.is-selected {
  border: 3px solid rgba(59, 130, 246, 0);
  background-image: linear-gradient(rgba(59, 130, 246, 0.25) 0%, rgba(59, 130, 246, 0) 100%),
    linear-gradient(0deg, rgb(48, 48, 48), rgb(24, 24, 24));
}
.pr4-hero_plan-option-radio {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  flex: none;
  position: relative;
}
.pr4-hero_plan-option.is-selected .pr4-hero_plan-option-radio { border-color: var(--accent); }
.pr4-hero_plan-option.is-selected .pr4-hero_plan-option-radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 100%;
  background: var(--accent);
}
.pr4-hero_plan-option-pricing-badge {
  display: inline-flex;
  align-items: center;
  height: 23.5px;
  padding: 1.744px 7.008px;
  background: var(--danger);
  border-radius: 7.008px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  transition: background-color 200ms ease;
}
@media (max-width: 991px) {
  .pr4-hero_plan-options { grid-template-columns: 1fr; }
  .pr4-hero_plan-option { min-height: 150px; }
}
@media (max-width: 767px) {
  .pr4-hero_plan-option { min-height: 108px; }
}

/* ————— cartão de preço pr3 (05 §6) ————— */
.pr3-hero_cards-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
}
.pr3-pricing-card_component {
  min-height: 630.4px;
  background: var(--card-dark);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pr3-pricing-card_component.is-special { border: 2px solid var(--accent); }
.pr3-pricing-card_content-top { position: relative; height: 205.3px; flex: none; }
.pr3-pricing-card_content-top .ph { position: absolute; inset: 0; border: 0; border-radius: 16px 16px 0 0; }
.pr3-pricing-card_image-overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(0deg, rgb(24, 24, 24), rgba(0, 0, 0, 0) 30%);
  pointer-events: none;
}
.pr3-pricing-card_content-bottom {
  padding: 16px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}
.pr3-pricing-card_discount {
  display: inline-flex;
  align-items: center;
  height: 24.8px;
  padding: 2px 12px;
  background: rgb(44, 44, 44);
  border-radius: 50px;
  font-size: 0.875rem;
  font-weight: 500;
  width: fit-content;
}
.pr3-pricing-card_discount.is-blue { background: var(--accent); }
.pr3-price-old {
  text-decoration: line-through;
  color: var(--text-support-dark);
}
.pr3-price-current { font-size: 3rem; line-height: 1.1; font-weight: 500; letter-spacing: -0.03em; }
.pr3-price-current small { font-size: 1.0625rem; font-weight: 400; color: var(--text-support-dark); letter-spacing: -0.02em; }
@media (max-width: 991px) {
  .pr3-hero_cards-wrapper { grid-template-columns: 1fr; }
}

/* ————— rodapé escuro (05 §11.1) ————— */
.footera {
  position: relative;
  background: #000;
  overflow: hidden;
}
.footera_wrapper {
  max-width: 1360px;
  margin: 0 auto;
  /* HOME-QA-1 item 11: a arte tem 460px ancorada no rodapé; com 360px de respiro o fim
     das colunas (Soluções, 8 links) e o bloco legal caíam DENTRO da arte — na sintra o
     conteúdo termina acima dela. 460 + 48 de folga. */
  padding: 104px 40px 508px;
  display: flex;
  flex-direction: column;
  gap: 72px;
  position: relative;
  z-index: 2;
}
.footera_email-wrap { width: 100%; max-width: 1280px; margin: 0 auto; }
.footera_email-visual {
  min-height: 122.5px;
  border-radius: 20px;
  background-image: linear-gradient(rgba(109, 68, 204, 0) 55.78%, rgb(109, 68, 204) 100%),
    radial-gradient(120% 300% at 38% 0%, rgb(93, 41, 133) 0%, rgb(16, 6, 26) 100%);
  box-shadow: var(--shadow-glass-inset);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footera_email-content {
  width: 100%;
  padding: 40px 200px 40px 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}
.footera_email-title { color: #f5f5f5; font-size: 1.3rem; line-height: 1.4; font-weight: 500; letter-spacing: -0.03em; margin-right: auto; }
.footera_email-input-wrap {
  width: 314px;
  height: 52px;
  background: var(--footer-email-field);
  border-radius: 12px;
  display: flex;
  align-items: center;
  padding: 4px;
  gap: 4px;
}
.footera_email-input {
  width: 254px;
  height: 44px;
  padding: 10px 8px 10px 14px;
  max-width: calc(100% - 52px);
  background: transparent;
  border: 0;
  color: #fff;
  font: inherit;
  font-size: 0.9375rem;
}
.footera_email-input::placeholder { color: rgba(255, 255, 255, 0.6); }
.footera_email-input:focus { outline: 1px auto rgb(16, 16, 16); }
.footera_email-submit {
  width: 44px;
  height: 44px;
  padding: 1px 6px;
  border: 0;
  border-radius: 12px;
  background: var(--footer-email-submit);
  color: rgb(15, 23, 42);
  transition: transform 300ms, opacity 300ms;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footera_content {
  display: grid;
  grid-template-columns: 294px 762px;
  justify-content: space-between;
  gap: 88px 224px;
}
.footera_about { display: flex; flex-direction: column; gap: 32px; }
.footera_logo { font-size: 24px; line-height: 24px; font-weight: 500; letter-spacing: -0.03em; color: #fff; }
.footera_columns { display: flex; flex-wrap: wrap; gap: 80px; }
.footer_link-column { display: flex; flex-direction: column; gap: 12px; min-width: 120px; }
.footer_link-column-title {
  font-size: 12px;
  line-height: 14.4px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}
.footer_link-column-link {
  color: var(--text-footer-link);
  font-size: 0.9375rem;
  line-height: 1.4;
  transition: color 300ms ease;
}
/* Conferência da Onda 1: os 16 links do rodapé mediam 21 px de altura no celular —
   empilhados, um encostado no outro. Rodapé é onde se procura "Privacidade" e "Contato"
   com o polegar, e errar o toque ali leva para a página errada, não para lugar nenhum.
   No desktop a régua é outra (mouse), então a altura só cresce onde há dedo. */
@media (max-width: 991px) {
  .footer_link-column-link { display: flex; align-items: center; min-height: 44px; }
}
.footer_link-column-link:hover { color: #fff; }
.footera_legal {
  display: flex;
  flex-direction: column;
  gap: 24px;
  color: var(--text-footer-link);
  font-size: 0.875rem;
  /* divisor antes do bloco legal, como na sintra */
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 32px;
}
.footera_visual {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 1640px;
  height: 460px;
  z-index: 1;
}
.footera_visual .ph { width: 100%; height: 100%; border: 0; }
.footera_visual_overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(rgb(0, 0, 0), rgba(0, 0, 0, 0));
  z-index: 2;
}
@media (max-width: 991px) {
  .footera_wrapper { padding: 120px 24px 280px; }
  .footera_content { display: flex; flex-direction: column; gap: 48px; }
  .footera_email-visual { flex-direction: column; border-radius: 32px; }
  .footera_email-content { padding: 24px; flex-direction: column; justify-content: center; }
  .footera_email-title { margin-right: 0; text-align: center; }
  .footera_columns { display: grid; grid-template-columns: 1fr; gap: 28px; padding-bottom: 40px; }
  /* HOME-QA-1 item 11: na sintra os links do rodapé mobile fluem em DUAS colunas
     compactas por grupo — o nosso empilhava tudo numa coluna de 44px por link e o
     rodapé virava um rolo. Toque de 44px (decisão da Onda 1) preservado. */
  .footer_link-column { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 16px; }
  .footer_link-column-title { grid-column: 1 / -1; margin-bottom: 4px; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .footera_columns { grid-template-columns: repeat(2, 1fr); gap: 80px; }
  .footera_email-visual { min-height: 260px; }
  .footera_visual { width: 100%; height: 424px; }
}
@media (max-width: 767px) {
  /* QA-sintra: no 390 a arte ficava nos 1640×460 do desktop — mais recortada que a régua
     (Sintra 390: contêiner na largura da tela × 424) e invadindo o bloco legal. Régua + respiro. */
  .footera_visual { width: 100%; height: 424px; }
  .footera_wrapper { padding-bottom: 448px; }
}

/* marquee de logotipos (04 §2) */
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-33.333%); } }
.marquee_track { display: flex; gap: 40px; width: max-content; animation: marquee 25s linear infinite; }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-13px); } }
.floaty { animation: float 3.8s ease-in-out infinite; }
.floaty.d1 { animation-delay: -1.2s; }
.floaty.d2 { animation-delay: -2.5s; }

@keyframes scrollLeft  { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
@keyframes scrollRight { 0% { transform: translateX(0); } 100% { transform: translateX(100%); } }

/* ============================================================
   nx-* — os componentes de aplicação (formulário, listas, abas)
   ============================================================
   Vieram da Edge Function `nexus-app`, onde nasceram na missão de implementação porque
   o /novo é um site de marketing e não tinha componente de formulário — input, select,
   passo-a-passo, tabela. Estavam registrados como R-8: *"criei `nx-*` no padrão dos
   outros, mas o lugar certo é assets/css/components.css"*. Onda 1, item 3: é aqui.

   Nenhum valor novo foi inventado na mudança de casa: raio, cor, espaçamento e as
   transições de 200-250 ms saem dos mesmos tokens do resto deste arquivo. Duas cópias do
   design system divergem no primeiro ajuste — agora existe uma. */

.nx-wrap { padding-top: 2rem; padding-bottom: 5rem; }
.nx-card {
  background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-soft); padding: 1.5rem;
}
.nx-card + .nx-card { margin-top: 1rem; }
.nx-grid { display: grid; gap: 1rem; }
@media (min-width: 768px) {
  .nx-grid.cols-2 { grid-template-columns: 1fr 1fr; }
  .nx-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  /* cols-4 é o medidor de consumo da Onda 5. Em duas colunas no tablet e uma no celular
     (o padrão de `.nx-grid`), porque quatro cartões de número lado a lado num telefone
     viram quatro números ilegíveis. */
  .nx-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .nx-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
}
.nx-field { display: block; margin-bottom: 1rem; }
.nx-field > span {
  display: block; font-size: .875rem; line-height: 1.25rem; color: var(--text-secondary);
  margin-bottom: .375rem; font-weight: 500;
}
.nx-field > small {
  display: block; font-size: .8125rem; line-height: 1.15rem; color: var(--text-tertiary); margin-top: .375rem;
}
.nx-input, .nx-select, .nx-textarea {
  width: 100%; padding: 11px 14px; border: 1px solid var(--border-light);
  border-radius: var(--radius-chip); background: #fff; color: var(--text-primary-light);
  font-family: inherit; font-size: 1.0625rem; line-height: 1.5rem; letter-spacing: -.02em;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.nx-input:focus, .nx-select:focus, .nx-textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
}
.nx-textarea { min-height: 88px; resize: vertical; }
.nx-passos { display: flex; flex-wrap: wrap; gap: .375rem; align-items: center; margin-bottom: 1.5rem; }
.nx-passo {
  display: inline-flex; align-items: center; gap: .5rem; padding: 6px 12px;
  border-radius: var(--radius-pill); border: 1px solid var(--border-light);
  font-size: .8125rem; color: var(--text-tertiary);
  transition: background-color 250ms ease, color 250ms ease; white-space: nowrap;
}
.nx-passo.atual { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 500; }
.nx-passo.feito { background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .35); color: #14532d; }
.nx-lista { border: 1px solid var(--border-light); border-radius: var(--radius-chip); overflow: hidden; }
.nx-lista .linha {
  display: flex; gap: .75rem; align-items: center; padding: .75rem 1rem;
  border-bottom: 1px solid var(--divider); flex-wrap: wrap;
}
.nx-lista .linha:last-child { border-bottom: 0; }
.nx-dot { width: 10px; height: 10px; border-radius: 99px; flex: none; }
.nx-tag {
  font-size: .75rem; padding: 2px 9px; border-radius: var(--radius-pill);
  background: var(--surface-light); color: var(--text-secondary);
}
.nx-tag.ok { background: rgba(34, 197, 94, .14); color: #14532d; }
.nx-tag.aviso { background: rgba(245, 158, 11, .16); color: #78350f; }
.nx-tag.falta { background: rgba(239, 68, 68, .12); color: #7f1d1d; }
.nx-tag.espera { background: rgba(59, 130, 246, .12); color: #1e3a8a; }
.nx-nota {
  border-left: 3px solid var(--border-light); padding: .25rem 0 .25rem .875rem;
  color: var(--text-tertiary); font-size: .9375rem; line-height: 1.4;
}
.nx-alerta {
  border: 1px solid rgba(245, 158, 11, .4); background: rgba(245, 158, 11, .08);
  border-radius: var(--radius-chip); padding: 1rem;
}
.nx-perigo {
  border: 1px solid rgba(239, 68, 68, .4); background: rgba(239, 68, 68, .06);
  border-radius: var(--radius-chip); padding: 1.25rem;
}
.nx-acoes { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }
.nx-acoes .button.is-ghost {
  background: transparent; color: var(--text-secondary); border-color: var(--border-light);
}
.nx-acoes .button.is-ghost:hover {
  background: var(--surface-light); border-color: var(--border-light); color: var(--text-primary-light);
}
.nx-org-chip {
  font-size: .8125rem; color: var(--text-secondary); background: var(--surface-light);
  padding: 6px 12px; border-radius: var(--radius-pill); white-space: nowrap;
  max-width: 40vw; overflow: hidden; text-overflow: ellipsis;
}
.nx-checklist { list-style: none; padding: 0; margin: 0; }
.nx-checklist li {
  display: flex; gap: .75rem; align-items: flex-start; padding: .625rem 0;
  border-bottom: 1px solid var(--divider);
}
.nx-checklist li:last-child { border-bottom: 0; }
.nx-checklist .marca { flex: none; width: 1.5rem; font-size: 1rem; line-height: 1.5rem; }
/* Combinado do go-live: a área de toque é a LINHA inteira, não o quadradinho de 13 px que
   o navegador desenha. Três caixas que erram o toque, na tela em que a dona decide ligar,
   é o pior lugar possível para um alvo pequeno. */
.nx-combinado { display: flex; gap: .75rem; align-items: flex-start; min-height: 48px; padding: .5rem 0; cursor: pointer; }
.nx-combinado input { width: 22px; height: 22px; margin-top: .125rem; flex: none; accent-color: var(--accent); }
.nx-msg { max-width: 85%; padding: 8px 12px; border-radius: 14px; margin: .375rem 0; font-size: .9375rem; line-height: 1.35; }
.nx-msg.inbound { background: var(--surface-light); margin-right: auto; border-bottom-left-radius: 4px; }
.nx-msg.outbound { background: rgba(34, 197, 94, .13); margin-left: auto; border-bottom-right-radius: 4px; }
.nx-msg small { display: block; font-size: .6875rem; color: var(--text-tertiary); margin-top: 3px; }
.nx-vazio { color: var(--text-tertiary); font-size: .9375rem; padding: 1rem 0; }
/* ── Onda 6 · NÃO LIDA ────────────────────────────────────────────────────────
   A dona do salão pediu isto com a palavra "visualmente" (áudio de 11/08/2026):
   *"a gente vai ter isso visualmente para poder saber que aquilo lá tem que ser
   respondido"*. Um rótulo cinza no fim da linha não é visual — some numa lista de dez.
   Por isso a não lida muda a LINHA inteira: faixa à esquerda, ponto cheio e nome em
   negrito. Quem passa o olho no celular vê antes de ler. */
.nx-lista .linha.nx-naolida {
  background: rgba(239, 68, 68, .05);
  box-shadow: inset 3px 0 0 0 #dc2626;
}
.nx-lista .linha.nx-naolida > b { font-weight: 600; }
.nx-marca-lida { flex: none; width: .875rem; color: var(--text-tertiary); font-size: .75rem; line-height: 1; }
.nx-naolida .nx-marca-lida { color: #dc2626; }
/* O trecho da última mensagem da cliente. Quebra em qualquer largura e nunca empurra a
   linha para os lados: rolagem horizontal no celular reprova o gate desde a Onda 1. */
.nx-trecho {
  flex: 1 1 100%; color: var(--text-tertiary); font-size: .8125rem; line-height: 1.4;
  overflow-wrap: anywhere;
}
/* O campo de valor pago, na linha do histórico da ficha. Estreito de propósito (é um
   preço, não um endereço) e com 44 px de altura, que é a régua de toque da casa. */
.nx-input.nx-preco { max-width: 7rem; min-height: 44px; }
/* Onda 3 · o "prefere que o representante preencha?" do wizard. É um <summary>, e summary
   nasce com alvo do tamanho do texto — 19 px de altura. Como ele abre a caixa em que a
   dona AUTORIZA outra pessoa a mexer na conta dela, errar o toque aqui é errar num lugar
   caro. 44 px em qualquer tela, não só no celular. */
.nx-resumo {
  display: flex; align-items: center; min-height: 44px; cursor: pointer;
  color: var(--text-secondary); font-size: .9375rem;
}
.nx-resumo:hover { color: var(--text-primary-light); }
/* ── A BARRA DE ABAS PRECISA DIZER QUE TEM MAIS ABA ── Faixa 0, 14/08/2026 ──────
   Achado no print que a Carol mandou em 13/08 as 23:03. No celular dela apareciam
   QUATRO das sete abas — Pendencias, Hoje, Agenda, Clientes — e a barra terminava
   colada na borda direita. Retorno, Relatorios e "Plano e consumo" ficavam fora da
   tela. A barra sempre rolou (o `overflow-x: auto` abaixo e antigo), mas no iOS a
   barra de rolagem so aparece enquanto se arrasta: nao havia pista nenhuma de que
   houvesse mais coisa ali.
   O preco disso nao foi estetico. No mesmo minuto ela pediu "exportar o relatorio" e
   "pagina para gerar mensagens de campanhas" — e as duas telas JA EXISTEM, dentro da
   aba Relatorios, a aba que o telefone dela nao mostrava. Ela pediu o que ja tinha,
   porque nao havia como saber que tinha.
   No celular a barra passa a QUEBRAR em linhas em vez de rolar: as sete abas cabem em
   duas ou tres linhas e nenhuma some. Custa uma linha de altura e devolve tres abas.
   Rolagem invisivel troca essa linha por uma funcionalidade que ninguem acha, e essa
   troca ja saiu cara uma vez. Acima de 767px a rolagem continua — ali as sete quase
   sempre cabem — e ganha um esmaecido na borda direita dizendo que ha continuacao. */
.nx-abas { display: flex; gap: .25rem; overflow-x: auto; padding-bottom: .5rem; margin-bottom: 1.25rem; -webkit-overflow-scrolling: touch; }
@media (min-width: 768px) {
  .nx-abas {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
  }
}
.nx-aba {
  padding: 8px 14px; border-radius: var(--radius-chip); white-space: nowrap;
  font-size: .9375rem; color: var(--text-secondary); transition: background-color 250ms ease;
}
.nx-aba:hover { background: var(--surface-light); }
.nx-aba.atual { background: rgb(15, 23, 42); color: #fff; }
.nx-kpi { font-size: 2rem; line-height: 1.1; font-weight: 500; letter-spacing: -.03em; }
.nx-kpi small {
  display: block; font-size: .8125rem; font-weight: 400; color: var(--text-tertiary);
  letter-spacing: -.01em; margin-top: .25rem;
}
.nx-barra { height: 8px; border-radius: 99px; background: var(--surface-light); overflow: hidden; margin: .5rem 0; }
.nx-barra > i { display: block; height: 100%; background: var(--accent); transition: width 400ms ease; }
/* As faixas do medidor de consumo (Onda 5). A cor acompanha a decisão 5 do Rafael —
   avisar primeiro, bloquear depois — então ela muda ANTES do fim, não no fim. O aviso
   também é textual logo abaixo da barra: cor sozinha não é acessível a quem não a
   distingue, e uma barra laranja sem frase não diz o que fazer. */
.nx-barra.alerta > i { background: #d97706; }
.nx-barra.bloqueado > i { background: #dc2626; }
@media (prefers-reduced-motion: reduce) { .nx-barra > i { transition: none; } }

/* Estado de carregando: a tela diz que está buscando, com o mesmo cinza do resto. Tela
   branca por três segundos é indistinguível de tela quebrada. */
.nx-carregando { color: var(--text-tertiary); font-size: .9375rem; padding: 2rem 0; display: flex; align-items: center; gap: .625rem; }
.nx-carregando::before {
  content: ""; width: 16px; height: 16px; flex: none; border-radius: 99px;
  border: 2px solid var(--border-light); border-top-color: var(--accent); animation: nx-girando 800ms linear infinite;
}
@keyframes nx-girando { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .nx-carregando::before { animation: none; } }

@media (max-width: 767px) {
  .nx-card { padding: 1.125rem; border-radius: 12px; }
  .nx-passos { gap: .25rem; }
  /* 44 px de altura mínima em TUDO que se toca. O laudo da conferência mediu os chips de
     passo em 24x36 e as abas em 36 — tamanho de mouse, não de polegar. Numa tela que a
     dona do salão vai usar com a mão no cabelo de alguém, alvo pequeno não é detalhe de
     acabamento: é o toque que erra e volta um passo. */
  /* A conferência da Onda 1 achou o outro lado do mesmo alvo: com o rótulo escondido no
     celular, o chip fica só com o número e mede 28 px de LARGURA. Altura de 44 com
     largura de 28 não é alvo de 44 — é uma tira. `min-width` fecha a conta. */
  .nx-passo {
    padding: 5px 11px; font-size: .75rem;
    min-height: 44px; min-width: 44px; justify-content: center;
  }
  .nx-passo span.rot { display: none; }
  /* Ver o comentario longo em `.nx-abas`: no celular a barra quebra, nao rola. */
  .nx-abas { flex-wrap: wrap; overflow-x: visible; }
  .nx-aba { min-height: 44px; display: inline-flex; align-items: center; }
  /* ── OS TRES ZEROS QUE COMIAM A PRIMEIRA TELA ── Faixa 0, 14/08/2026 ──────────
     No mesmo print de 13/08, a aba Hoje mostrava "0 agendamentos", "2 mensagens" e
     "0 ja atendidas" como tres cartoes de LARGURA INTEIRA, um debaixo do outro, cada
     um com um numero de 2rem. Os tres ocupavam a dobra inteira e empurravam "Agenda
     de hoje" — o conteudo de verdade da aba — para fora da tela.
     A causa: `.nx-grid.cols-3` so vira grade a partir de 768px; abaixo disso cai no
     padrao de uma coluna. Isso esta CERTO para os `cols-3` que carregam formulario
     (passo 2 e 3 do wizard, a caixa de travar agenda): dois campos de texto lado a
     lado num telefone e pior do que um embaixo do outro.
     Por isso a regra nao mira a grade — mira o que tem KPI dentro dela. Numero curto
     em meia largura continua legivel; campo de formulario nao entra na conta. Onde o
     `:has()` nao existir, nada acontece e o comportamento e o de hoje. */
  .nx-grid.cols-3:has(.nx-kpi),
  .nx-grid.cols-4:has(.nx-kpi) { grid-template-columns: 1fr 1fr; }
  .nx-grid:has(.nx-kpi) .nx-card { padding: .875rem; }
  .nx-grid:has(.nx-kpi) .nx-kpi { font-size: 1.625rem; }
  .nx-acoes .button { flex: 1 1 100%; justify-content: center; min-height: 48px; }
  .nx-org-chip { max-width: 34vw; }
  .nx-input, .nx-select, .nx-textarea { min-height: 48px; font-size: 16px; }
  /* Linha de lista que é um LINK (a lista de contas do admin, Onda 2): o texto tem 24 px
     de altura e a linha inteira é o que a pessoa mira com o polegar. Sem isto, cada conta
     da lista é um alvo de 24 px — e a lista de contas é justamente a tela onde se toca
     mais. `flex` com altura mínima faz o alvo virar a linha, que é o que o olho já
     entende como clicável. */
  .nx-lista .linha > b > a,
  .nx-lista .linha > a {
    display: flex; align-items: center; min-height: 44px;
  }
}

/* ============================================================
   REVISAO-SINTRA (26/08/2026) — depoimentos no formato review
   (M14 do catálogo: título + 5 estrelas + citação + autor)
   ============================================================ */
.testimonial_titulo { font-size: 1.0625rem; line-height: 1.35; letter-spacing: -0.02em; font-weight: 600; }
.estrelas { display: inline-flex; gap: 3px; }
.estrelas svg { width: 17px; height: 17px; display: block; fill: #22c55e; }
.testimonial_inicial {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: 1.0625rem;
}

/* mural da home: cartão claro sobre o preto, como na referência */
.section_home-testimonials .testimonial_card { background: #fff; box-shadow: var(--shadow-card-soft); }
.section_home-testimonials .testimonial_titulo { color: #171717; }
.section_home-testimonials .testimonial_quote { color: rgba(0, 0, 0, 0.78); }
.section_home-testimonials .testimonial_nome { color: #171717; }
.section_home-testimonials .testimonial_cargo { color: rgba(0, 0, 0, 0.55); }
.section_home-testimonials .testimonial_cidade { color: rgba(0, 0, 0, 0.4); }
/* colunas defasadas (masonry da referência) */
@media (min-width: 992px) {
  .home-testimonials_grid > .testimonial_card:nth-child(3n+2) { margin-top: 48px; }
}

/* depoimentos das páginas de produto (seção clara) */
.section_helper-lp-testimonials .testimonial_titulo { color: #171717; }
.section_helper-lp-testimonials .testimonial_quote { color: rgba(0, 0, 0, 0.75); }
.section_helper-lp-testimonials .testimonial_nome { color: #171717; }
.section_helper-lp-testimonials .testimonial_cargo { color: rgba(0, 0, 0, 0.55); }
.section_helper-lp-testimonials .testimonial_cidade { color: rgba(0, 0, 0, 0.4); }
.section_helper-lp-testimonials .testimonial_card { min-height: 0; width: auto; }

/* base do conteúdo do depoimento — compartilhada (antes vivia só no home.css,
   e as páginas de produto não carregam home.css) */
.testimonial_produto { font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: #3b82f6; }
.testimonial_quote { margin: 0; font-size: 1rem; line-height: 1.5; flex: 1; }
.testimonial_autor { display: flex; align-items: center; gap: 12px; margin: 0; min-width: 0; }
.testimonial_meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.testimonial_nome { font-size: .9375rem; font-weight: 500; overflow-wrap: anywhere; }
.testimonial_cargo { font-size: .8125rem; overflow-wrap: anywhere; }
.testimonial_cidade { font-size: .75rem; }
.mockup-aviso { margin: 0 0 20px; padding: 10px 16px; border-radius: 10px; font-size: .8125rem; line-height: 1.4;
  background: rgba(245, 158, 11, .14); border: 1px solid rgba(245, 158, 11, .5); color: #b45309; }
.section_home-testimonials .mockup-aviso { color: #fbbf24; }