/**



 * PromoClicks — Estilos Globais, Layouts e Componentes Modulares



 * Arquitetura multipáginas mobile-first, acessível (WCAG 2.2 AA) e 100% responsiva em todas as resoluções (320px a 1920px).



 */







@import url("./tokens.css");







/* 1. Reset e Box Model Universal */



*, *::before, *::after {



  box-sizing: border-box;



}







html {



  font-size: 16px;



  scroll-behavior: smooth;



  scroll-padding-top: calc(var(--header-height) + 16px);



  -webkit-text-size-adjust: 100%;



  max-width: 100%;



  overflow-x: hidden;



}







body {



  margin: 0;



  width: 100%;



  max-width: 100%;



  overflow-x: hidden;



  background-color: var(--pc-white);



  color: var(--pc-text-primary);



  font-family: var(--font-body);



  font-size: var(--text-base);



  line-height: 1.65;



  -webkit-font-smoothing: antialiased;



  position: relative;



  padding-top: var(--header-height);
}







small, sub, sup {



  font-size: 1rem;



}







/* PromoClicks Brand Wordmark Styling (Preto & Laranja) */



.brand-name {



  display: inline;



  font-weight: inherit;



  white-space: nowrap;



}



.brand-promo {



  color: inherit;



}



.surface-light .brand-promo,



.card:not(.card--dark) .brand-promo,



.surface-cream .brand-promo,



.surface-warm .brand-promo,



.bg-light .brand-promo {



  color: #141414;



}



.brand-clicks {



  color: var(--pc-orange);



  font-weight: inherit;



}

.surface-light .brand-clicks,
.card:not(.card--dark) .brand-clicks,
.surface-cream .brand-clicks,
.surface-warm .brand-clicks,
.bg-light .brand-clicks {
  color: #C23B00;
}







::selection {



  background-color: var(--pc-orange);



  color: var(--pc-black);



}







img {
  max-width: 100%;
  height: auto;
  display: block;
}

svg {
  max-width: 100%;
  display: block;
  flex-shrink: 0;
}







picture {



  display: block;



  width: 100%;



  max-width: 100%;



  min-width: 0;



}











a {



  color: inherit;



  text-decoration: none;



  transition: color 0.2s var(--ease-out);



}







button, input, select, textarea {



  font: inherit;



  color: inherit;



  max-width: 100%;



}







button {



  cursor: pointer;



}







[hidden] {



  display: none !important;



}







/* Prevenção universal de corte e estouro de texto */



h1, h2, h3, h4, h5, h6, p, span, a, li, label, strong, b, summary, td, th {



  overflow-wrap: break-word;



  word-wrap: break-word;



}







/* Acessibilidade: foco visível */



:focus-visible {



  outline: 3px solid var(--pc-orange);



  outline-offset: 3px;



}







.skip-link {



  position: absolute;



  left: -9999px;



  top: 14px;



  z-index: 9999;



  background: var(--pc-black);



  color: var(--pc-white);



  padding: 12px 20px;



  border-radius: var(--radius-sm);



  font-weight: 700;



  font-size: var(--text-sm);



  border: 2px solid var(--pc-orange);



}







.skip-link:focus {



  left: 16px;



}







/* 2. Containers e Seções Estruturais */



.container {
  width: 100%;
  max-width: var(--container-max);
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}







.section {



  padding: var(--section-py) 0;



  position: relative;



  width: 100%;



}







.surface-light {



  background-color: var(--pc-white);



}







.surface-warm {



  background-color: var(--pc-surface-cream);



  border-top: 1px solid var(--pc-border-light);



  border-bottom: 1px solid var(--pc-border-light);



}







.surface-dark {



  background: var(--pc-gradient-dark);



  color: var(--pc-text-on-dark);



  position: relative;



  isolation: isolate;



  overflow: hidden;



}







.surface-dark::before {



  content: "";



  position: absolute;



  inset: 0;



  background: radial-gradient(circle at 92% 12%, rgba(255, 145, 77, 0.18), transparent 34%);



  z-index: -1;



  pointer-events: none;



}







.surface-dark p,



.surface-dark .lead {



  color: var(--pc-text-on-dark-muted);



}







.surface-dark strong {



  color: var(--pc-white);



}







/* Legados das seções */



.section--cream {



  background-color: var(--pc-surface-cream);



  border-top: 1px solid var(--pc-border-light);



  border-bottom: 1px solid var(--pc-border-light);



}



.section--dark {



  background: var(--pc-gradient-dark);



  color: var(--pc-text-on-dark);



}



.section--charcoal {



  background-color: var(--pc-charcoal);



  color: var(--pc-white);



}







/* 3. Tipografia Semântica */



h1, h2, h3, h4 {



  font-family: var(--font-display);



  margin-top: 0;



  line-height: 1.12;



  letter-spacing: -0.025em;



  color: inherit;



}







h1 {



  font-size: var(--text-hero);



  font-weight: 900;



  margin-bottom: 1.15rem;



}







h2 {



  font-size: var(--text-3xl);



  font-weight: 800;



  margin-bottom: 1rem;



}







h3 {



  font-size: var(--text-xl);



  font-weight: 800;



  margin-bottom: 0.65rem;



}







p {



  margin-top: 0;



  margin-bottom: 1.15rem;



}







.lead {



  font-size: var(--text-md);



  line-height: 1.75;



  color: var(--pc-text-muted);



  max-width: 65ch;



  margin-bottom: 1.75rem;



}







.section-lede {



  font-size: var(--text-md);



  color: var(--pc-text-muted);



  max-width: 68ch;



  line-height: 1.75;



}







.section--dark .section-lede {



  color: var(--pc-text-on-dark-muted);



}







.text-gradient {



  background: var(--pc-gradient);



  -webkit-background-clip: text;



  background-clip: text;



  color: transparent;



}







.eyebrow {



  display: inline-flex;



  align-items: center;



  gap: 8px;



  text-transform: uppercase;



  letter-spacing: 0.12em;



  font-size: var(--text-xs);



  font-weight: 800;



  color: #C41C1C;



  margin-bottom: 0.75rem;



  line-height: 1.3;



}







.eyebrow::before {



  content: "";



  width: 20px;



  height: 5px;



  border-radius: var(--radius-pill);



  background: var(--pc-gradient);



  flex-shrink: 0;



}







.eyebrow--light,



.surface-dark .eyebrow,



.hero-section .eyebrow,



.page-hero .eyebrow {



  color: var(--pc-orange);



}







/* 4. Botões e CTAs */



.btn {



  display: inline-flex;



  align-items: center;



  justify-content: center;



  gap: 8px;



  min-height: 50px;



  padding: 12px 22px;



  border-radius: 12px;



  border: 1px solid transparent;



  font-family: var(--font-body);



  font-weight: 700;



  font-size: var(--text-sm);



  line-height: 1.3;



  text-align: center;



  white-space: normal;



  max-width: 100%;



  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), background 0.2s var(--ease-out), border-color 0.2s var(--ease-out);



}







.btn:hover {



  transform: translateY(-2px);



}







.btn:active {



  transform: translateY(0);



}







.btn[disabled] {



  opacity: 0.55;



  cursor: not-allowed;



  transform: none;



}







.btn--primary {



  background-color: #C41C1C;
  background: var(--pc-gradient);



  color: var(--pc-white);



  box-shadow: var(--shadow-cta);



}







.btn--primary:hover {



  background: var(--pc-gradient-hover);



  box-shadow: 0 16px 32px rgba(255, 49, 49, 0.32);



  color: var(--pc-white);



}







.btn--secondary,



.btn--light-outline {



  background-color: rgba(255, 255, 255, 0.08);



  border-color: rgba(255, 255, 255, 0.3);



  color: var(--pc-white);



}







.btn--secondary:hover,



.btn--light-outline:hover {



  background-color: rgba(255, 255, 255, 0.16);



  border-color: var(--pc-orange);



  color: var(--pc-white);



}







.btn--dark {



  background-color: var(--pc-ink);



  color: var(--pc-white);



}







.btn--dark:hover {



  background-color: var(--pc-charcoal);



  box-shadow: var(--shadow-sm);



}







.btn--outline {



  background-color: var(--pc-white);



  border-color: #D8D0C9;



  color: var(--pc-ink);



}







.btn--outline:hover {



  border-color: var(--pc-red);



  color: var(--pc-red);



}







.card--featured .btn--outline {



  background-color: transparent;



  border-color: rgba(255, 255, 255, 0.35);



  color: var(--pc-white);



}







.card--featured .btn--outline:hover {



  border-color: var(--pc-orange);



  color: var(--pc-orange);



}







.btn--full {



  width: 100%;



}











.link-arrow,



.card-link {



  display: inline-flex;



  align-items: center;



  gap: 8px;



  font-weight: 700;



  font-size: var(--text-sm);



  color: #C41C1C;



  transition: gap 0.2s var(--ease-out), color 0.2s var(--ease-out);



}







.link-arrow:hover,



.card-link:hover {



  color: var(--pc-ink);



  gap: 12px;



}







.section--dark .link-arrow,



.surface-dark .card-link,



.card--featured .card-link {



  color: var(--pc-orange);



}







.card--featured .card-link:hover {



  color: var(--pc-white);



}







.cta-group {



  display: flex;



  flex-wrap: wrap;



  align-items: center;



  gap: 14px;



}







/* 5. Header Global, Navegação Multipáginas e Dropdown */



.header-scroll-progress {



  position: fixed;



  top: 0;



  left: 0;



  width: 0%;



  height: 3px;



  background: linear-gradient(90deg, #FF3131 0%, #FF914D 100%);



  z-index: 1010;



  pointer-events: none;



  transition: width 0.1s linear;



}







.site-header {



  height: var(--header-height);



  position: fixed;
  top: 0;
  left: 0;
  right: 0;



  z-index: 1000;



  background-color: #FFFFFF;



  border-bottom: 1px solid var(--pc-border-light);



  width: 100%;



  transition: box-shadow 0.28s var(--ease-out), border-color 0.28s, background-color 0.28s;



}







.site-header.is-scrolled {
  background-color: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}







.header-inner {



  height: 100%;



  display: flex;



  align-items: center;



  justify-content: space-between;



  gap: 16px;



  position: relative;



}







.brand-logo {



  display: inline-flex;



  align-items: center;



  padding: 4px 0;



  flex-shrink: 0;



  transition: transform 0.2s ease, opacity 0.2s ease;



}







.brand-logo:hover {



  transform: scale(1.02);



  opacity: 0.95;



}







.brand-logo img {



  width: clamp(140px, 20vw, 184px);



  height: auto;



  max-height: 52px;



  object-fit: contain;



}







.site-nav {



  display: flex;



  align-items: center;



  gap: 4px;



  margin-left: auto;



}







.site-nav-list {



  display: flex;



  align-items: center;



  gap: 4px;



}







.nav-link {



  display: inline-flex;



  align-items: center;



  gap: 6px;



  padding: 8px 14px;



  border-radius: var(--radius-sm);



  font-size: 0.95rem;



  font-weight: 600;



  color: var(--pc-charcoal);



  white-space: nowrap;



  position: relative;



  transition: color 0.2s ease, background-color 0.2s ease;



}







.nav-link:hover {



  color: var(--pc-red);



  background-color: var(--pc-surface-warm);



}







.nav-link[aria-current="page"],



.nav-link--active {



  color: var(--pc-red);



  background-color: rgba(255, 49, 49, 0.08);



  font-weight: 700;



}







.nav-badge-pill {



  font-size: 0.65rem;



  font-weight: 800;



  color: #FFFFFF;



  background-color: #C41C1C;
  background: var(--pc-gradient);



  padding: 2px 7px;



  border-radius: var(--radius-pill);



  line-height: 1.2;



  letter-spacing: 0.02em;



}







/* Dropdown de Serviços Desktop */



.nav-item-dropdown {



  position: relative;



}







.nav-link-dropdown-wrap {



  display: flex;



  align-items: center;



}







.dropdown-chevron {



  font-size: 0.72rem;



  transition: transform 0.22s var(--ease-out);



  opacity: 0.75;



}







.nav-item-dropdown:hover .dropdown-chevron,



.nav-item-dropdown:focus-within .dropdown-chevron {



  transform: rotate(180deg);



  opacity: 1;



}







.nav-dropdown-menu {



  position: absolute;



  top: 100%;



  left: 50%;



  transform: translateX(-50%) translateY(12px);



  width: 360px;



  background: #FFFFFF;



  border: 1px solid var(--pc-border-light);



  border-radius: 16px;



  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);



  padding: 8px;



  display: flex;



  flex-direction: column;



  gap: 4px;



  opacity: 0;



  visibility: hidden;



  pointer-events: none;



  transition: opacity 0.22s var(--ease-out), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;



  z-index: 1005;



}







.nav-item-dropdown:hover .nav-dropdown-menu,



.nav-item-dropdown:focus-within .nav-dropdown-menu {



  opacity: 1;



  visibility: visible;



  pointer-events: auto;



  transform: translateX(-50%) translateY(4px);



}







.dropdown-item {



  display: flex;



  align-items: flex-start;



  gap: 12px;



  padding: 10px 14px;



  border-radius: 10px;



  text-decoration: none;



  color: var(--pc-text-primary);



  transition: background-color 0.18s ease, transform 0.18s ease;



}







.dropdown-item:hover,



