/* Ajustes do site estático gerado por build.py. O CSS base é o compilado do
   export Next (Tailwind); aqui ficam apenas regras novas. */

/* A faixa do Ecossistema vem no HTML e aparece já na primeira pintura. Antes
   ela ficava invisível até o runtime adicionar .is-ready, depois do load. */
html .tf-ecosystem-band { opacity: 1; transform: none; }

/* Utilitários usados por blocos novos e ausentes no Tailwind compilado. */
.mb-12 { margin-bottom: calc(var(--spacing) * 12); }
.text-h6 { font-family: var(--font-display); font-size: 1rem; font-weight: 600; line-height: 1.5; }
@media (min-width: 48rem) {
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Tabela de dados que acompanha gráficos (alternativa acessível ao SVG). */
.tf-data-table th { text-align: left; font-weight: 600; }
.tf-data-table th, .tf-data-table td { padding: 0.375rem 1rem 0.375rem 0; }
.tf-data-table tbody tr + tr { border-top: 1px solid var(--color-border); }

/* Botão "Preferências de cookies" no rodapé, com aparência de link. */
[data-tf-cookie-open] { cursor: pointer; text-align: left; background: none; border: 0; padding: 0; }

/* Página comercial do CRM Tech Fernandes. Todos os seletores ficam isolados
   para preservar a aparência das páginas estáticas existentes. */
.crm-page { color: var(--color-text-primary); background: var(--color-background-primary); }
.crm-page h1, .crm-page h2, .crm-page h3, .crm-home-callout h2 { font-family: var(--font-display); }
.crm-hero { overflow: hidden; color: var(--color-white); background: var(--color-navy-900); }
.crm-hero__inner { display: grid; align-items: center; gap: clamp(2.5rem, 6vw, 5rem); padding-block: clamp(3.5rem, 5vw, 5rem); }
.crm-hero__copy { max-width: 38rem; }
.crm-kicker { margin: 0 0 1rem; color: var(--color-mint-400); font-family: var(--font-body); font-size: .8125rem; font-weight: 600; letter-spacing: .08em; }
.crm-kicker--blue { color: var(--color-blue-700); }
.crm-display { max-width: 16ch; margin: 0; color: var(--color-white); font-size: clamp(2.5rem, 4.4vw, 3.6rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.04; text-wrap: balance; }
.crm-lead { max-width: 39rem; margin: 1.5rem 0 0; color: var(--color-gray-300); font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.65; }
.crm-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.crm-button { display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--radius-medium); padding: .875rem 1.25rem; font-family: var(--font-body); font-size: .9375rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; transition: background-color var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast); }
.crm-button:focus-visible, .crm-home-callout__link:focus-visible, .crm-faq summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.crm-button--primary { color: var(--color-white); background: var(--color-blue-600); }
.crm-button--primary:hover { background: var(--color-blue-700); }
.crm-button--quiet { border-color: var(--color-navy-600); color: var(--color-white); background: transparent; }
.crm-button--quiet:hover { background: var(--color-navy-800); }
.crm-note { max-width: 34rem; margin: 1rem 0 0; color: var(--color-gray-300); font-size: .8125rem; line-height: 1.55; }
.crm-demo { min-width: 0; overflow: hidden; border: 1px solid var(--color-navy-700); border-radius: var(--radius-large); color: var(--color-gray-900); background: var(--color-gray-50); box-shadow: var(--shadow-lg); }
.crm-demo__top, .crm-demo__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; }
.crm-demo__top { border-bottom: 1px solid var(--color-gray-200); background: var(--color-white); }
.crm-demo__brand, .crm-demo__user { display: inline-flex; align-items: center; gap: .6rem; font-size: .875rem; font-weight: 700; }
.crm-mark { width: 1.1rem; height: 1.1rem; border-radius: 35% 50% 35% 50%; background: var(--color-blue-600); box-shadow: .38rem .22rem 0 -0.12rem var(--color-mint-600); }
.crm-demo__label { margin-left: .3rem; border-radius: var(--radius-full); padding: .25rem .45rem; color: var(--color-mint-800); background: var(--color-mint-100); font-size: .5625rem; letter-spacing: .03em; }
.crm-avatar { display: inline-grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; border-radius: 50%; color: var(--color-white); font-size: .6875rem; font-weight: 700; }
.crm-avatar--user { color: var(--color-navy-900); background: var(--color-gray-200); }
.crm-avatar--blue { background: var(--color-blue-600); }
.crm-avatar--mint { color: var(--color-navy-900); background: var(--color-mint-500); }
.crm-avatar--navy { background: var(--color-navy-700); }
.crm-demo__toolbar { align-items: end; padding-block: 1.25rem; }
.crm-demo__eyebrow { margin: 0 0 .25rem; color: var(--color-gray-500); font-size: .6875rem; }
.crm-demo__toolbar h2 { margin: 0; font-size: 1.1rem; font-weight: 700; }
.crm-demo__filter { border: 1px solid var(--color-gray-200); border-radius: var(--radius-small); padding: .5rem .65rem; color: var(--color-gray-600); background: var(--color-white); font-size: .6875rem; white-space: nowrap; }
.crm-board { display: grid; gap: .75rem; padding: 0 1.25rem 1rem; }
.crm-lane { min-width: 0; }
.crm-lane > h3 { display: flex; align-items: center; gap: .45rem; margin: 0 0 .5rem; color: var(--color-gray-700); font-family: var(--font-body); font-size: .7rem; font-weight: 700; }
.crm-lane > h3 > span:last-child { margin-left: auto; border-radius: var(--radius-full); padding: .08rem .4rem; color: var(--color-gray-600); background: var(--color-gray-200); font-size: .625rem; }
.crm-lane__dot, .crm-status-dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--color-blue-600); }
.crm-lane--new .crm-lane__dot { background: var(--color-blue-600); }
.crm-lane--qualified .crm-lane__dot { background: var(--color-mint-700); }
.crm-lane--human .crm-lane__dot { background: var(--color-navy-700); }
.crm-contact { border: 1px solid var(--color-gray-200); border-left: 3px solid var(--color-blue-600); border-radius: var(--radius-small); padding: .75rem; background: var(--color-white); }
.crm-lane--qualified .crm-contact { border-left-color: var(--color-mint-600); }
.crm-lane--human .crm-contact { border-left-color: var(--color-navy-600); }
.crm-contact__head { display: flex; align-items: center; gap: .55rem; }
.crm-contact__head > div { min-width: 0; display: grid; gap: .1rem; }
.crm-contact__head strong { overflow: hidden; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.crm-contact__head small { overflow: hidden; color: var(--color-gray-500); font-size: .625rem; text-overflow: ellipsis; white-space: nowrap; }
.crm-time { margin-left: auto; align-self: start; color: var(--color-gray-500); font-size: .5625rem; white-space: nowrap; }
.crm-contact > p { margin: .65rem 0; color: var(--color-gray-700); font-size: .6875rem; line-height: 1.5; }
.crm-contact__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem; color: var(--color-gray-500); font-size: .5625rem; }
.crm-channel, .crm-followup { display: inline-flex; align-items: center; gap: .25rem; color: var(--color-mint-800); font-weight: 600; }
.crm-followup { border-radius: var(--radius-full); padding: .18rem .4rem; background: var(--color-mint-100); }
.crm-contact--compact { margin-bottom: .55rem; }
.crm-contact--compact .crm-contact__foot { margin: .55rem 0 0 2.55rem; }
.crm-demo__human { display: flex; align-items: center; gap: .5rem; border: 1px dashed var(--color-gray-300); border-radius: var(--radius-small); padding: .5rem; color: var(--color-gray-600); background: var(--color-white); }
.crm-human-icon { display: grid; width: 1.5rem; height: 1.5rem; flex: 0 0 auto; place-items: center; border-radius: 50%; color: var(--color-blue-700); background: var(--color-blue-100); }
.crm-demo__human p { margin: 0; font-size: .625rem; line-height: 1.45; }
.crm-demo__human strong { color: var(--color-gray-800); }
.crm-demo__caption { display: flex; align-items: center; gap: .5rem; border-top: 1px solid var(--color-gray-200); padding: .75rem 1.25rem; color: var(--color-gray-600); background: var(--color-white); font-size: .6875rem; line-height: 1.4; }
.crm-status-dot { flex: 0 0 auto; background: var(--color-mint-700); }
.crm-section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.crm-section--paper { background: var(--color-gray-50); }
.crm-section--white { background: var(--color-white); }
.crm-section--night { color: var(--color-white); background: var(--color-navy-900); }
.crm-section--night h2, .crm-final-cta h2, .crm-home-callout h2 { color: var(--color-white); }
.crm-section__intro { max-width: 46rem; }
.crm-section__intro h2, .crm-final-cta h2 { margin: 0; font-size: clamp(1.8rem, 3.4vw, 2.75rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.12; text-wrap: balance; }
.crm-section__intro > p:last-child { max-width: 42rem; margin: 1rem 0 0; color: var(--color-gray-600); font-size: 1.0625rem; line-height: 1.65; }
.crm-section--night .crm-section__intro > p:last-child { color: var(--color-gray-300); }
.crm-journey { display: grid; gap: 1.5rem; margin: 3rem 0 0; padding: 0; list-style: none; }
.crm-journey li { position: relative; min-width: 0; border-top: 2px solid var(--color-gray-200); padding: 1.25rem 0 0; }
.crm-journey li::before { position: absolute; top: -2px; left: 0; width: 2rem; height: 2px; background: var(--color-mint-600); content: ""; }
.crm-journey__icon { display: grid; width: 2.5rem; height: 2.5rem; margin-bottom: 1rem; place-items: center; border-radius: var(--radius-medium); color: var(--color-blue-700); background: var(--color-blue-100); font-size: 1.1rem; }
.crm-journey h3, .crm-rollout h3, .crm-core h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.crm-journey p, .crm-rollout p, .crm-core p { margin: .5rem 0 0; color: var(--color-gray-600); font-size: .9375rem; line-height: 1.55; }
.crm-caveat { max-width: 58rem; margin: 2rem 0 0; color: var(--color-gray-600); font-size: .8125rem; line-height: 1.6; }
.crm-core { display: grid; gap: 2.5rem; }
.crm-core__details { border-top: 1px solid var(--color-gray-200); }
.crm-core__row { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; border-bottom: 1px solid var(--color-gray-200); padding: 1.2rem 0; }
.crm-core__number { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; color: var(--color-blue-700); background: var(--color-blue-100); font-size: .75rem; font-weight: 700; }
.crm-rollout { display: grid; gap: 2.5rem; }
.crm-rollout__steps { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.crm-rollout__steps li { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; border-top: 1px solid var(--color-navy-700); padding-top: 1.1rem; }
.crm-rollout__steps li > span { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; color: var(--color-navy-900); background: var(--color-mint-400); font-weight: 700; }
.crm-rollout h3 { color: var(--color-white); }
.crm-rollout p { color: var(--color-gray-300); }
.crm-investment { max-width: 58rem; }
.crm-investment__list { margin-top: 2.5rem; border-top: 1px solid var(--color-gray-200); }
.crm-investment__list > p { display: grid; grid-template-columns: 2.5rem minmax(8rem, .75fr) 1.5fr; gap: 1rem; align-items: baseline; margin: 0; border-bottom: 1px solid var(--color-gray-200); padding: 1.2rem 0; }
.crm-investment__list > p > span { color: var(--color-blue-700); font-size: .75rem; font-weight: 700; }
.crm-investment__list strong { font-size: 1rem; }
.crm-investment__list small { color: var(--color-gray-600); font-size: .875rem; line-height: 1.5; }
.crm-investment > .crm-button { margin-top: 1.5rem; }
.crm-faq { display: grid; gap: 2rem; }
.crm-faq__items { border-top: 1px solid var(--color-gray-200); }
.crm-faq details { border-bottom: 1px solid var(--color-gray-200); }
.crm-faq summary { display: flex; min-height: 3.75rem; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 0; cursor: pointer; font-family: var(--font-display); font-weight: 600; list-style: none; }
.crm-faq summary::-webkit-details-marker { display: none; }
.crm-faq summary span { color: var(--color-blue-700); font-size: 1.4rem; transition: transform var(--duration-fast); }
.crm-faq details[open] summary span { transform: rotate(45deg); }
.crm-faq details > p { max-width: 48rem; margin: 0; padding: 0 2rem 1.1rem 0; color: var(--color-gray-600); font-size: .9375rem; line-height: 1.65; }
.crm-final-cta { padding-block: clamp(3.5rem, 7vw, 6rem); color: var(--color-white); background: var(--color-navy-800); }
.crm-final-cta .container-tf { max-width: 58rem; }
.crm-final-cta h2 { max-width: 15ch; }
.crm-final-cta p:not(.crm-kicker) { max-width: 42rem; margin: 1rem 0 1.5rem; color: var(--color-gray-300); line-height: 1.6; }
.crm-button--light { color: var(--color-navy-900); background: var(--color-mint-400); }
.crm-button--light:hover { background: var(--color-mint-300); }
.crm-home-callout { padding-block: clamp(2.5rem, 5vw, 4rem); color: var(--color-white); background: var(--color-navy-800); }
.crm-home-callout__inner { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.crm-home-callout .crm-kicker { margin-bottom: .6rem; }
.crm-home-callout h2 { max-width: 28ch; margin: 0; font-size: clamp(1.4rem, 2.5vw, 2rem); line-height: 1.2; }
.crm-home-callout p:not(.crm-kicker) { max-width: 42rem; margin: .7rem 0 0; color: var(--color-gray-300); line-height: 1.55; }
.crm-home-callout__link { display: inline-flex; min-height: 2.75rem; flex: 0 0 auto; align-items: center; gap: .6rem; border-bottom: 1px solid var(--color-mint-400); color: var(--color-white); font-weight: 600; text-decoration: none; }
.crm-home-callout__link:hover { color: var(--color-mint-300); }
@media (min-width: 48rem) {
  .crm-hero__inner { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); }
  .crm-board { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .crm-journey { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
  .crm-core, .crm-rollout, .crm-faq { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
  .crm-rollout__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
}
@media (max-width: 39.99rem) {
  .crm-demo__top, .crm-demo__toolbar { padding-inline: .8rem; }
  .crm-demo__label { display: none; }
  .crm-demo__filter { font-size: .625rem; }
  .crm-board { padding-inline: .8rem; }
  .crm-demo__caption { align-items: flex-start; padding-inline: .8rem; }
  .crm-investment__list > p { grid-template-columns: 2rem 1fr; gap: .3rem .75rem; }
  .crm-investment__list small { grid-column: 2; }
  .crm-home-callout__inner { align-items: flex-start; flex-direction: column; gap: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .crm-page *, .crm-page *::before, .crm-home-callout * { scroll-behavior: auto; transition-duration: .01ms; }
}

/* Search tools preserve the complete server-rendered content when JS is absent. */
.tf-search { margin: 1.5rem 0; color: var(--color-text-primary); }
.tf-search > label { display: block; margin-bottom: .5rem; font-weight: 600; }
.tf-search__row { display: flex; flex-wrap: wrap; gap: .6rem; }
.tf-search input { min-width: 0; flex: 1 1 16rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-medium); padding: .8rem 1rem; background: var(--color-surface); font: inherit; color: var(--color-text-primary); }
.tf-search button { min-height: 2.75rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-medium); padding: .65rem .9rem; background: var(--color-surface); color: var(--color-action-primary); font-weight: 600; cursor: pointer; }
.tf-search > p { margin-top: .5rem; color: var(--color-text-secondary); font-size: .875rem; }
[data-tf-filter-hidden] { display: none !important; }
.tf-search input:focus-visible, .tf-search button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

/* A fictional record can now be inspected without leaving the product page. */
.crm-contact[role="button"] { cursor: pointer; transition: border-color var(--duration-fast); }
.crm-contact[role="button"]:hover { border-color: var(--color-blue-600); }
.crm-contact[role="button"]:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.crm-contact__open { display: block; margin-top: .8rem; color: var(--color-blue-700); font-size: .75rem; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.crm-detail { width: min(34rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; margin: auto; border: 1px solid var(--color-border); border-radius: var(--radius-large); padding: clamp(1.25rem, 4vw, 2rem); color: var(--color-text-primary); background: var(--color-surface); box-shadow: var(--shadow-lg); }
.crm-detail::backdrop { background: rgb(10 22 40 / 65%); }
.crm-detail__close { display: block; min-height: 2.75rem; margin: 0 0 1.5rem auto; border: 1px solid var(--color-border-strong); border-radius: var(--radius-medium); padding: .6rem .9rem; color: var(--color-action-primary); background: var(--color-surface); font-weight: 600; cursor: pointer; }
.crm-detail__badge { margin: 0 0 .7rem; color: var(--color-mint-800); font-size: .8125rem; font-weight: 600; }
.crm-detail h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.2; }
.crm-detail__company { margin-top: .5rem; color: var(--color-text-secondary); }
.crm-detail__message { margin-top: 1.5rem; border-left: 3px solid var(--color-mint-600); padding-left: 1rem; line-height: 1.7; }
.crm-detail__state { margin-top: 1.5rem; font-weight: 600; }
.crm-detail__note { margin-top: 1.25rem; border-top: 1px solid var(--color-border); padding-top: 1rem; color: var(--color-text-secondary); font-size: .875rem; line-height: 1.6; }

.crm-fit { background: var(--color-gray-50); }
.crm-fit__inner { display: grid; gap: 2rem; }
.crm-fit__controls { min-width: 0; border: 1px solid var(--color-border); border-radius: var(--radius-large); padding: clamp(1.25rem, 3vw, 2rem); background: var(--color-surface); }
.crm-fit__field { display: grid; gap: .5rem; margin-bottom: 1.25rem; }
.crm-fit label { font-weight: 600; }
.crm-fit select { width: 100%; min-width: 0; min-height: 2.75rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-medium); padding: .7rem .8rem; color: var(--color-text-primary); background: var(--color-surface); font: inherit; }
.crm-fit__draft { margin: 1.5rem 0; border-left: 3px solid var(--color-blue-600); padding-left: 1rem; color: var(--color-text-secondary); line-height: 1.65; overflow-wrap: anywhere; }
.crm-fit__status { margin: .8rem 0 0; color: var(--color-text-secondary); font-size: .8125rem; }
.crm-fit select:focus-visible, .crm-detail button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.crm-section-nav { position: sticky; top: var(--header-height); z-index: 20; border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.crm-section-nav__inner { display: flex; gap: .3rem; overflow-x: auto; overscroll-behavior-inline: contain; padding-block: .5rem; }
.crm-section-nav a { display: inline-flex; min-height: 2.5rem; flex: 0 0 auto; align-items: center; border: 1px solid transparent; border-radius: var(--radius-medium); padding: .5rem .7rem; color: var(--color-text-secondary); font-size: .8125rem; font-weight: 600; text-decoration: none; }
.crm-section-nav a:hover, .crm-section-nav a[aria-current="location"] { color: var(--color-blue-700); background: var(--color-blue-100); }
.crm-section-nav a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }
@media (min-width: 48rem) { .crm-fit__inner { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; } }

/* M16: anchor destinations stay visible below the sticky navigation. */
main [id] { scroll-margin-top: calc(var(--header-height) + 1.25rem); }
.crm-page [id] { scroll-margin-top: calc(var(--header-height) + 4.5rem); }
/* M18: small CRM labels remain readable alongside the record details. */
.crm-contact__foot, .crm-time, .crm-demo__label { font-size: .6875rem; }
/* M17: the fictional status remains visible on mobile as well as desktop. */
@media (max-width: 39.99rem) {
  .crm-demo__top, .crm-demo__brand { flex-wrap: wrap; }
  .crm-demo__label { display: inline-flex; margin-left: 0; }
  .crm-demo__top { row-gap: .6rem; }
}
/* M19: keyboard focus and current-location cues survive system contrast modes. */
@media (forced-colors: active) {
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, [role="button"]:focus-visible { outline: 2px solid Highlight !important; outline-offset: 3px; }
  [aria-current="page"], [aria-current="location"] { text-decoration: underline; }
}
/* M20: the published floating button uses this class (the base rule was outdated). */
@media print { .whatsapp-flutuante, .tf-search, .crm-contact__open, .crm-fit { display: none !important; } }
