/* Shared responsive overrides + base for all Conexão Azul home variations */

html, body { margin: 0; padding: 0; background: var(--bg-canvas); overflow-x: hidden; }
body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
img { max-width: 100%; }

/* Tap-highlight removal + fast touch response */
* { -webkit-tap-highlight-color: transparent; }
a, button { touch-action: manipulation; }
button:focus { outline: none; }
button:focus-visible { outline: 2px solid var(--color-cyan, #2DD2E1); outline-offset: 2px; }

/*
 * Home storytelling:
 * - o Hero vende a transformação e o próximo passo;
 * - logos criam familiaridade;
 * - uma única faixa quantitativa prova tração, amplitude, experiência e velocidade.
 */
.ca-hero .ca-grid-4 { display: none !important; }

/*
 * Evita urgência artificial no Hero. Os valores "diagnósticos este mês" e
 * "vagas de onboarding" eram hardcoded, portanto não devem participar da
 * persuasão enquanto não vierem de uma fonte dinâmica/auditável.
 */
.ca-hero div:has(> div > strong#ca-live-counter) { display: none !important; }

/* TrustBand: Hero -> LogoWall -> TrustBand. */
.ca-hero + .ca-section + div > div {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  justify-content: initial !important;
  gap: 0 !important;
}

.ca-hero + .ca-section + div > div > div {
  display: block !important;
  min-width: 0 !important;
  padding: 4px 28px !important;
  margin: 0 !important;
  border-right: 1px solid rgba(255,255,255,0.12) !important;
}

.ca-hero + .ca-section + div > div > div:first-child { padding-left: 0 !important; }
.ca-hero + .ca-section + div > div > div:nth-child(4) { border-right: none !important; }
.ca-hero + .ca-section + div > div > div:nth-child(5) { display: none !important; }

.ca-hero + .ca-section + div > div > div > div > div:first-child {
  font-size: 32px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  color: #fff !important;
  white-space: nowrap;
}

.ca-hero + .ca-section + div > div > div > div > div:last-child {
  margin-top: 8px !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: rgba(255,255,255,0.68) !important;
  max-width: 210px;
}

/*
 * PT-BR: sinais mais defensáveis e fáceis de compreender.
 * tração operacional -> amplitude -> tempo de mercado -> time-to-value.
 * Números financeiros, SLA, avaliações e alcance indireto ficam para seções
 * em que seja possível mostrar contexto, escopo e fonte.
 */
html[lang="pt-BR"] .ca-hero + .ca-section + div > div > div:nth-child(1) > div > div:first-child,
html[lang="pt-BR"] .ca-hero + .ca-section + div > div > div:nth-child(2) > div > div:first-child,
html[lang="pt-BR"] .ca-hero + .ca-section + div > div > div:nth-child(3) > div > div:first-child {
  font-size: 0 !important;
}

html[lang="pt-BR"] .ca-hero + .ca-section + div > div > div:nth-child(1) > div > div:first-child::before {
  content: '130+';
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
}
html[lang="pt-BR"] .ca-hero + .ca-section + div > div > div:nth-child(1) > div > div:last-child { font-size: 0 !important; }
html[lang="pt-BR"] .ca-hero + .ca-section + div > div > div:nth-child(1) > div > div:last-child::before {
  content: 'contas de atendimento ativas';
  font-size: 13px;
  line-height: 1.35;
  font-weight: 500;
  color: rgba(255,255,255,0.68);
}

html[lang="pt-BR"] .ca-hero + .ca-section + div > div > div:nth-child(2) > div > div:first-child::before {
  content: '20+';
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
}
html[lang="pt-BR"] .ca-hero + .ca-section + div > div > div:nth-child(2) > div > div:last-child { font-size: 0 !important; }
html[lang="pt-BR"] .ca-hero + .ca-section + div > div > div:nth-child(2) > div > div:last-child::before {
  content: 'segmentos atendidos';
  font-size: 13px;
  line-height: 1.35;
  font-weight: 500;
  color: rgba(255,255,255,0.68);
}

html[lang="pt-BR"] .ca-hero + .ca-section + div > div > div:nth-child(3) > div > div:first-child::before {
  content: 'Desde 2020';
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
}
html[lang="pt-BR"] .ca-hero + .ca-section + div > div > div:nth-child(3) > div > div:last-child { font-size: 0 !important; }
html[lang="pt-BR"] .ca-hero + .ca-section + div > div > div:nth-child(3) > div > div:last-child::before {
  content: 'construindo operações digitais';
  font-size: 13px;
  line-height: 1.35;
  font-weight: 500;
  color: rgba(255,255,255,0.68);
}

html[lang="pt-BR"] .ca-hero + .ca-section + div > div > div:nth-child(4) > div > div:last-child { font-size: 0 !important; }
html[lang="pt-BR"] .ca-hero + .ca-section + div > div > div:nth-child(4) > div > div:last-child::before {
  content: 'meta para o 1º fluxo em produção';
  font-size: 13px;
  line-height: 1.35;
  font-weight: 500;
  color: rgba(255,255,255,0.68);
}

/* ========== RESPONSIVE OVERRIDES ========== */
@media (max-width: 1023px) {
  .ca-nav { padding: 0 16px !important; height: 60px !important; }
  .ca-nav-links { display: none !important; }
  .ca-nav-entrar { display: none !important; }
  .ca-desktop-only { display: none !important; }
  .ca-mobile-only { display: flex !important; }
  .ca-grid-5 { grid-template-columns: repeat(3, 1fr) !important; }
  .ca-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .ca-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .ca-grid-8 { grid-template-columns: repeat(4, 1fr) !important; }
  .ca-footer-grid { grid-template-columns: 1fr 1fr !important; row-gap: 36px !important; }
  .ca-footer-brand { grid-column: 1 / -1; }
  .ca-cta-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .ca-section { padding-left: 24px !important; padding-right: 24px !important; }
  .ca-section-py { padding-top: 72px !important; padding-bottom: 72px !important; }
  .ca-products-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .ca-segments-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .ca-pricing-grid { grid-template-columns: 1fr !important; }
  .ca-agents-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .ca-tabs-content { grid-template-columns: 1fr !important; }
  .ca-editorial-hero { grid-template-columns: 1fr !important; }

  .ca-hero + .ca-section + div > div { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ca-hero + .ca-section + div > div > div { padding: 20px 24px !important; }
  .ca-hero + .ca-section + div > div > div:first-child { padding-left: 24px !important; }
  .ca-hero + .ca-section + div > div > div:nth-child(1),
  .ca-hero + .ca-section + div > div > div:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.12) !important; }
  .ca-hero + .ca-section + div > div > div:nth-child(2) { border-right: none !important; }
}

@media (max-width: 767px) {
  .ca-hero-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
  .ca-grid-2,
  .ca-grid-3,
  .ca-grid-4,
  .ca-grid-5 { grid-template-columns: 1fr !important; }
  .ca-grid-8 { grid-template-columns: repeat(3, 1fr) !important; }
  .ca-stats { grid-template-columns: repeat(2, 1fr) !important; row-gap: 32px !important; }
  .ca-stats .ca-stat:nth-child(odd) { border-left: none !important; }
  .ca-section { padding-left: 20px !important; padding-right: 20px !important; }
  .ca-section-py { padding-top: 64px !important; padding-bottom: 64px !important; }
  .ca-hero-py { padding-top: 40px !important; padding-bottom: 64px !important; }
  .ca-hide-mobile { display: none !important; }
  .ca-hero h1 { font-size: 38px !important; line-height: 1.08 !important; }
  .ca-section h2 { font-size: 28px !important; }
  .ca-stat-num { font-size: 32px !important; }
  .ca-cta-banner { padding: 40px 24px !important; border-radius: 18px !important; }
  .ca-footer-grid { grid-template-columns: 1fr !important; row-gap: 32px !important; }
  .ca-footer-brand { grid-column: 1 / -1 !important; }
  .ca-footer { padding: 48px 20px 100px !important; }
  .ca-footer-outer { padding: 48px 20px calc(88px + env(safe-area-inset-bottom, 0px)) !important; }
  .ca-footer-link { display: block; padding: 6px 0 !important; margin-bottom: 4px !important; }
  .ca-omni-channels { grid-template-columns: repeat(3, 1fr) !important; }
  .ca-api-grid { grid-template-columns: 1fr !important; }
  .ca-segments-grid { grid-template-columns: 1fr !important; }
  .ca-products-grid { grid-template-columns: 1fr !important; }
  .ca-pricing-grid { grid-template-columns: 1fr !important; }
  .ca-agents-grid { grid-template-columns: 1fr !important; }
  .ca-testimonials-grid { grid-template-columns: 1fr !important; }
  .ca-case-grid { grid-template-columns: 1fr !important; }
  .ca-how-grid { grid-template-columns: 1fr !important; row-gap: 32px !important; }
  .ca-how-edge { display: none !important; }
  .ca-editorial-hero { grid-template-columns: 1fr !important; gap: 32px !important; }
  .ca-editorial-hero h1 { font-size: 44px !important; }
  .ca-tabs-tablist { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .ca-chat-cols { grid-template-columns: 1fr !important; }

  .ca-hero + .ca-section + div > div { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ca-hero + .ca-section + div > div > div { padding: 18px 16px !important; }
  .ca-hero + .ca-section + div > div > div:first-child { padding-left: 16px !important; }
  .ca-hero + .ca-section + div > div > div > div > div:first-child { font-size: 27px !important; }
  html[lang="pt-BR"] .ca-hero + .ca-section + div > div > div:nth-child(1) > div > div:first-child::before,
  html[lang="pt-BR"] .ca-hero + .ca-section + div > div > div:nth-child(2) > div > div:first-child::before { font-size: 27px !important; }
  html[lang="pt-BR"] .ca-hero + .ca-section + div > div > div:nth-child(3) > div > div:first-child::before { font-size: 23px !important; }
  .ca-hero + .ca-section + div > div > div > div > div:last-child { font-size: 12px !important; }
  html[lang="pt-BR"] .ca-hero + .ca-section + div > div > div > div > div:last-child::before { font-size: 12px !important; }
}

.ca-mobile-only { display: none; }