.dropdown-item--active {



  background-color: var(--pc-surface-warm);



  transform: translateX(3px);



}







.dropdown-item-num {



  font-family: var(--font-display);



  font-size: 0.75rem;



  font-weight: 800;



  color: var(--pc-red);



  background: rgba(255, 49, 49, 0.08);



  border-radius: 6px;



  padding: 3px 7px;



  line-height: 1.2;



  margin-top: 2px;



  flex-shrink: 0;



}







.dropdown-item-text {



  display: flex;



  flex-direction: column;



  gap: 2px;



}







.dropdown-item-title {



  font-size: 0.92rem;



  font-weight: 700;



  color: var(--pc-text-primary);



  line-height: 1.25;



}







.dropdown-item:hover .dropdown-item-title {



  color: var(--pc-red);



}







.dropdown-item-desc {



  font-size: 0.78rem;



  color: var(--pc-text-secondary);



  line-height: 1.35;



}







.dropdown-footer {



  border-top: 1px solid var(--pc-border-light);



  margin-top: 4px;



  padding: 8px 14px 4px;



}







.dropdown-footer-link {



  font-size: 0.82rem;



  font-weight: 700;



  color: var(--pc-red);



  display: inline-flex;



  align-items: center;



  gap: 6px;



  transition: gap 0.2s ease;



}







.dropdown-footer-link:hover {



  gap: 9px;



}







/* Ações Desktop do Header */



.header-actions {



  display: flex;



  align-items: center;



  gap: 12px;



  margin-left: 12px;



}







.header-wa-chip {



  display: inline-flex;



  align-items: center;



  gap: 7px;



  padding: 6px 14px;



  border-radius: var(--radius-pill);



  border: 1px solid rgba(37, 211, 102, 0.35);



  background: rgba(37, 211, 102, 0.07);



  color: #0B6B5F;



  font-size: 0.85rem;



  font-weight: 700;



  transition: background-color 0.2s, border-color 0.2s, transform 0.2s;



  white-space: nowrap;



}







.header-wa-chip:hover {



  background: rgba(37, 211, 102, 0.14);



  border-color: #25D366;



  transform: translateY(-1px);



}







.status-dot-pulse {



  width: 8px;



  height: 8px;



  border-radius: 50%;



  background-color: #25D366;



  display: inline-block;



  box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);



  animation: pulseGreen 2s infinite cubic-bezier(0.66, 0, 0, 1);



}







@keyframes pulseGreen {



  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }



  70% { box-shadow: 0 0 0 7px rgba(37, 211, 102, 0); }



  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }



}







.header-cta {



  min-height: 42px;



  padding: 9px 18px;



  font-size: 0.875rem;



  border-radius: 10px;



  flex-shrink: 0;



  box-shadow: 0 2px 10px rgba(255, 49, 49, 0.2);



  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;



}







.header-cta:hover {



  transform: translateY(-1px);



  box-shadow: 0 6px 18px rgba(255, 49, 49, 0.35);



}







.mobile-submenu-toggle,
.site-nav-drawer-header,
.site-nav-drawer-footer {
  display: none;
}







.nav-backdrop {



  display: none;



}







.menu-toggle {



  display: none;



  width: 44px;



  height: 44px;



  flex-shrink: 0;



  border-radius: 10px;



  border: 1px solid var(--pc-border-light);



  background: var(--pc-surface-cream);



  align-items: center;



  justify-content: center;



  flex-direction: column;



  gap: 5px;



  z-index: 1005;



  cursor: pointer;



  transition: background-color 0.2s;



  padding: 0;



}







.menu-toggle:hover {



  background-color: var(--pc-surface-warm);



}







.menu-toggle span {



  display: block;



  width: 20px;



  height: 2px;



  background-color: var(--pc-ink);



  border-radius: 2px;



  transition: transform 0.25s var(--ease-out), opacity 0.2s;



  transform-origin: center;



}







.menu-toggle[aria-expanded="true"] span:nth-child(1) {



  transform: translateY(7px) rotate(45deg);



}







.menu-toggle[aria-expanded="true"] span:nth-child(2) {



  opacity: 0;



}







.menu-toggle[aria-expanded="true"] span:nth-child(3) {



  transform: translateY(-7px) rotate(-45deg);



}







/* Breadcrumbs */



.breadcrumb-bar {



  background-color: var(--pc-surface-cream);



  border-bottom: 1px solid var(--pc-border-light);



  padding: 10px 0;



  font-size: var(--text-xs);



  width: 100%;



}







.breadcrumb-list {



  list-style: none;



  margin: 0;



  padding: 0;



  display: flex;



  flex-wrap: wrap;



  align-items: center;



  gap: 6px;



  color: var(--pc-text-muted);



}







.breadcrumb-list li {



  display: inline-flex;



  align-items: center;



  gap: 6px;



}







.breadcrumb-list li + li::before {



  content: "/";



  color: #B0A8A2;



}







.breadcrumb-list a:hover {



  color: var(--pc-red);



  text-decoration: underline;



}







.breadcrumb-list [aria-current="page"] {



  color: var(--pc-ink);



  font-weight: 700;



}







/* 6. Heros (Home e Páginas Internas) */



.hero,



.hero-section,



.page-hero {



  position: relative;



  background: var(--pc-gradient-dark);



  color: var(--pc-white);



  overflow: hidden;



  isolation: isolate;



  padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(3.25rem, 6vw, 5.75rem);



  width: 100%;



}







.hero::before,



.hero-section::before,



.page-hero::before {



  content: "";



  position: absolute;



  inset: 0;



  background:



    radial-gradient(circle at 88% 22%, rgba(255, 145, 77, 0.22), transparent 32%),



    radial-gradient(circle at 18% 95%, rgba(255, 49, 49, 0.14), transparent 36%);



  z-index: -1;



  pointer-events: none;



}







.hero-section::after,



.page-hero::after {



  content: "";



  position: absolute;



  right: -40px;



  bottom: -40px;



  width: min(300px, 50vw);



  height: 90px;



  border-radius: var(--radius-pill);



  background: var(--pc-gradient);



  opacity: 0.12;



  transform: rotate(-18deg);



  z-index: -1;



  pointer-events: none;



}







.hero-grid {



  display: grid;



  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);



  gap: clamp(1.75rem, 4vw, 3.5rem);



  align-items: center;



  width: 100%;



}







.hero-grid > div {



  min-width: 0;



}







.hero-section .lead,



.page-hero .lead {



  color: var(--pc-text-on-dark-muted);



}







.hero-section .lead strong,



.page-hero .lead strong {



  color: var(--pc-white);



}







.page-hero h1 {



  font-size: var(--text-3xl);



  max-width: 25ch;



}







.hero-lede {



  color: var(--pc-text-on-dark-muted);



  font-size: var(--text-md);



  max-width: 58ch;



  margin-bottom: 2rem;



  line-height: 1.8;



}







.hero-actions {



  display: flex;



  flex-wrap: wrap;



  gap: 14px;



  margin-bottom: 2.25rem;



}







.hero-badges {



  display: flex;



  flex-wrap: wrap;



  gap: 20px;



  padding-top: 1.25rem;



  border-top: 1px solid rgba(255, 255, 255, 0.12);



}







.hero-badges span {



  display: inline-flex;



  align-items: center;



  gap: 8px;



  font-size: var(--text-xs);



  font-weight: 600;



  color: #E2DBD6;



}







.hero-badges b {



  color: var(--pc-orange);



}







/* Faixa de Confiança do Hero */



.trust-strip {



  display: grid;



  grid-template-columns: repeat(3, minmax(0, 1fr));



  gap: 14px;



  margin-top: 2rem;



  padding-top: 1.25rem;



  border-top: 1px solid rgba(255, 255, 255, 0.12);



  width: 100%;



}







.trust-pill {



  display: flex;



  flex-direction: column;



  gap: 4px;



  padding-left: 12px;



  border-left: 3px solid var(--pc-orange);



  min-width: 0;



}







.trust-pill strong {



  font-family: var(--font-display);



  font-size: 1.15rem;



  line-height: 1.2;



  color: var(--pc-white);



}







.trust-pill span {



  font-size: 1rem;



  line-height: 1.45;



  color: var(--pc-text-on-dark-muted);



}







/* 7. Cabeçalhos de Seção e Layouts Divididos */



.section-header {



  display: grid;



  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);



  gap: clamp(1.25rem, 3.5vw, 3.5rem);



  align-items: end;



  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);



  width: 100%;



}







.section-header h2 {



  margin-bottom: 0;



}







.section-header > p {



  color: var(--pc-text-muted);



  font-size: var(--text-md);



  margin: 0;



  line-height: 1.7;



}







.surface-dark .section-header > p {



  color: var(--pc-text-on-dark-muted);



}







.split-layout,



.split-grid {



  display: grid;



  grid-template-columns: repeat(2, minmax(0, 1fr));



  gap: clamp(1.75rem, 4vw, 4rem);



  align-items: center;



  width: 100%;



}







.split-layout > div,



.split-grid > div {



  min-width: 0;



}







/* 8. Grades e Cards Modulares */



.cards-grid {



  display: grid;



  gap: 20px;



  width: 100%;



}







.cards-grid > *,



.blog-grid > * {



  min-width: 0;



  max-width: 100%;



}







.cards-grid--2,



.cards-grid-2 {



  grid-template-columns: repeat(2, minmax(0, 1fr));



}







.cards-grid--3,



.cards-grid-3 {



  grid-template-columns: repeat(3, minmax(0, 1fr));



}







.cards-grid--4,



.cards-grid-4 {



  grid-template-columns: repeat(4, minmax(0, 1fr));



}







.card {



  background-color: var(--pc-white);



  border: 1px solid var(--pc-border-light);



  border-radius: var(--radius-md);



  padding: clamp(20px, 3vw, 30px);



  display: flex;



  flex-direction: column;



  align-items: flex-start;



  transition: transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out), border-color 0.22s var(--ease-out);



  position: relative;



  width: 100%;



  min-width: 0;



}







.card:hover {



  transform: translateY(-4px);



  box-shadow: var(--shadow-md);



  border-color: #DFC8BD;



}







.card > *:last-child {



  margin-bottom: 0;



}







.card p {



  color: var(--pc-text-muted);



  font-size: var(--text-sm);



  line-height: 1.65;



  margin-bottom: 1rem;



}







.card--featured {



  background-color: var(--pc-surface-dark);



  color: var(--pc-white);



  border-color: var(--pc-surface-dark);



}







.card--featured h3 {



  color: var(--pc-white);



}







.card--featured p {



  color: var(--pc-text-on-dark-muted);



}







.card--featured strong {



  color: var(--pc-white);



}







.card--dark-surface {



  background-color: var(--pc-surface-dark-elevated);



  border-color: var(--pc-border-dark);



  color: var(--pc-white);



}







.card--dark-surface p {



  color: var(--pc-text-on-dark-muted);



}







/* Rótulo Superior dos Cards */



.card-num {



  display: inline-flex;



  align-items: center;



  max-width: 100%;



  padding: 5px 12px;



  border-radius: var(--radius-pill);



  font-family: var(--font-body);



  font-size: 1rem;



  font-weight: 800;



  letter-spacing: 0.08em;



  text-transform: uppercase;



  line-height: 1.3;



  margin-bottom: 14px;



  background-color: var(--pc-surface-warm);



  color: #B81818;



}







.card--featured .card-num,



.card--dark-surface .card-num {



  background: rgba(255, 145, 77, 0.15);



  color: var(--pc-orange);



}







.card .link-arrow,



.card .card-link {



  margin-top: auto;



  padding-top: 10px;



}







/* Mídia e Figcaption */



.media-card {



  margin: 0;



  border-radius: var(--radius-lg);



  overflow: hidden;



  background-color: var(--pc-surface-dark-elevated);



  border: 1px solid rgba(255, 255, 255, 0.12);



  box-shadow: var(--shadow-lg);



  position: relative;



  width: 100%;



  max-width: 100%;



  min-width: 0;



}







.media-card--light {



  background-color: var(--pc-white);



  border-color: var(--pc-border-light);



  box-shadow: var(--shadow-md);



}







.media-card picture,



.media-card img,



.media-card svg {



  width: 100%;



  max-width: 100%;



  height: auto;



  object-fit: cover;



  display: block;



}







.media-caption {



  display: none !important;



}







.media-card:not(.media-card--light) .media-caption {



  background-color: #1D1B1A;



  color: var(--pc-text-on-dark-muted);



  border-top-color: rgba(255, 255, 255, 0.08);



}







.pill-badge {



  display: inline-flex;



  align-items: center;



  gap: 6px;



  padding: 4px 10px;



  border-radius: var(--radius-pill);



  font-size: 1rem;



  font-weight: 800;



  letter-spacing: 0.04em;



  text-transform: uppercase;



  background: var(--pc-surface-warm);



  color: #B81818;



  max-width: 100%;



  white-space: normal;



  text-align: center;



}







.pill-badge--dark {



  background: rgba(255, 145, 77, 0.16);



  color: #FFB385;



  border: 1px solid rgba(255, 145, 77, 0.35);



}







.pill-badge--gold {



  background: var(--pc-gold-soft);



  color: #6B4C00;



  border: 1px solid rgba(229, 185, 92, 0.4);



}







/* 9. Tabela e Cards de Planos (Natal Premiado) */



.pricing-grid {



  display: grid;



  grid-template-columns: repeat(4, minmax(0, 1fr));



  gap: 18px;



  margin-top: 28px;



  width: 100%;



}







.plan-card {



  background-color: var(--pc-surface-cream);



  color: var(--pc-ink);



  border: 2px solid transparent;



  border-radius: 20px;



  padding: clamp(20px, 2.5vw, 26px);



  display: flex;



  flex-direction: column;



  position: relative;



  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), border-color 0.2s var(--ease-out);



  width: 100%;



  min-width: 0;



}







.plan-card:hover {



  transform: translateY(-4px);



}







.plan-card--featured {



  background: linear-gradient(155deg, #FFFFFF 0%, #FFF0E6 100%);



  border-color: var(--pc-orange);



  box-shadow: 0 20px 44px rgba(255, 75, 50, 0.18);



}







.plan-card.is-selected {



  border-color: var(--pc-red);



  box-shadow: 0 0 0 4px rgba(255, 49, 49, 0.22);



}







.plan-header {



  display: flex;



  align-items: flex-start;



  justify-content: space-between;



  flex-wrap: wrap;



  gap: 8px;



  margin-bottom: 12px;



  min-height: 28px;



  width: 100%;



}







.plan-name {



  margin: 0;



  text-transform: uppercase;



  letter-spacing: 0.12em;



  font-size: var(--text-xs);



  font-weight: 800;



  color: #B81818;



}







.plan-badge {



  background-color: #C41C1C;
  background: var(--pc-gradient);



  color: var(--pc-white);



  font-size: 1rem;



  font-weight: 800;



  text-transform: uppercase;



  letter-spacing: 0.04em;



  padding: 4px 9px;



  border-radius: var(--radius-pill);



  white-space: normal;



  text-align: center;



  max-width: 100%;



}







.plan-price {



  font-family: var(--font-display);



  font-size: clamp(2.35rem, 3.5vw, 2.95rem);



  font-weight: 900;



  line-height: 1;



  letter-spacing: -0.04em;



  margin: 0;



}







.plan-price small {



  display: block;



  font-family: var(--font-body);



  font-size: 1rem;



  font-weight: 500;



  color: var(--pc-text-muted);



  letter-spacing: 0;



  margin-top: 6px;



}







.plan-metric {



  border-top: 1px solid var(--pc-border-light);



  border-bottom: 1px solid var(--pc-border-light);



  padding: 14px 0;



  margin: 16px 0;



  width: 100%;



}







.plan-metric strong {



  display: block;



  font-family: var(--font-display);



  font-size: 2.2rem;



  font-weight: 900;



  line-height: 1;



  color: var(--pc-ink);



}







.plan-metric span {



  display: block;



  font-size: 1rem;



  color: var(--pc-text-muted);



  margin-top: 5px;



  line-height: 1.45;



}







.card--featured .plan-metric {



  border-color: var(--pc-border-dark);



}







.card--featured .plan-metric strong {



  color: var(--pc-white);



}







.card--featured .plan-metric span {



  color: var(--pc-text-on-dark-muted);



}







.card .plan-metric strong {



  background: var(--pc-gradient);



  -webkit-background-clip: text;



  background-clip: text;



  color: transparent;



}







.plan-features {



  list-style: none;



  padding: 0;



  margin: 0 0 20px;



  font-size: 1rem;



  color: var(--pc-text-secondary);



}







.plan-features li {



  padding: 4px 0;



  display: flex;



  align-items: flex-start;



  gap: 8px;



  line-height: 1.45;



}







.plan-features li::before {



  content: "✓";



  color: var(--pc-red);



  font-weight: 800;



  flex-shrink: 0;



}







.plan-card .btn {



  width: 100%;



  margin-top: auto;



  min-height: 44px;



  padding: 10px 14px;



  font-size: var(--text-xs);



}







/* 10. Abas Acessíveis (Participe) */



.tabs-container {



  width: 100%;



  position: relative;



  scroll-margin-top: calc(var(--header-height) + 16px);



}







.tabs-list,



.tabs-nav {



  display: flex;



  gap: 6px;



  padding: 6px;



  background-color: #EFEAE4;



  border-radius: 14px;



  width: 100%;



  max-width: 820px;



  margin: 0 auto 32px;



}







.tab-trigger,



.tab-btn {



  flex: 1 1 0;



  border: 0;



  background: transparent;



  color: var(--pc-text-secondary);



  padding: 12px 18px;



  border-radius: 10px;



  font-family: var(--font-body);



  font-size: var(--text-sm);



  font-weight: 700;



  line-height: 1.35;



  text-align: center;



  white-space: normal;



  word-break: normal;



  transition: background 0.2s, color 0.2s;



  cursor: pointer;



}







.tab-trigger:hover,



.tab-btn:hover {



  color: var(--pc-red);



}







.tab-trigger[aria-selected="true"],



.tab-btn[aria-selected="true"] {



  background-color: var(--pc-ink);



  color: var(--pc-white);



  box-shadow: var(--shadow-sm);



}







.tab-panel {



  background-color: var(--pc-surface-cream);



  border: 1px solid var(--pc-border-light);



  border-radius: var(--radius-lg);



  padding: clamp(1.5rem, 3.5vw, 2.75rem);



  width: 100%;



}







.tab-panel h2 {



  font-size: var(--text-2xl);



}







/* 11. Linha do Tempo de Etapas */



.step-timeline {



  list-style: none;



  padding: 0;



  margin: 1.5rem 0 0;



  position: relative;



  width: 100%;



}







.step-timeline::before {



  content: "";



  position: absolute;



  left: 20px;



  top: 8px;



  bottom: 8px;



  width: 2px;



  background: linear-gradient(180deg, var(--pc-red), var(--pc-orange) 60%, var(--pc-border-light));



}







.step-item {



  position: relative;



  display: grid;



  grid-template-columns: 42px minmax(0, 1fr);



  gap: 16px;



  padding-bottom: 1.5rem;



}







.step-item:last-child {



  padding-bottom: 0;



}







.step-badge {



  width: 42px;



  height: 42px;



  border-radius: 12px;



  display: grid;



  place-items: center;



  background-color: #C41C1C;
  background: var(--pc-gradient);



  color: var(--pc-white);



  font-family: var(--font-display);



  font-weight: 900;



  font-size: 1.15rem;



  box-shadow: var(--shadow-cta);



  position: relative;



  z-index: 1;



  flex-shrink: 0;



}







.step-body {



  min-width: 0;



}







.step-body h3 {



  font-size: 1.15rem;



  margin-bottom: 0.35rem;



  line-height: 1.25;



}







.step-body p {



  font-size: var(--text-sm);



  color: var(--pc-text-muted);



  margin: 0;



  line-height: 1.6;



}







/* 12. Listas de Verificação e Avisos de Transparência */



.check-list {



  list-style: none;



  padding: 0;



  margin: 0 0 1.5rem;



  display: grid;



  gap: 10px;



  width: 100%;



}







.check-list li {



  position: relative;



  padding-left: 28px;



  font-size: var(--text-sm);



  line-height: 1.6;



  color: var(--pc-text-secondary);



  min-width: 0;



}







.check-list li::before {



  content: "";



  position: absolute;



  left: 0;



  top: 0.45em;



  width: 18px;



  height: 18px;



  border-radius: 6px;



  background: var(--pc-gradient);



  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.5l3.2 3L14 5.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;



          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.5l3.2 3L14 5.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;



}







.card--featured .check-list li,



.surface-dark .check-list li {



  color: var(--pc-text-on-dark-muted);



}







.notice-banner,



.notice-box {



  background-color: var(--pc-surface-warm);



  border-left: 4px solid var(--pc-red);



  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;



  padding: 16px 20px;



  font-size: var(--text-sm);



  line-height: 1.65;



  color: #4A251B;



  width: 100%;



}







.notice-banner > strong:first-child {



  display: block;



  font-family: var(--font-display);



  font-size: 1.05rem;



  margin-bottom: 4px;



  color: #8C1A1A;



}







.notice-banner--dark,



.notice-box--dark {



  background-color: rgba(255, 145, 77, 0.1);



  border-left-color: var(--pc-orange);



  color: #E8DFDA;



}







.notice-banner--dark > strong:first-child {



  color: var(--pc-orange);



}







.card--featured .notice-banner {



  background-color: rgba(255, 145, 77, 0.1);



  color: #E8DFDA;



  border-left-color: var(--pc-orange);



}







.card--featured .notice-banner > strong:first-child {



  color: var(--pc-orange);



}







code {



  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;



  font-size: 1rem;



  background: rgba(255, 145, 77, 0.14);



  padding: 2px 6px;



  border-radius: 6px;



  word-break: break-word;



}







/* 13. Formulário de Contato Inteligente */



.contact-layout {



  display: grid;



  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);



  gap: clamp(1.75rem, 4vw, 3.5rem);



  align-items: start;



  width: 100%;



}







.contact-layout h2 {



  font-size: var(--text-2xl);



}







.form-card {



  background-color: var(--pc-white);



  border: 1px solid var(--pc-border-light);



  border-radius: var(--radius-lg);



  padding: clamp(1.5rem, 3.5vw, 2.5rem);



  box-shadow: var(--shadow-md);



  width: 100%;



}







.form-grid {



  display: grid;



  grid-template-columns: repeat(2, minmax(0, 1fr));



  gap: 16px;



  width: 100%;



}







.form-field {



  display: flex;



  flex-direction: column;



  gap: 6px;



  min-width: 0;



}







.form-field--full {



  grid-column: 1 / -1;



}







.form-field label {



  font-size: var(--text-xs);



  font-weight: 700;



  color: var(--pc-charcoal);



}







.form-control,



.form-field input,



.form-field select,



.form-field textarea {



  width: 100%;



  min-height: 48px;



  padding: 12px 14px;



  border: 1px solid #CFC7C0;



  border-radius: 10px;



  background-color: var(--pc-white);



  color: var(--pc-ink);



  font-size: 16px; /* Impede auto-zoom no iOS Safari */



  transition: border-color 0.2s, box-shadow 0.2s;



}







.form-field textarea {



  min-height: 110px;



  resize: vertical;



}







.form-control:focus,



.form-field input:focus,



.form-field select:focus,



.form-field textarea:focus {



  outline: none;



  border-color: var(--pc-red);



  box-shadow: 0 0 0 3px rgba(255, 145, 77, 0.25);



}







.form-control:user-invalid {



  border-color: #B81818;



}







.req {



  color: #B81818;



}







.checkbox-row {



  display: flex;



  align-items: flex-start;



  gap: 10px;



  font-weight: 500 !important;



  line-height: 1.5;



  cursor: pointer;



}







.checkbox-row input {



  width: 18px;



  height: 18px;



  min-height: 0;



  margin-top: 2px;



  accent-color: var(--pc-red);



  flex: 0 0 18px;



}







.form-feedback,



.form-status {



  margin-top: 1.5rem;



  padding: 18px;



  border-radius: var(--radius-md);



  background-color: var(--pc-surface-warm);



  border-left: 4px solid var(--pc-red);



  width: 100%;



}







.form-feedback h3 {



  font-size: 1.25rem;



  margin-bottom: 0.5rem;



}







.summary-box,



.prepared-preview {



  margin: 0;



  padding: 12px;



  border-radius: var(--radius-sm);



  background-color: var(--pc-white);



  border: 1px dashed #C9BFB7;



  font-family: ui-monospace, Consolas, monospace;



  font-size: 1rem;



  white-space: pre-wrap;



  word-break: break-word;



  color: var(--pc-charcoal);



  width: 100%;



}







.conditional-group:not([hidden]) {



  animation: pc-fade 0.25s var(--ease-out);



}







@keyframes pc-fade {



  from { opacity: 0; transform: translateY(-4px); }



  to { opacity: 1; transform: translateY(0); }



}







/* 14. Tabelas Comparativas */



.table-scroll-hint {



  display: none;



  font-size: var(--text-xs);



  color: var(--pc-text-muted);



  margin-bottom: 8px;



  text-align: center;



  font-weight: 600;



}



@media (max-width: 768px) {



  .table-scroll-hint {



    display: block;



  }



}







.table-wrapper,
.table-wrap,
.table-responsive {
  overflow-x: auto;
  border: 1px solid var(--pc-border-light);
  border-radius: var(--radius-md);
  background: var(--pc-white);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}







.table-wrapper:focus-visible {



  outline: 3px solid var(--pc-orange);



}







.comparison-table,



.data-table {



  width: 100%;



  border-collapse: collapse;



  min-width: 600px;



  font-size: var(--text-sm);



}







.comparison-table th,



.comparison-table td,



.data-table th,



.data-table td {



  padding: 14px 18px;



  text-align: left;



  vertical-align: top;



  border-bottom: 1px solid var(--pc-border-light);



}







.comparison-table thead th,



.data-table th {



  background-color: var(--pc-ink);



  color: var(--pc-white);



  font-size: var(--text-xs);



  font-weight: 700;



  text-transform: uppercase;



  letter-spacing: 0.08em;



}







.comparison-table tbody tr:nth-child(even) {



  background-color: var(--pc-surface-cream);



}







.comparison-table tr:last-child td,



.data-table tr:last-child td {



  border-bottom: 0;



}







/* 15. FAQ Accordion */



.faq-list {



  border-top: 1px solid var(--pc-border-light);



  width: 100%;



}







.faq-item {



  border-bottom: 1px solid var(--pc-border-light);



  padding: 18px 0;



  width: 100%;



}







.faq-item summary {



  list-style: none;



  cursor: pointer;



  display: flex;



  justify-content: space-between;



  align-items: center;



  gap: 16px;



  font-weight: 700;



  font-family: var(--font-display);



  font-size: 1.15rem;



  line-height: 1.3;



}







.faq-item summary::-webkit-details-marker {



  display: none;



}







.faq-item summary::after {



  content: "+";



  font-family: var(--font-display);



  font-size: 26px;



  font-weight: 700;



  line-height: 1;



  color: var(--pc-red);



  flex-shrink: 0;



}







.faq-item[open] summary::after {



  content: "−";



}







.faq-answer,



.faq-item div {



  padding-top: 12px;



  color: var(--pc-text-muted);



  font-size: var(--text-sm);



  max-width: 72ch;



  line-height: 1.65;



}







.faq-answer p {



  margin: 0;



}







/* 16. Documentos Legais */



.legal-document {



  max-width: 80ch;



  margin-inline: auto;



  width: 100%;



}







.legal-document h2 {



  font-size: var(--text-xl);



  margin-top: 2rem;



  margin-bottom: 0.75rem;



}







.legal-document ul {



  padding-left: 1.25rem;



  color: var(--pc-text-secondary);



}







.legal-document li {



  margin-bottom: 0.5rem;



  line-height: 1.6;



}







.legal-document p {



  color: var(--pc-text-secondary);



  line-height: 1.65;



}







/* 17. Footer Global Compartilhado */



.site-footer {



  background-color: var(--pc-ink);



  color: var(--pc-white);



  padding: clamp(48px, 6vw, 72px) 0 32px;



  border-top: 4px solid var(--pc-red);



  width: 100%;



}







.footer-grid {



  display: grid;



  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));



  gap: 36px;



  padding-bottom: 40px;



  border-bottom: 1px solid #2E2B29;



  width: 100%;



}







.footer-brand img {



  width: 170px;



  height: auto;



  max-height: 56px;



  object-fit: contain;



  margin-bottom: 16px;



}







.footer-brand p {



  font-size: var(--text-xs);



  color: var(--pc-text-on-dark-muted);



  max-width: 38ch;



  line-height: 1.7;



  margin-bottom: 1.25rem;



}







.footer-col h4,



.footer-col .footer-title {



  font-family: var(--font-body);



  font-size: var(--text-xs);



  font-weight: 800;



  text-transform: uppercase;



  letter-spacing: 0.1em;



  color: var(--pc-orange);



  margin-top: 0;



  margin-bottom: 16px;



}







.footer-links {



  list-style: none;



  padding: 0;



  margin: 0;



}







.footer-links li {



  margin-bottom: 9px;



  min-width: 0;



}







.footer-links a,



.footer-links span {



  font-size: var(--text-xs);



  color: var(--pc-text-on-dark-muted);



  line-height: 1.5;



}







.footer-links a:hover {



  color: var(--pc-white);



  text-decoration: underline;



}







.footer-bottom {



  padding-top: 24px;



  display: flex;



  flex-wrap: wrap;



  justify-content: space-between;



  gap: 12px;



  font-size: 1rem;



  color: #9A938E;



}







.footer-bottom p {



  margin: 0;



}







/* 18. Microinterações */



@media (prefers-reduced-motion: no-preference) {



  .hero-section h1,



  .page-hero h1 { animation: pc-rise 0.6s var(--ease-out) both; }



  .hero-section .lead,



  .page-hero .lead { animation: pc-rise 0.6s 0.08s var(--ease-out) both; }



  .hero-section .media-card,



  .page-hero .media-card { animation: pc-rise 0.7s 0.12s var(--ease-out) both; }







  @keyframes pc-rise {



    from { opacity: 0; transform: translateY(12px); }



    to { opacity: 1; transform: translateY(0); }



  }



}







/* 19. Responsividade Progressiva em Breakpoints */







/* Desktop Médio / Laptop (<= 1180px) */



@media (max-width: 1180px) {



  .pricing-grid {



    grid-template-columns: repeat(2, minmax(0, 1fr));



    gap: 20px;



  }



  .cards-grid--4,



  .cards-grid-4 {



    grid-template-columns: repeat(2, minmax(0, 1fr));



  }



  .footer-grid {



    grid-template-columns: repeat(2, minmax(0, 1fr));



    gap: 32px;



  }



}







/* Body Lock quando o drawer mobile está aberto */



body.nav-lock {



  overflow: hidden !important;



  touch-action: none;



}







/* 19. Responsividade Progressiva em Breakpoints */







/* Tablet Paisagem / Notebook Compacto (<= 920px) */



@media (max-width: 920px) {



  .header-actions {



    display: none !important;



  }







  .menu-toggle {



    display: inline-flex;



    margin-left: auto;



    position: relative;



    z-index: 1005;



  }







  .nav-backdrop {



    display: block;



    position: fixed;



    top: 0;



    left: 0;



    width: 100vw;



    height: 100vh;



    height: 100dvh;



    background-color: rgba(15, 17, 23, 0.65);



    backdrop-filter: blur(8px);



    -webkit-backdrop-filter: blur(8px);



    z-index: 1001;



    opacity: 0;



    visibility: hidden;



    transition: opacity 0.3s var(--ease-out), visibility 0.3s;



  }







  .nav-backdrop.is-active {



    opacity: 1;



    visibility: visible;



  }







  .site-nav {



    display: flex;



    position: fixed;



    top: 0;



    right: 0;



    width: 88%;



    max-width: 360px;



    height: 100vh;



    height: 100dvh;



    background-color: #FFFFFF;



    border-left: 1px solid var(--pc-border-light);



    box-shadow: -14px 0 45px rgba(0, 0, 0, 0.25);



    flex-direction: column;



    align-items: stretch;



    padding: 20px 22px 24px;



    z-index: 1002;



    overflow-y: auto;



    -webkit-overflow-scrolling: touch;



    transform: translateX(105%);



    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);



    visibility: hidden;



    pointer-events: none;



  }







  .site-nav.is-open {



    transform: translateX(0);



    visibility: visible;



    pointer-events: auto;



  }







  /* Cabeçalho do Drawer Mobile */



  .site-nav-drawer-header {



    display: flex;



    align-items: center;



    justify-content: space-between;



    padding-bottom: 16px;



    border-bottom: 1px solid var(--pc-border-light);



    margin-bottom: 14px;



  }







  .drawer-close-btn {



    width: 38px;



    height: 38px;



    border-radius: 50%;



    background: var(--pc-surface-warm);



    border: 1px solid var(--pc-border-light);



    display: flex;



    align-items: center;



    justify-content: center;



    color: var(--pc-charcoal);



    cursor: pointer;



    transition: background-color 0.2s, transform 0.2s;



  }







  .drawer-close-btn:hover {



    background: var(--pc-surface-cream);



    transform: rotate(90deg);



  }







  /* Lista de Links do Drawer Mobile */



  .site-nav-list {



    display: flex;



    flex-direction: column;



    gap: 4px;



    width: 100%;



    flex: 1;



  }







  .site-nav-list .nav-link {



    display: flex;



    align-items: center;



    justify-content: space-between;



    padding: 12px 14px;



    font-size: 1.05rem;



    font-weight: 600;



    border-radius: var(--radius-sm);



    color: var(--pc-text-primary);



    transition: background-color 0.2s, color 0.2s;



  }







  .site-nav-list .nav-link:hover,



  .site-nav-list .nav-link[aria-current="page"],



  .site-nav-list .nav-link--active {



    background-color: var(--pc-surface-warm);



    color: var(--pc-red);



    font-weight: 700;



  }







  /* Animação Staggered dos Links ao abrir */



  .site-nav.is-open .site-nav-list > * {



    animation: drawerItemIn 0.35s var(--ease-out) both;



    animation-delay: calc(var(--nav-i, 1) * 0.035s);



  }







  @keyframes drawerItemIn {



    from {



      opacity: 0;



      transform: translateX(18px);



    }



    to {



      opacity: 1;



      transform: translateX(0);



    }



  }







  /* Accordion de Serviços Mobile */



  .nav-item-dropdown {



    width: 100%;



  }







  .nav-link-dropdown-wrap {



    display: flex;



    align-items: center;



    justify-content: space-between;



    width: 100%;



  }







  .nav-link-dropdown-wrap .nav-link {



    flex: 1;



  }







  .mobile-submenu-toggle {



    display: flex;



    align-items: center;



    justify-content: center;



    width: 40px;



    height: 40px;



    border-radius: 8px;



    background: transparent;



    border: none;



    color: var(--pc-text-secondary);



    cursor: pointer;



    transition: transform 0.2s ease, background-color 0.2s ease;



  }







  .mobile-submenu-toggle:hover {



    background-color: var(--pc-surface-warm);



  }







  .nav-item-dropdown .mobile-submenu-toggle .chevron-arrow,
  .nav-item-dropdown.is-expanded .mobile-submenu-toggle .chevron-arrow {
    transform: rotate(180deg);
  }

  .nav-item-dropdown.is-collapsed .mobile-submenu-toggle .chevron-arrow {
    transform: rotate(0deg);
  }







  .nav-dropdown-menu {



    position: static;



    transform: none;



    width: 100%;



    box-shadow: none;



    border: none;



    border-left: 2px solid var(--pc-border-light);



    border-radius: 0;



    margin: 4px 0 8px 14px;



    padding: 4px 0 4px 10px;



    display: flex;
    flex-direction: column;
    gap: 4px;



    background: transparent;



    opacity: 1;



    visibility: visible;



    pointer-events: auto;



  }







  .nav-item-dropdown.is-collapsed .nav-dropdown-menu {
    display: none !important;
  }







  .dropdown-item {



    padding: 8px 10px;



  }







  .dropdown-item-title {



    font-size: 0.88rem;



  }







  .dropdown-item-desc {



    display: none;



  }







  /* Rodapé Comercial do Drawer Mobile */



  .site-nav-drawer-footer {



    display: flex;



    flex-direction: column;



    gap: 12px;



    margin-top: auto;



    padding-top: 18px;



    border-top: 1px solid var(--pc-border-light);



    width: 100%;



  }







  .drawer-contact-pill {



    display: flex;



    align-items: center;



    gap: 8px;



    padding: 10px 14px;



    border-radius: 10px;



    background: rgba(37, 211, 102, 0.08);



    border: 1px solid rgba(37, 211, 102, 0.35);



    color: #0B6B5F;



    font-weight: 700;



    font-size: 0.88rem;



    text-decoration: none;



  }







  .drawer-contact-pill .pill-arrow {



    margin-left: auto;



  }







  .drawer-cta-btn {



    min-height: 48px;



    justify-content: center;



    font-size: 0.95rem;



    font-weight: 700;



  }







  .drawer-meta-info {



    display: flex;



    flex-direction: column;



    gap: 2px;



    font-size: 0.78rem;



    color: var(--pc-text-muted);



    text-align: center;



  }







  .hero-grid,



  .split-layout,



  .split-grid,



  .section-header,



  .contact-layout {



    grid-template-columns: 1fr;



    gap: 1.85rem;



  }







  .cards-grid--3,



  .cards-grid-3 {



    grid-template-columns: repeat(2, minmax(0, 1fr));



  }







  .trust-strip {



    grid-template-columns: 1fr;



    gap: 12px;



  }



}







/* Tablet Retrato & Mobile Médio (<= 768px) */



@media (max-width: 768px) {



  /* Pricing Cards: Carrossel com Scroll-Snap Fluido no Mobile */



  .pricing-container {



    width: 100%;



    position: relative;



  }







  .pricing-swipe-hint {



    display: flex;



    align-items: center;



    justify-content: center;



    font-size: var(--text-xs);



    font-weight: 700;



    color: #C23B00;



    text-transform: uppercase;



    letter-spacing: 0.05em;



    margin-bottom: 12px;



    text-align: center;



  }

  .surface-dark .pricing-swipe-hint {
    color: var(--pc-orange);
  }







  .pricing-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding: 6px 4px 18px 4px;
    scrollbar-width: thin;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }







  .pricing-grid::-webkit-scrollbar {



    height: 4px;



  }







  .pricing-grid::-webkit-scrollbar-thumb {



    background: var(--pc-orange);



    border-radius: 4px;



  }







  .pricing-grid .plan-card {



    flex: 0 0 85%;



    min-width: 275px;



    max-width: 320px;



    scroll-snap-align: center;



    margin: 0;



  }







  /* Footer compacto em grade de 2 colunas */



  .footer-grid {



    grid-template-columns: 1fr;



    gap: 28px;



  }







  .footer-nav-grid {



    display: grid;



    grid-template-columns: repeat(2, minmax(0, 1fr));



    gap: 28px 16px;



    width: 100%;



  }







  .footer-nav-grid .footer-col:last-child {



    grid-column: span 2;



  }







  /* Botão Flutuante de Conversão Rápida Mobile */



  .floating-mobile-bar {
    display: block;
    position: fixed;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    right: 16px;
    z-index: 92;
    pointer-events: none;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
  }







  .floating-cta-btn {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #C41C1C;
  background: var(--pc-gradient);
    color: var(--pc-white);
    padding: 12px 18px;
    border-radius: var(--radius-pill);
    box-shadow: 0 10px 24px rgba(255, 49, 49, 0.4), 0 2px 6px rgba(0, 0, 0, 0.15);
    font-size: var(--text-sm);
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: transform 0.2s var(--ease-out), box-shadow 0.2s;
    text-decoration: none;
    max-width: 100%;
    box-sizing: border-box;
  }







  .floating-cta-btn:active {



    transform: scale(0.96);



  }







  .floating-cta-icon-svg {



    width: 18px;



    height: 18px;



    stroke: #FFFFFF;



    color: #FFFFFF;



    display: block;



    flex-shrink: 0;



  }







  .floating-cta-icon {



    font-size: 1.1rem;



    line-height: 1;



  }







  .floating-cta-text {



    letter-spacing: 0.01em;



  }







  .floating-cta-arrow {



    font-size: 1.05rem;



    transition: transform 0.2s var(--ease-out);



  }







  .floating-cta-btn:hover .floating-cta-arrow {



    transform: translateX(3px);



  }



}







@media (min-width: 769px) {



  .pricing-swipe-hint {



    display: none;



  }



  .footer-nav-grid {



    display: contents;



  }



  .floating-mobile-bar {



    display: none;



  }



}







/* Mobile Padrão (<= 680px) */



@media (max-width: 680px) {



  .cards-grid--4,



  .cards-grid-4,



  .cards-grid--3,



  .cards-grid-3,



  .cards-grid--2,



  .cards-grid-2,



  .form-grid {



    grid-template-columns: 1fr;



    gap: 16px;



  }







  .card .cards-grid--2 {



    grid-template-columns: 1fr;



  }







  .cta-group {



    flex-direction: column;



    align-items: stretch;



    width: 100%;



  }







  .cta-group .btn {



    width: 100%;



  }







  .cta-group .card-link {



    justify-content: center;



  }







  .tabs-list,



  .tabs-nav {



    flex-direction: column;



    width: 100%;



    gap: 6px;



  }







  .tab-trigger,



  .tab-btn {



    width: 100%;



    text-align: left;



    padding: 14px 16px;



  }







  .media-caption {



    flex-direction: column;



    align-items: flex-start;



    gap: 8px;



  }







  .card {



    padding: 22px 18px;



  }







  .plan-card {



    padding: 22px 18px;



  }







  .form-card {



    padding: 22px 18px;



  }







  .footer-bottom {



    flex-direction: column;



    gap: 8px;



    text-align: left;



  }



}







/* Mobile Compacto (<= 380px) */



@media (max-width: 380px) {



  :root {



    --container-pad: 14px;



  }







  .brand-logo img {



    width: 135px;



  }







  .card {



    padding: 18px 14px;



  }







  .plan-card {



    padding: 18px 14px;



  }







  .plan-price {



    font-size: 2.15rem;



  }







  .step-item {



    grid-template-columns: 36px minmax(0, 1fr);



    gap: 12px;



  }







  .step-badge {



    width: 36px;



    height: 36px;



    font-size: 1rem;



  }







  .step-timeline::before {



    left: 17px;



  }



}







/* ==========================================================================



   10. Componentes Nativos Interativos (Substitutos de SVG)



   ========================================================================== */







/* 10.1 Pipeline de Arquitetura de Receita */



.pipeline-widget {



  background: linear-gradient(145deg, #181716 0%, #252220 100%);



  border: 1px solid rgba(255, 145, 77, 0.22);



  border-radius: var(--radius-lg);



  padding: clamp(1.5rem, 3.5vw, 2.75rem);



  box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.45);



  position: relative;



  overflow: hidden;



  margin-bottom: 2rem;



}







.pipeline-widget::before {



  content: "";



  position: absolute;



  top: 0;



  left: 0;



  right: 0;



  height: 3px;



  background: var(--pc-gradient);



}







.pipeline-widget__header {



  margin-bottom: 2rem;



}







.pipeline-widget__badge-row {



  display: flex;



  align-items: center;



  gap: 12px;



  flex-wrap: wrap;



  margin-bottom: 0.85rem;



}







.pipeline-tag {



  display: inline-flex;



  align-items: center;



  gap: 6px;



  font-size: 1rem;



  font-weight: 800;



  letter-spacing: 0.1em;



  text-transform: uppercase;



  color: var(--pc-orange);



  background: rgba(255, 145, 77, 0.12);



  border: 1px solid rgba(255, 145, 77, 0.28);



  padding: 4px 12px;



  border-radius: var(--radius-pill);



}







.pipeline-pill-live {



  display: inline-flex;



  align-items: center;



  gap: 6px;



  font-size: 1rem;



  font-weight: 700;



  color: #34D399;



  background: rgba(16, 185, 129, 0.12);



  border: 1px solid rgba(16, 185, 129, 0.28);



  padding: 4px 10px;



  border-radius: var(--radius-pill);



}







.live-dot {



  width: 7px;



  height: 7px;



  border-radius: 50%;



  background: #10B981;



  box-shadow: 0 0 8px #10B981;



  animation: pulse-dot 2s infinite ease-in-out;



}







@keyframes pulse-dot {



  0%, 100% { opacity: 1; transform: scale(1); }



  50% { opacity: 0.4; transform: scale(0.85); }



}







.pipeline-widget__title {



  color: #FFFFFF;



  font-size: clamp(1.35rem, 2vw, 1.85rem);



  font-weight: 800;



  margin-bottom: 0.5rem;



}







.pipeline-widget__desc {



  color: #C7C0BC;



  font-size: var(--text-sm);



  max-width: 65ch;



  line-height: 1.65;



  margin-bottom: 0;



}







.pipeline-flow {



  display: grid;



  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);



  align-items: center;



  gap: 12px;



  margin-bottom: 2rem;



}







.pipeline-card {



  background: rgba(36, 33, 31, 0.85);



  border: 1px solid rgba(255, 255, 255, 0.08);



  border-radius: var(--radius-md);



  padding: 1.25rem 1.15rem;



  display: flex;



  flex-direction: column;



  height: 100%;



  transition: transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);



}







.pipeline-card:hover {



  transform: translateY(-3px);



  border-color: rgba(255, 145, 77, 0.4);



  box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.4);



}







.pipeline-card--highlight {



  background: linear-gradient(145deg, rgba(48, 35, 29, 0.95) 0%, rgba(36, 33, 31, 0.95) 100%);



  border-color: rgba(255, 145, 77, 0.45);



}







.pipeline-card__num-bar {



  display: flex;



  align-items: center;



  justify-content: space-between;



  margin-bottom: 0.85rem;



}







.pipeline-num {



  font-family: var(--font-display);



  font-size: 1.2rem;



  font-weight: 900;



  color: #FFFFFF;



  background-color: #C41C1C;
  background: var(--pc-gradient);



  width: 34px;



  height: 34px;



  border-radius: 8px;



  display: inline-flex;



  align-items: center;



  justify-content: center;



  box-shadow: 0 4px 12px rgba(255, 49, 49, 0.3);



}







.pipeline-step-badge {



  font-size: 1rem;



  font-weight: 700;



  text-transform: uppercase;



  letter-spacing: 0.06em;



  color: #C7C0BC;



  background: rgba(255, 255, 255, 0.06);



  padding: 3px 8px;



  border-radius: 6px;



}







.pipeline-step-badge--highlight {



  color: #FFB385;



  background: rgba(255, 145, 77, 0.15);



}







.pipeline-card__title {



  color: #FFFFFF;



  font-size: 1.15rem;



  font-weight: 800;



  margin-bottom: 0.5rem;



}







.pipeline-card__body {



  color: #BDB5AF;



  font-size: 1rem;



  line-height: 1.55;



  margin-bottom: 1rem;



  flex-grow: 1;



}







.pipeline-card__footer {



  margin-top: auto;



}







.pipeline-metric-tag {



  display: inline-block;



  font-size: 1rem;



  font-weight: 800;



  letter-spacing: 0.06em;



  text-transform: uppercase;



  color: var(--pc-orange);



  background: rgba(0, 0, 0, 0.35);



  padding: 5px 10px;



  border-radius: 6px;



  border: 1px solid rgba(255, 145, 77, 0.2);



  width: 100%;



  text-align: center;



}







.pipeline-metric-tag--highlight {



  color: #FFFFFF;



  background-color: #C41C1C;
  background: var(--pc-gradient);



  border: none;



  box-shadow: 0 4px 12px rgba(255, 49, 49, 0.25);



}







.pipeline-connector {



  color: var(--pc-orange);



  display: flex;



  align-items: center;



  justify-content: center;



  opacity: 0.8;



}







.pipeline-widget__compliance {



  display: flex;



  align-items: center;



  justify-content: space-between;



  flex-wrap: wrap;



  gap: 16px;



  padding-top: 1.5rem;



  border-top: 1px solid rgba(255, 255, 255, 0.08);



}







.compliance-info {



  display: flex;



  align-items: center;



  gap: 12px;



  font-size: 1rem;



}







.compliance-info strong {



  display: block;



  color: #FFFFFF;



}







.compliance-info span {



  color: #A69F9B;



}







.compliance-icon-svg {



  width: 22px;



  height: 22px;



  stroke: var(--pc-orange);



  color: var(--pc-orange);



  flex-shrink: 0;



  display: block;



}







.compliance-icon {



  font-size: 1.4rem;



  flex-shrink: 0;



}







.pipeline-action-link {



  color: var(--pc-orange);



  font-weight: 700;



  font-size: 1rem;



  text-decoration: none;



  display: inline-flex;



  align-items: center;



  gap: 6px;



  transition: gap 0.2s ease, color 0.2s ease;



}







.pipeline-action-link:hover {



  color: #FFAA73;



  gap: 10px;



}







@media (max-width: 980px) {



  .pipeline-flow {



    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);



    gap: 16px;



  }



  .pipeline-connector {



    display: none;



  }



}







@media (max-width: 640px) {



  .pipeline-flow {



    grid-template-columns: minmax(0, 1fr);



    gap: 14px;



  }



  .pipeline-widget__compliance {



    flex-direction: column;



    align-items: flex-start;



  }



}







/* 10.2 Pilares de Excelência (Quem Somos) */



.authority-widget {



  background: linear-gradient(145deg, #1C1A19 0%, #272422 100%);



  border: 1px solid rgba(255, 255, 255, 0.1);



  border-radius: var(--radius-lg);



  padding: clamp(1.75rem, 3.5vw, 3rem);



  box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.35);



  position: relative;



  overflow: hidden;



  margin-bottom: 2rem;



}







.authority-widget::before {



  content: "";



  position: absolute;



  top: 0;



  left: 0;



  right: 0;



  height: 4px;



  background: var(--pc-gradient);



}







.authority-widget__header {



  margin-bottom: 2.25rem;



}







.authority-widget__title {



  color: #FFFFFF;



  font-size: clamp(1.4rem, 2.2vw, 2.1rem);



  font-weight: 800;



  margin-top: 0.65rem;



  margin-bottom: 0.65rem;



}







.authority-widget__desc {



  color: #C7C0BC;



  font-size: var(--text-md);



  max-width: 65ch;



  line-height: 1.65;



}







.authority-grid {



  display: grid;



  grid-template-columns: repeat(3, minmax(0, 1fr));



  gap: 20px;



  margin-bottom: 2rem;



}







.authority-card {



  background: rgba(35, 32, 30, 0.9);



  border: 1px solid rgba(255, 255, 255, 0.08);



  border-radius: var(--radius-md);



  padding: 1.65rem 1.45rem;



  display: flex;



  flex-direction: column;



  transition: transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);



}







.authority-card:hover {



  transform: translateY(-4px);



  border-color: rgba(255, 145, 77, 0.35);



  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.45);



}







.authority-card--featured {



  background: linear-gradient(160deg, rgba(46, 34, 29, 0.95) 0%, rgba(35, 32, 30, 0.95) 100%);



  border-color: rgba(255, 145, 77, 0.45);



  position: relative;



}







.authority-card__icon-wrap {



  width: 48px;



  height: 48px;



  border-radius: 12px;



  background: rgba(255, 255, 255, 0.06);



  display: flex;



  align-items: center;



  justify-content: center;



  margin-bottom: 1.15rem;



}







.authority-card__icon-wrap--featured {



  background: var(--pc-gradient);



  box-shadow: 0 6px 18px rgba(255, 49, 49, 0.35);



}







.authority-icon-svg {



  width: 22px;



  height: 22px;



  stroke: #FF914D;



  color: #FF914D;



  display: block;



}







.authority-card__icon-wrap--featured .authority-icon-svg {



  stroke: #FFFFFF;



  color: #FFFFFF;



}







.authority-icon {



  font-size: 1.4rem;



}







.authority-card__tag {



  font-size: 1rem;



  font-weight: 800;



  letter-spacing: 0.08em;



  text-transform: uppercase;



  color: #FF914D;



  margin-bottom: 0.5rem;



}







.authority-card__tag--featured {



  color: #FFAA73;



}







.authority-card__title {



  color: #FFFFFF;



  font-size: 1.35rem;



  font-weight: 800;



  margin-bottom: 0.75rem;



}







.authority-card__desc {



  color: #BDB5AF;



  font-size: 1rem;



  line-height: 1.6;



  margin-bottom: 1.25rem;



}







.authority-card__list {



  list-style: none;



  padding: 0;



  margin: 0;



  display: flex;



  flex-direction: column;



  gap: 10px;



  margin-top: auto;



  border-top: 1px solid rgba(255, 255, 255, 0.08);



  padding-top: 1.15rem;



}







.authority-card__list li {



  position: relative;



  padding-left: 20px;



  font-size: 1rem;



  color: #DDD7D3;



  line-height: 1.5;



}







.authority-card__list li::before {



  content: "✓";



  position: absolute;



  left: 0;



  top: 0;



  color: var(--pc-orange);



  font-weight: 900;



  font-size: 1rem;



}







.authority-widget__footer {



  display: flex;



  align-items: center;



  justify-content: space-between;



  flex-wrap: wrap;



  gap: 16px;



  padding-top: 1.5rem;



  border-top: 1px solid rgba(255, 255, 255, 0.08);



}







.authority-footer-pill {



  display: inline-flex;



  align-items: center;



  gap: 8px;



  font-size: 1rem;



  color: #FFFFFF;



}







.verified-badge {



  display: inline-flex;



  align-items: center;



  justify-content: center;



  width: 24px;



  height: 24px;



  border-radius: 50%;



  background: #047857;



  color: #FFFFFF;



  font-size: 1rem;



  font-weight: 900;



}







@media (max-width: 920px) {



  .authority-grid {



    grid-template-columns: minmax(0, 1fr);



    gap: 16px;



  }



}







/* 10.3 Indicadores de Cases e Métricas */



.cases-metric-widget {



  background: var(--pc-white);



  border: 1px solid var(--pc-border-light);



  border-radius: var(--radius-lg);



  padding: clamp(1.5rem, 3.5vw, 2.75rem);



  box-shadow: var(--shadow-md);



  margin-bottom: 2.5rem;



}







.cases-metric-widget__header {



  margin-bottom: 2rem;



}







.metric-header-top {



  display: flex;



  align-items: center;



  justify-content: space-between;



  gap: 12px;



  flex-wrap: wrap;



  margin-bottom: 0.75rem;



}







.badge-neutral {



  font-size: 1rem;



  font-weight: 700;



  letter-spacing: 0.06em;



  text-transform: uppercase;



  color: var(--pc-text-muted);



  background: var(--pc-surface-cream);



  padding: 4px 10px;



  border-radius: var(--radius-pill);



  border: 1px solid var(--pc-border-light);



}







.cases-metric-widget__title {



  font-size: clamp(1.35rem, 2vw, 1.85rem);



  font-weight: 800;



  color: var(--pc-text-primary);



  margin-bottom: 0.5rem;



}







.cases-metric-widget__desc {



  color: var(--pc-text-secondary);



  font-size: var(--text-sm);



  max-width: 65ch;



  line-height: 1.6;



}







.big-numbers-row {



  display: grid;



  grid-template-columns: repeat(3, minmax(0, 1fr));



  gap: 16px;



  margin: 1.5rem 0 2rem;



}







.big-number-stat {



  background: var(--pc-surface-cream);



  border: 1px solid var(--pc-border-light);



  border-radius: var(--radius-md);



  padding: 1.25rem 1rem;



  text-align: center;



  transition: transform 0.2s ease, border-color 0.2s ease;



}







.big-number-stat:hover {



  border-color: var(--pc-orange);



  transform: translateY(-2px);



}







.big-number-val {



  display: block;



  font-family: var(--font-display);



  font-size: clamp(2rem, 3.2vw, 2.75rem);



  font-weight: 900;



  color: var(--pc-red);



  line-height: 1.1;



  margin-bottom: 0.35rem;



}







.big-number-lbl {



  display: block;



  font-size: 1rem;



  font-weight: 700;



  color: var(--pc-text-primary);



  margin-bottom: 0.25rem;



}







.big-number-note {



  display: block;



  font-size: 1rem;



  color: var(--pc-text-muted);



  line-height: 1.4;



}







@media (max-width: 768px) {



  .big-numbers-row {



    grid-template-columns: minmax(0, 1fr);



    gap: 12px;



  }



}







.cases-metric-grid {



  display: grid;



  grid-template-columns: repeat(2, minmax(0, 1fr));



  gap: 20px;



  margin-bottom: 1.75rem;



}







.case-metric-card {



  background: var(--pc-surface-cream);



  border: 1px solid var(--pc-border-light);



  border-radius: var(--radius-md);



  padding: 1.5rem;



  display: flex;



  flex-direction: column;



}







.case-metric-card__header {



  margin-bottom: 1.5rem;



}







.case-ref-tag {



  font-size: 1rem;



  font-weight: 800;



  letter-spacing: 0.08em;



  text-transform: uppercase;



  color: var(--pc-text-muted);



  display: block;



  margin-bottom: 0.35rem;



}







.case-metric-card__title {



  font-size: 1.35rem;



  font-weight: 800;



  color: var(--pc-text-primary);



  margin: 0;



}







.case-metric-summary {



  display: flex;



  flex-direction: column;



  gap: 12px;



  margin-bottom: 1.5rem;



  background: var(--pc-surface-warm);



  padding: 1.15rem 1.25rem;



  border-radius: var(--radius-md);



  border: 1px solid var(--pc-border-light);



}







.case-metric-stat {



  display: flex;



  justify-content: space-between;



  align-items: baseline;



  gap: 12px;



}







.metric-row {



  display: flex;



  flex-direction: column;



  gap: 6px;



}







.metric-label-row {



  display: flex;



  justify-content: space-between;



  align-items: baseline;



  font-size: 1rem;



}







.metric-label {



  font-weight: 600;



  color: var(--pc-text-secondary);



}







.metric-value {



  font-family: var(--font-display);



  font-size: 1.35rem;



  font-weight: 900;



  color: var(--pc-text-primary);



}







.metric-value--primary {



  color: #C41C1C;



}







.metric-bar-track {



  width: 100%;



  height: 14px;



  background: rgba(0, 0, 0, 0.07);



  border-radius: var(--radius-pill);



  overflow: hidden;



}







.metric-bar-fill {



  height: 100%;



  border-radius: var(--radius-pill);



  transition: width 0.8s var(--ease-out);



}







.metric-bar-fill--dark {



  background: var(--pc-charcoal);



}







.metric-bar-fill--gradient {



  background: var(--pc-gradient);



}







.case-metric-card__footer {



  margin-top: auto;



  padding-top: 1.15rem;



  border-top: 1px solid var(--pc-border-light);



}







.conversion-kpi {



  display: block;



  font-size: 1rem;



  color: var(--pc-text-primary);



  margin-bottom: 0.35rem;



}







.conversion-kpi strong {



  color: #C41C1C;



  font-size: 1.15rem;



}







.case-metric-note {



  font-size: 1rem;



  color: var(--pc-text-muted);



  line-height: 1.5;



  margin: 0;



}







.cases-metric-widget__notice {



  background: #FFF7F2;



  border: 1px solid #FFD9C7;



  border-radius: var(--radius-sm);



  padding: 12px 16px;



  display: flex;



  align-items: flex-start;



  gap: 12px;



  font-size: 1rem;



  color: #692A1A;



}







.notice-icon {



  font-size: 1.1rem;



  flex-shrink: 0;



}







.cases-metric-widget__notice p {



  margin: 0;



  line-height: 1.5;



}







@media (max-width: 768px) {



  .cases-metric-grid {



    grid-template-columns: minmax(0, 1fr);



  }



}







/* 10.4 Timeline Operacional (Natal Premiado) */



.timeline-widget {



  background: linear-gradient(145deg, #1B1918 0%, #262220 100%);



  border: 1px solid rgba(255, 145, 77, 0.25);



  border-radius: var(--radius-lg);



  padding: clamp(1.5rem, 3.5vw, 2.75rem);



  box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.45);



  margin-bottom: 2.5rem;



}







.timeline-widget__header {



  margin-bottom: 2.25rem;



}







.timeline-widget__title {



  color: #FFFFFF;



  font-size: clamp(1.35rem, 2vw, 1.85rem);



  font-weight: 800;



  margin-bottom: 0.5rem;



}







.timeline-widget__desc {



  color: #C7C0BC;



  font-size: var(--text-sm);



  max-width: 65ch;



  line-height: 1.6;



}







.timeline-steps {



  display: grid;



  grid-template-columns: repeat(4, minmax(0, 1fr));



  gap: 18px;



  margin-bottom: 2rem;



  position: relative;



}







.timeline-step {



  display: flex;



  flex-direction: column;



}







.timeline-step__marker {



  position: relative;



  display: flex;



  align-items: center;



  margin-bottom: 1.15rem;



}







.step-dot {



  width: 38px;



  height: 38px;



  border-radius: 50%;



  background: rgba(255, 255, 255, 0.1);



  border: 2px solid rgba(255, 255, 255, 0.2);



  color: #FFFFFF;



  display: flex;



  align-items: center;



  justify-content: center;



  font-family: var(--font-display);



  font-size: 1.1rem;



  font-weight: 900;



  flex-shrink: 0;



  z-index: 2;



}







.step-dot--highlight {



  background-color: #C41C1C;
  background: var(--pc-gradient);



  border-color: #FFAA73;



  box-shadow: 0 0 16px rgba(255, 49, 49, 0.5);



}







.timeline-line {



  position: absolute;



  top: 50%;



  left: 38px;



  right: -18px;



  height: 3px;



  background: rgba(255, 255, 255, 0.12);



  transform: translateY(-50%);



  z-index: 1;



}







.timeline-step__card {



  background: rgba(36, 33, 31, 0.85);



  border: 1px solid rgba(255, 255, 255, 0.08);



  border-radius: var(--radius-md);



  padding: 1.25rem 1.15rem;



  display: flex;



  flex-direction: column;



  height: 100%;



}







.timeline-step__card--highlight {



  border-color: rgba(255, 145, 77, 0.4);



  background: linear-gradient(150deg, rgba(46, 33, 27, 0.95) 0%, rgba(36, 33, 31, 0.95) 100%);



}







.timeline-date {



  font-size: 1rem;



  font-weight: 800;



  letter-spacing: 0.06em;



  text-transform: uppercase;



  color: var(--pc-orange);



  margin-bottom: 0.4rem;



}







.timeline-step__title {



  color: #FFFFFF;



  font-size: 1.15rem;



  font-weight: 800;



  margin-bottom: 0.5rem;



}







.timeline-step__desc {



  color: #BDB5AF;



  font-size: 1rem;



  line-height: 1.55;



  margin-bottom: 1rem;



  flex-grow: 1;



}







.timeline-status {



  display: inline-block;



  font-size: 1rem;



  font-weight: 700;



  text-transform: uppercase;



  letter-spacing: 0.06em;



  color: #A69F9B;



  background: rgba(255, 255, 255, 0.06);



  padding: 4px 8px;



  border-radius: 4px;



  margin-top: auto;



}







.timeline-status--urgent {



  color: #FF8585;



  background: rgba(255, 49, 49, 0.15);



  border: 1px solid rgba(255, 49, 49, 0.3);



}







.timeline-status--active {



  color: #FFB385;



  background: rgba(255, 145, 77, 0.15);



  border: 1px solid rgba(255, 145, 77, 0.3);



}







.timeline-widget__cta {



  display: flex;



  align-items: center;



  justify-content: space-between;



  flex-wrap: wrap;



  gap: 16px;



  padding-top: 1.5rem;



  border-top: 1px solid rgba(255, 255, 255, 0.08);



}







.timeline-widget__cta strong {



  display: block;



  color: #FFFFFF;



  font-size: 1.05rem;



  margin-bottom: 0.25rem;



}







.timeline-widget__cta p {



  color: #A69F9B;



  font-size: 1rem;



  margin: 0;



}







@media (max-width: 980px) {



  .timeline-steps {



    grid-template-columns: repeat(2, minmax(0, 1fr));



    gap: 20px;



  }



  .timeline-line {



    display: none;



  }



}







@media (max-width: 600px) {



  .timeline-steps {



    grid-template-columns: minmax(0, 1fr);



  }



}







/* 10.5 Matriz de Soluções B2B */



.solutions-matrix {



  background: var(--pc-white);



  border: 1px solid var(--pc-border-light);



  border-radius: var(--radius-lg);



  padding: clamp(1.75rem, 3.5vw, 3rem);



  box-shadow: var(--shadow-md);



  margin-bottom: 2.5rem;



}







.solutions-matrix__header {



  margin-bottom: 2.25rem;



}

.solutions-matrix .pipeline-tag {
  color: #C23B00;
  background: var(--pc-surface-warm);
  border-color: rgba(194, 59, 0, 0.25);
}







.solutions-matrix__title {



  font-size: clamp(1.4rem, 2.2vw, 2.1rem);



  font-weight: 800;



  color: var(--pc-text-primary);



  margin-top: 0.5rem;



  margin-bottom: 0.65rem;



}







.solutions-matrix__desc {



  color: var(--pc-text-secondary);



  font-size: var(--text-md);



  max-width: 65ch;



  line-height: 1.65;



}







.solutions-matrix__grid {



  display: grid;



  grid-template-columns: repeat(3, minmax(0, 1fr));



  gap: 22px;



}







.matrix-card {



  background: var(--pc-surface-cream);



  border: 1px solid var(--pc-border-light);



  border-radius: var(--radius-md);



  padding: 1.75rem 1.45rem;



  display: flex;



  flex-direction: column;



  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);



}







.matrix-card:hover {



  transform: translateY(-4px);



  box-shadow: var(--shadow-sm);



}







.matrix-card--featured {



  background: #FFFFFF;



  border-color: rgba(255, 145, 77, 0.4);



  box-shadow: 0 16px 40px -10px rgba(255, 49, 49, 0.12);



  position: relative;



}







.matrix-card--featured::before {



  content: "";



  position: absolute;



  top: 0;



  left: 0;



  right: 0;



  height: 4px;



  background: var(--pc-gradient);



  border-radius: var(--radius-md) var(--radius-md) 0 0;



}







.matrix-card__badge-row {



  display: flex;



  align-items: center;



  justify-content: space-between;



  flex-wrap: wrap;



  gap: 8px;



  margin-bottom: 1rem;



}







.matrix-type-tag {



  font-size: 1rem;



  font-weight: 800;



  letter-spacing: 0.08em;



  text-transform: uppercase;



  color: var(--pc-text-muted);



}







.matrix-type-tag--featured {



  color: #C41C1C;



}







.matrix-card__title {



  font-size: 1.35rem;



  font-weight: 800;



  color: var(--pc-text-primary);



  margin-bottom: 0.65rem;



}







.matrix-card__summary {



  font-size: 1rem;



  color: var(--pc-text-secondary);



  line-height: 1.55;



  margin-bottom: 1.25rem;



}







.matrix-card__features {



  list-style: none;



  padding: 0;



  margin: 0 0 1.5rem 0;



  display: flex;



  flex-direction: column;



  gap: 10px;



  font-size: 1rem;



  color: var(--pc-text-secondary);



  flex-grow: 1;



}







.matrix-card__features li {



  position: relative;



  padding-left: 18px;



  line-height: 1.45;



}







.matrix-card__features li::before {



  content: "•";



  position: absolute;



  left: 2px;



  top: 0;



  color: var(--pc-red);



  font-weight: 900;



  font-size: 1.1rem;



}







.matrix-card .btn {



  margin-top: auto;



}







@media (max-width: 960px) {



  .solutions-matrix__grid {



    grid-template-columns: minmax(0, 1fr);



  }



}







.pipeline-num--highlight {



  background: var(--pc-gradient);



  box-shadow: 0 4px 14px rgba(255, 145, 77, 0.45);



}







.btn--sm {



  padding: 8px 16px;



  font-size: 1rem;



}







.text-center {



  text-align: center;



}







.blog-article {



  width: 100%;



}







.table-responsive {



  width: 100%;



  overflow-x: auto;



  -webkit-overflow-scrolling: touch;



  margin: 1.5rem 0;



}







/* ==========================================================================



   14. Seção de Clientes e Marcas Recomendadas (Social Proof)



   ========================================================================== */



.clients-section {



  padding: 4rem 0;



  border-top: 1px solid rgba(255, 255, 255, 0.08);



  border-bottom: 1px solid rgba(255, 255, 255, 0.08);



  position: relative;



  overflow: hidden;



}







.clients-section.surface-light {



  border-color: var(--pc-border-light);



  background-color: #FBF9F7;



}







.clients-header {



  margin-bottom: 2.5rem;



  max-width: 840px;



  margin-left: auto;



  margin-right: auto;



}







.clients-header h2 {



  font-size: clamp(1.75rem, 3.5vw, 2.35rem);



  line-height: 1.2;



  margin: 0.5rem 0 1rem;



}







.clients-grid {



  display: grid !important;



  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;



  gap: 1.5rem;



  align-items: stretch;



  max-width: 1140px;



  margin-left: auto;



  margin-right: auto;



}







@media (max-width: 860px) {



  .clients-grid {



    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;



    gap: 1rem;



  }



}







@media (max-width: 520px) {



  .clients-grid {



    grid-template-columns: 1fr !important;



    gap: 0.875rem;



  }



}







.client-logo-card {



  background: #FFFFFF;



  border: 1px solid var(--pc-border-light);



  border-radius: 16px;



  padding: 1.75rem 1.25rem;



  display: flex;



  flex-direction: column;



  align-items: center;



  justify-content: center;



  text-align: center;



  gap: 1.15rem;



  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;



  min-height: 155px;



  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);



}







.surface-light .client-logo-card {



  background: #FFFFFF;



  border: 1px solid var(--pc-border-light);



  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);



}







.client-logo-card:hover {



  transform: translateY(-4px);



  border-color: rgba(255, 49, 49, 0.4);



  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);



}







.client-logo-img-wrap {



  height: 68px;



  display: flex;



  align-items: center;



  justify-content: center;



  width: 100%;



}







.client-logo-img-wrap img {



  max-height: 58px;



  max-width: 90%;



  width: auto;



  height: auto;



  object-fit: contain;



  filter: none;



  transition: transform 0.25s ease;



}







.client-logo-card:hover img {



  transform: scale(1.05);



  filter: drop-shadow(0 4px 12px rgba(255, 49, 49, 0.15));



}







.client-logo-info {



  display: flex;



  flex-direction: column;



  gap: 4px;



}







.client-logo-name {



  font-size: 1rem;



  font-weight: 700;



  color: var(--pc-text-primary);



  line-height: 1.3;



}







.surface-dark .client-logo-name {



  color: var(--pc-text-primary);



}







.client-logo-segment {



  font-size: 1rem;



  color: var(--pc-text-secondary);



  line-height: 1.3;



}







/* ==========================================================================



   15. Arquitetura do Blog e Artigos Contextuais



   ========================================================================== */



.blog-hero {



  padding: 5rem 0 3rem;



  background: radial-gradient(circle at 80% 20%, rgba(255, 49, 49, 0.12) 0%, transparent 60%),



              radial-gradient(circle at 10% 80%, rgba(255, 145, 77, 0.08) 0%, transparent 60%),



              var(--pc-bg-dark);



  color: #FFFFFF;



  border-bottom: 1px solid rgba(255, 255, 255, 0.08);



}







.blog-hero h1 {



  font-family: var(--font-display);



  font-size: clamp(2rem, 4.5vw, 3.25rem);



  font-weight: 900;



  line-height: 1.15;



  margin: 0.75rem 0 1.25rem;



  max-width: 900px;



}







.blog-filter-bar {



  display: flex;



  gap: 0.5rem;



  flex-wrap: wrap;



  margin: 2rem 0 3rem;



  padding: 0.5rem;



  background: rgba(255, 255, 255, 0.03);



  border: 1px solid rgba(255, 255, 255, 0.08);



  border-radius: 999px;



  width: fit-content;



  max-width: 100%;



}







.surface-light .blog-filter-bar {



  background: #EFEAE4;



  border-color: var(--pc-border-light);



}







.blog-filter-pill {



  padding: 8px 18px;



  border-radius: 999px;



  font-size: 1rem;



  font-weight: 600;



  color: var(--pc-text-secondary);



  text-decoration: none;



  transition: all 0.2s ease;



  white-space: nowrap;



}







.blog-filter-pill:hover,



.blog-filter-pill.is-active {



  background-color: #C41C1C;
  background: var(--pc-gradient);



  color: #FFFFFF;



  box-shadow: 0 4px 14px rgba(255, 49, 49, 0.35);



}







.blog-grid {



  display: grid;



  grid-template-columns: repeat(2, minmax(0, 1fr));



  gap: 2rem;



  margin-bottom: 4rem;



}







@media (max-width: 820px) {



  .blog-grid {



    grid-template-columns: 1fr;



    gap: 1.5rem;



  }



}







.blog-card {



  background: #FFFFFF;



  border: 1px solid var(--pc-border-light);



  border-radius: 20px;



  padding: 2.25rem 2rem;



  display: flex;



  flex-direction: column;



  justify-content: space-between;



  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);



  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;



  position: relative;



  min-width: 0;



  max-width: 100%;



}







.blog-card:hover {



  transform: translateY(-6px);



  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);



  border-color: var(--pc-orange);



}







.blog-card--featured {



  grid-column: 1 / -1;



  background: linear-gradient(135deg, #FFFFFF 0%, #FFF8F4 100%);



  border-color: rgba(255, 145, 77, 0.4);



  padding: 2.75rem 2.5rem;



}







@media (max-width: 768px) {



  .blog-card,



  .blog-card--featured {



    padding: 1.5rem 1.25rem;



  }



}







.blog-card__thumb-link {



  display: block;



  width: 100%;



  max-width: 100%;



  text-decoration: none;



  margin-bottom: 1.25rem;



  border-radius: 14px;



  overflow: hidden;



  min-width: 0;



}







.blog-card__thumb {



  width: 100%;



  max-width: 100%;



  aspect-ratio: 16 / 9;



  border-radius: 14px;



  overflow: hidden;



  background: var(--pc-charcoal);



  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);



  min-width: 0;



}







.blog-card__thumb picture,



.blog-card__thumb img {



  display: block;



  width: 100% !important;



  max-width: 100% !important;



  height: 100% !important;



  object-fit: cover !important;



}







.blog-card__thumb-img {



  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);



}







.blog-card:hover .blog-card__thumb-img {



  transform: scale(1.04);



}







.blog-card__content {



  display: flex;



  flex-direction: column;



  flex-grow: 1;



  min-width: 0;



  max-width: 100%;



}







.blog-card__header {



  display: flex;



  justify-content: space-between;



  align-items: center;



  flex-wrap: wrap;



  gap: 0.75rem;



  margin-bottom: 1rem;



}







.blog-card__category {



  display: inline-block;



  font-size: 1rem;



  font-weight: 700;



  letter-spacing: 0.75px;



  text-transform: uppercase;



  color: var(--pc-red);



  background: rgba(255, 49, 49, 0.08);



  padding: 4px 12px;



  border-radius: 999px;



  border: 1px solid rgba(255, 49, 49, 0.2);



}







.blog-card__meta {



  font-size: 1rem;



  color: var(--pc-text-secondary);



}







.blog-card__title {



  font-size: 1.45rem;



  line-height: 1.28;



  font-weight: 800;



  color: var(--pc-text-primary);



  margin: 0.5rem 0 1rem;



}







.blog-card--featured .blog-card__title {



  font-size: clamp(1.6rem, 2.8vw, 2.1rem);



}







.blog-card__title a {



  color: inherit;



  text-decoration: none;



}







.blog-card__title a:hover {



  color: var(--pc-red);



}







.blog-card__excerpt {



  font-size: 1.05rem;



  line-height: 1.6;



  color: var(--pc-text-secondary);



  margin-bottom: 1.75rem;



  flex-grow: 1;



}







.blog-card__footer {



  display: flex;



  justify-content: space-between;



  align-items: center;



  border-top: 1px solid var(--pc-border-light);



  padding-top: 1.25rem;



  margin-top: auto;



}







.blog-card__author {



  font-size: 1rem;



  font-weight: 600;



  color: var(--pc-text-primary);



}







.blog-card__readmore {



  display: inline-flex;



  align-items: center;



  gap: 6px;



  font-size: 1rem;



  font-weight: 700;



  color: var(--pc-red);



  text-decoration: none;



  transition: transform 0.2s ease, color 0.2s ease;



}







.blog-card__readmore:hover {



  color: #9E1414;



  transform: translateX(4px);



}







/* Estrutura do Artigo Individual */



.blog-article-hero {



  padding: 4.5rem 0 3rem;



  background: var(--pc-bg-dark);



  color: #FFFFFF;



  border-bottom: 1px solid rgba(255, 255, 255, 0.08);



}







.blog-article-hero__header {



  max-width: 920px;



  margin: 0 auto;



}







.blog-article-hero h1 {



  font-family: var(--font-display);



  font-size: clamp(2rem, 4vw, 3.1rem);



  font-weight: 900;



  line-height: 1.15;



  margin: 1.25rem 0 1.25rem;



  letter-spacing: -0.5px;



}







.blog-article-hero .lead {



  font-size: 1.15rem;



  line-height: 1.6;



  color: #CBCDD6;



  margin-bottom: 2rem;



}







.blog-article-meta {



  display: flex;



  align-items: center;



  gap: 1.5rem;



  flex-wrap: wrap;



  padding-top: 1.5rem;



  border-top: 1px solid rgba(255, 255, 255, 0.1);



  font-size: 1rem;



  color: #A5AAB8;



}







.blog-article-meta strong {



  color: #FFFFFF;



}







.blog-article__cover {



  width: 100%;



  max-width: 100%;



  min-width: 0;



  margin-top: 2.5rem;



  border-radius: 18px;



  overflow: hidden;



  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);



  border: 1px solid rgba(255, 255, 255, 0.12);



  background: var(--pc-charcoal);



  aspect-ratio: 16 / 9;



}







@media (max-width: 768px) {



  .blog-article__cover {



    margin-top: 1.75rem;



    border-radius: 12px;



  }



}







.blog-article__cover picture,



.blog-article__cover img,



.blog-article__cover-img {



  display: block;



  width: 100% !important;



  max-width: 100% !important;



  height: 100% !important;



  object-fit: cover !important;



}







.blog-article__body {



  max-width: 860px;



  margin: 0 auto;



  font-size: 1.0625rem;



  line-height: 1.75;



  color: #2D3139;



}







.blog-article__body p {



  margin-bottom: 1.5rem;



}







.blog-article__body h2 {



  font-size: 1.85rem;



  font-weight: 800;



  line-height: 1.25;



  margin: 3rem 0 1.25rem;



  color: var(--pc-text-primary);



  border-bottom: 2px solid var(--pc-border-light);



  padding-bottom: 0.5rem;



}







.blog-article__body h3 {



  font-size: 1.35rem;



  font-weight: 700;



  line-height: 1.35;



  margin: 2rem 0 0.875rem;



  color: var(--pc-text-primary);



}







.blog-article__body ul,



.blog-article__body ol {



  margin: 1rem 0 2rem 1.5rem;



  padding: 0;



}







.blog-article__body li {



  margin-bottom: 0.75rem;



  line-height: 1.6;



}







.article-callout {



  background: rgba(255, 49, 49, 0.05);



  border-left: 4px solid var(--pc-red);



  padding: 1.5rem 1.75rem;



  border-radius: 0 14px 14px 0;



  margin: 2.25rem 0;



  font-size: 1rem;



  line-height: 1.6;



  color: var(--pc-text-primary);



}







.article-callout strong {



  display: block;



  margin-bottom: 0.35rem;



  color: var(--pc-red);



}







.article-cta-box {



  background: linear-gradient(135deg, var(--pc-bg-dark) 0%, #1A1C24 100%);



  color: #FFFFFF;



  padding: 2.5rem 2.25rem;



  border-radius: 20px;



  margin: 3.5rem 0;



  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);



  border: 1px solid rgba(255, 255, 255, 0.1);



  text-align: center;



}







.article-cta-box h3 {



  color: #FFFFFF;



  font-size: 1.75rem;



  margin-top: 0;



  margin-bottom: 0.75rem;



}







.article-cta-box p {



  color: #CBCDD6;



  max-width: 650px;



  margin: 0 auto 1.5rem;



}







/* ==========================================================================



   13. Destaques Visuais de Conversão e Elementos Institucionais



   ========================================================================== */







/* Badge comemorativo / Destaque do Prêmio R$ 1.000 */



.badge-prize {



  display: inline-flex;



  align-items: center;



  background-color: #C41C1C;
  background: var(--pc-gradient);



  color: #FFFFFF !important;



  font-weight: 800;



  font-size: 1rem;



  padding: 4px 14px;



  border-radius: var(--radius-pill);



  box-shadow: 0 2px 8px rgba(255, 49, 49, 0.3);



  white-space: nowrap;



}







/* Callout de Alto Destaque para Campanhas Exclusivas */
.exclusive-cta-callout {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  background: linear-gradient(145deg, #1C1B1A 0%, #292523 100%);
  border: 1px solid rgba(255, 145, 77, 0.4);
  border-left: 5px solid var(--pc-orange);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  margin: 1.5rem 0;
  color: #F7F4F2;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
}

@media (min-width: 768px) {
  .exclusive-cta-callout {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    gap: 1.5rem;
  }
}

.exclusive-cta-callout__content {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: break-word;
}

.exclusive-cta-callout__tag {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pc-orange);
  margin-bottom: 0.35rem;
  word-break: break-word;
}

.exclusive-cta-callout__title {
  color: #FFFFFF !important;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 0.5rem 0;
  word-break: break-word;
  overflow-wrap: break-word;
}

.exclusive-cta-callout__desc {
  color: #D6CEC8;
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0;
  word-break: break-word;
  overflow-wrap: break-word;
}

.exclusive-cta-callout .btn {
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  text-align: center;
  justify-content: center;
  width: 100%;
}

@media (min-width: 768px) {
  .exclusive-cta-callout .btn {
    flex-shrink: 0;
    white-space: nowrap;
    width: auto;
  }
}







/* Detalhamento de Cases Desafiadores (Desafio, Ações, Resultados) */



.case-detail-block {



  margin-top: 0.75rem;



  padding-top: 0.75rem;



  border-top: 1px solid var(--pc-border-light);



}







.case-detail-label {



  display: block;



  font-size: 0.82rem;



  font-weight: 800;



  text-transform: uppercase;



  letter-spacing: 0.05em;



  color: #C23B00;



  margin-bottom: 0.25rem;



}

.surface-dark .case-detail-label,
.card--dark .case-detail-label {
  color: var(--pc-orange);
}







.case-detail-text {



  font-size: 0.95rem;



  line-height: 1.55;



  color: var(--pc-text-secondary);



  margin: 0;



}















/* ==========================================================================



   20. Motor de Efeitos Dinâmicos e Animações ao Rolar (Scroll Reveal)



   ========================================================================== */







/* Quando o JavaScript está ativo e o usuário não solicitou movimento reduzido */



.has-reveal .reveal {



  opacity: 0;



  transform: translateY(28px);



  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);



  will-change: opacity, transform;



}







.has-reveal .reveal.is-revealed {



  opacity: 1;



  transform: translateY(0);



}







/* Stagger para Grids de Cards, Big Numbers e Pilares */



.has-reveal .reveal-stagger > * {



  opacity: 0;



  transform: translateY(26px);



  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);



  will-change: opacity, transform;



}







.has-reveal .reveal-stagger.is-revealed > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.04s; }



.has-reveal .reveal-stagger.is-revealed > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.10s; }



.has-reveal .reveal-stagger.is-revealed > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.16s; }



.has-reveal .reveal-stagger.is-revealed > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.22s; }



.has-reveal .reveal-stagger.is-revealed > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 0.28s; }



.has-reveal .reveal-stagger.is-revealed > *:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 0.34s; }



.has-reveal .reveal-stagger.is-revealed > *:nth-child(7) { opacity: 1; transform: translateY(0); transition-delay: 0.40s; }



.has-reveal .reveal-stagger.is-revealed > *:nth-child(8) { opacity: 1; transform: translateY(0); transition-delay: 0.46s; }



.has-reveal .reveal-stagger.is-revealed > *:nth-child(9) { opacity: 1; transform: translateY(0); transition-delay: 0.52s; }



.has-reveal .reveal-stagger.is-revealed > *:nth-child(10) { opacity: 1; transform: translateY(0); transition-delay: 0.58s; }



.has-reveal .reveal-stagger.is-revealed > *:nth-child(11) { opacity: 1; transform: translateY(0); transition-delay: 0.64s; }



.has-reveal .reveal-stagger.is-revealed > *:nth-child(12) { opacity: 1; transform: translateY(0); transition-delay: 0.70s; }







/* Micro-interação Hover Lift e Ambient Glow em Cards */



.card,



.client-logo-card,



.case-metric-card,



.pillar-card,



.plan-card {



  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease;



}







.card:hover,



.client-logo-card:hover,



.case-metric-card:hover,



.pillar-card:hover,



.plan-card:hover {



  transform: translateY(-5px);



  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 49, 49, 0.22);



}







/* Micro-interação Shimmer em Botões Primários */



.btn--primary {



  position: relative;



  overflow: hidden;



}







.btn--primary::after {



  content: '';



  position: absolute;



  top: -50%;



  left: -60%;



  width: 40%;



  height: 200%;



  background: linear-gradient(



    90deg,



    rgba(255, 255, 255, 0) 0%,



    rgba(255, 255, 255, 0.28) 50%,



    rgba(255, 255, 255, 0) 100%



  );



  transform: rotate(25deg);



  pointer-events: none;



  opacity: 0;



  transition: opacity 0.2s;



}







.btn--primary:hover::after {



  opacity: 1;



  animation: btnShimmer 1s ease-out forwards;



}







@keyframes btnShimmer {



  0% { left: -60%; }



  100% { left: 140%; }



}







/* Big Numbers: realce visual no carregamento */



.big-number-val {



  display: inline-block;



  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s;



}







.big-number-stat:hover .big-number-val {



  transform: scale(1.05);



  color: var(--pc-red);



}







/* Acessibilidade: respeita preferências de movimento reduzido */



@media (prefers-reduced-motion: reduce) {



  .has-reveal .reveal,



  .has-reveal .reveal-stagger > * {



    opacity: 1 !important;



    transform: none !important;



    transition: none !important;



  }



  .status-dot-pulse {



    animation: none !important;



  }



  .btn--primary::after {



    display: none !important;



  }



}





/* Classes Auxiliares de Navegação e Header */

.drawer-brand {

  display: inline-flex;

  align-items: center;

  text-decoration: none;

}



.drawer-brand img {

  max-height: 44px;

  width: auto;

  object-fit: contain;

}



.nav-link--parent {

  display: inline-flex;

  align-items: center;

  gap: 6px;

}



.drawer-contact-text {

  font-size: 0.88rem;

  font-weight: 700;

  color: #0B6B5F;

}



.header-wa-label {

  font-size: 0.85rem;

  font-weight: 700;

  color: #0B6B5F;

}



/* Otimização de Performance e PageSpeed Insights: Renderização assíncrona abaixo da dobra */
@media (min-width: 768px) {
  .section:not(.hero-section):not(.page-hero):not(.blog-hero) {
    content-visibility: auto;
    contain-intrinsic-size: 1px 600px;
  }
}


/* Utilitário de acessibilidade e descoberta declarativa WebMCP */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   Responsividade Desktop Refinada (921px a 1260px) e Header Fixo
   ========================================================================== */
@media (min-width: 921px) {
  .mobile-submenu-toggle,
  .site-nav-drawer-header,
  .site-nav-drawer-footer,
  .nav-backdrop,
  .menu-toggle {
    display: none !important;
  }

  .site-nav {
    display: flex !important;
    position: static !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
    visibility: visible !important;
    pointer-events: auto !important;
    margin-left: auto;
  }

  .site-nav-list {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 2px;
  }
}

@media (min-width: 921px) and (max-width: 1220px) {
  .header-inner {
    gap: 8px;
  }

  .brand-logo img {
    width: 142px;
  }

  .nav-link {
    padding: 7px 9px;
    font-size: 0.86rem;
    gap: 4px;
  }

  .nav-badge-pill {
    font-size: 0.6rem;
    padding: 2px 5px;
  }

  .header-actions {
    gap: 8px;
    margin-left: 6px;
  }

  .header-cta {
    padding: 8px 13px;
    font-size: 0.82rem;
    min-height: 38px;
  }
}

@media (min-width: 921px) and (max-width: 1120px) {
  .header-wa-chip {
    padding: 6px 10px;
  }
  .header-wa-label {
    display: none;
  }
}

/* ==========================================================================
   Seção Visual "Como Funciona na Prática" (Home — Lojista → Cliente → Escala)
   ========================================================================== */
.how-it-works-visual {
  width: 100%;
  margin: 0.5rem 0 1rem;
}

.hiw-flow-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 16px;
  width: 100%;
}

.hiw-card {
  background: #FFFFFF;
  border: 1px solid var(--pc-border-light);
  border-top: 4px solid var(--pc-charcoal);
  border-radius: 22px;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  transition: transform 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out);
  min-width: 0;
}

.hiw-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.hiw-card--accent {
  border-top-color: #C23B00;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF9F5 100%);
}

.hiw-card--result {
  border-top-color: var(--pc-red);
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF5F5 100%);
  box-shadow: 0 16px 40px rgba(196, 28, 28, 0.10);
}

.hiw-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 1.25rem;
}

.hiw-icon-circle {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--pc-surface-cream);
  border: 1px solid var(--pc-border-light);
  color: var(--pc-charcoal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.hiw-icon-circle--accent {
  background: var(--pc-surface-warm);
  border-color: rgba(194, 59, 0, 0.25);
  color: #C23B00;
}

.hiw-icon-circle--result {
  background-color: #C41C1C;
  background: var(--pc-gradient);
  border-color: transparent;
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(196, 28, 28, 0.25);
}

.hiw-svg {
  width: 26px !important;
  height: 26px !important;
  display: block;
  margin: auto;
  flex-shrink: 0;
}

.hiw-svg-sm {
  width: 20px !important;
  height: 20px !important;
  display: block;
  margin: auto;
  flex-shrink: 0;
}

.hiw-step-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--pc-surface-cream);
  color: var(--pc-charcoal);
  border: 1px solid var(--pc-border-light);
}

.hiw-step-badge--accent {
  background: var(--pc-surface-warm);
  color: #C23B00;
  border-color: rgba(194, 59, 0, 0.25);
}

.hiw-step-badge--result {
  background-color: #C41C1C;
  background: var(--pc-gradient);
  color: #FFFFFF;
  border-color: transparent;
}

.hiw-card__title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--pc-text-primary);
  margin: 0 0 0.65rem 0;
  line-height: 1.25;
}

.hiw-card__desc {
  font-size: 0.96rem;
  color: var(--pc-text-secondary);
  line-height: 1.6;
  margin: 0 0 1.25rem 0;
  flex-grow: 1;
}

.hiw-visual-simulation {
  background: var(--pc-surface-cream);
  border: 1px solid var(--pc-border-light);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

.hiw-card--accent .hiw-visual-simulation {
  background: #FFFDFB;
  border-color: rgba(194, 59, 0, 0.18);
}

.hiw-card--result .hiw-visual-simulation {
  background: #FFFAFA;
  border-color: rgba(196, 28, 28, 0.18);
}

.hiw-sim-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--pc-text-primary);
  line-height: 1.35;
}

.hiw-sim-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #C41C1C;
  background: var(--pc-gradient);
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hiw-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
}

.hiw-connector__circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid rgba(196, 28, 28, 0.25);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pc-red);
}

@media (max-width: 1080px) {
  .hiw-flow-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .hiw-connector {
    padding: 2px 0;
  }

  .hiw-connector__circle .hiw-svg-sm {
    transform: rotate(90deg);
  }
}