/*
 * CAMUS corporate surface system.
 * This file is intentionally loaded after the generated bundle and its component
 * refinements so the visual direction stays centralized without editing build output.
 */

:root {
  --bg: #f3f8fb;
  --bg-soft: #f3f8fb;
  --surface: #ffffff;
  --surface-soft: #eaf3f9;
  --ink: #0b1f33;
  --ink-soft: #4e6475;
  --ink-strong: #0b1f33;
  --line: #d4e4ee;
  --brand-primary: #1f6fa5;
  --brand-secondary: #3c88b8;
  --brand-primary-hover: #185c89;
  --brand-dark: #0d263a;
  --brand-dark-mid: #0d263a;
  --brand-dark-deep: #0d263a;
  --focus: #3c88b8;
  --shadow-soft: 0 8px 24px rgba(13, 38, 58, 0.05);
  --shadow-strong: 0 20px 50px rgba(13, 38, 58, 0.1);
}

body,
.site-root {
  color: var(--ink);
  background: var(--bg);
}

/* O plano aparece logo após a apresentação do produto, sem alterar o DOM. */
.site-root > main {
  display: flex;
  flex-direction: column;
}

.hero-section {
  order: 1;
}

.hero-trust-strip {
  order: 2;
}

.pricing-section {
  order: 3;
}

.quick-section {
  order: 4;
}

.audience-section {
  order: 5;
}

.flow-section {
  order: 6;
}

.closing-section {
  order: 7;
}

.site-root::before,
.site-root::after,
.hero-section::before,
.hero-section::after,
.section-block::before,
.section-block::after,
.quick-section::before,
.quick-section::after,
.audience-section::before,
.audience-section::after,
.flow-section::before,
.flow-section::after,
.pricing-section::before,
.pricing-section::after,
.hero-trust-strip::before,
.site-footer::before {
  content: none !important;
  background: none !important;
  opacity: 0 !important;
}

/* Navigation */
.site-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #0d263a;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 2px 10px rgba(5, 18, 29, 0.14);
}

.site-header::after {
  content: none;
}

.site-header .main-nav a {
  color: #f3f8fc;
  font-weight: 500 !important;
  text-shadow: none;
}

.site-header .main-nav a:hover {
  color: #ffffff;
  text-shadow: none;
}

.camus-theme-toggle {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

/* Shared controls */
.btn-primary,
.header-cta,
.mockup-compose button,
.plan-cta,
.flow-foot a {
  border-color: #1f6fa5 !important;
  background: #1f6fa5 !important;
  box-shadow: 0 6px 14px rgba(13, 38, 58, 0.12) !important;
}

.btn-primary:hover,
.header-cta:hover,
.mockup-compose button:hover,
.plan-cta:hover,
.flow-foot a:hover {
  border-color: #185c89 !important;
  background: #185c89 !important;
  box-shadow: 0 7px 16px rgba(13, 38, 58, 0.14) !important;
}

.btn-primary::before {
  content: none;
}

/* Hero */
.hero-section {
  color: #0b1f33;
  border-top: 0;
  border-bottom: 0;
  background: var(--bg-soft) !important;
  box-shadow: none !important;
}

.hero-grid {
  position: relative;
  isolation: isolate;
}

.hero-grid::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  right: -22px;
  width: min(48%, 680px);
  height: calc(100% + 40px);
  pointer-events: none;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface-soft);
  transform: translateY(-50%);
}

.hero-copy,
.product-mockup {
  position: relative;
  z-index: 1;
}

.hero-kicker,
.section-label,
.section-head-light .section-label,
.quick-section .section-head.quick-head .section-label,
.flow-section .section-label,
.pricing-section .section-label {
  color: #1f6fa5 !important;
}

.hero-section h1,
.section-head h2,
.section-head-light h2,
.quick-section .section-head.quick-head h2,
.flow-section .section-head h2,
.pricing-section .section-head h2 {
  color: #0b1f33 !important;
  text-shadow: none !important;
}

.hero-subtitle,
.quick-intro,
.flow-intro,
.pricing-intro {
  color: var(--ink-soft) !important;
  text-shadow: none !important;
}

.hero-section .btn-secondary {
  color: var(--brand-primary);
  border-color: var(--line);
  background: var(--surface) !important;
  box-shadow: 0 4px 12px rgba(13, 38, 58, 0.06) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.hero-section .btn-secondary:hover {
  color: #185c89;
  border-color: #aebfcb;
  background: #ffffff !important;
  box-shadow: 0 5px 14px rgba(13, 38, 58, 0.08) !important;
}

.hero-facts div,
.hero-benefits li {
  color: #0b1f33;
  border-color: var(--line);
  background: var(--surface);
  box-shadow: 0 4px 12px rgba(13, 38, 58, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.hero-facts dt {
  color: var(--brand-primary);
}

.hero-facts dd {
  color: #0b1f33;
}

.hero-benefits li::before {
  color: #1f6fa5;
}

.product-mockup {
  border-color: #bfd8e9;
  background: #0d263a;
  box-shadow:
    0 24px 60px rgba(13, 38, 58, 0.12),
    0 0 50px rgba(31, 111, 165, 0.06);
}

.product-mockup:hover {
  box-shadow:
    0 26px 64px rgba(13, 38, 58, 0.13),
    0 0 54px rgba(31, 111, 165, 0.07);
}

.product-mockup::before {
  content: none;
}

.hero-trust-strip {
  border-bottom-color: var(--line);
  background: var(--bg-soft);
}

/* Shared light sections */
.section-block {
  color: #0b1f33;
  border-color: var(--line);
  box-shadow: none;
}

.quick-section {
  border-top: 0;
  border-bottom: 0;
  background: #ffffff !important;
  box-shadow: none !important;
}

.quick-section .quick-intro,
.quick-feature-grid .quick-feature-card p {
  color: var(--ink-soft) !important;
}

.quick-feature-grid .quick-feature-card {
  border: 0;
  border-top: 1px solid var(--line);
  background: var(--surface);
  box-shadow: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.quick-infra-card.is-feature-cards .quick-feature-grid .quick-feature-card:last-child {
  border-bottom-color: var(--line);
}

.quick-feature-grid .quick-feature-card::before {
  color: var(--brand-primary) !important;
  border-color: var(--line) !important;
  background: var(--bg-soft) !important;
  box-shadow: none;
}

.quick-feature-grid .quick-feature-card::after {
  background: var(--line) !important;
}

.quick-feature-grid .quick-feature-card h3,
.quick-feature-grid .quick-feature-card:nth-child(n) h3 {
  color: #0b1f33 !important;
}

/* How it works */
#como-funciona.flow-section {
  border-color: var(--line);
  background: var(--surface-soft) !important;
  box-shadow: none !important;
}

#como-funciona .flow-grid::before {
  background: var(--line);
}

#como-funciona .camus-flow-item,
#como-funciona .camus-flow-item-highlight {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(13, 38, 58, 0.05);
}

#como-funciona .camus-flow-item::before {
  background: #b9d6e8;
  box-shadow: none;
}

#como-funciona .camus-flow-item:nth-child(2)::before {
  background: #c4dcea;
}

#como-funciona .camus-flow-item:nth-child(3)::before {
  background: #b3d0e2;
}

#como-funciona .camus-flow-item:nth-child(4)::before {
  background: #b9d6e8;
}

#como-funciona .camus-flow-download-card:hover,
#como-funciona .camus-flow-download-card:focus-visible {
  border-color: #aac1d1;
  box-shadow: 0 10px 26px rgba(13, 38, 58, 0.07);
}

#como-funciona .camus-flow-item-highlight::before {
  background: #1f6fa5;
}

#como-funciona .camus-flow-item .flow-step-number {
  color: var(--brand-primary);
  border-color: var(--line);
  background: var(--bg-soft);
  box-shadow: none;
}

#como-funciona .camus-flow-item-highlight .flow-step-number {
  color: #ffffff;
  border-color: #1f6fa5;
  background: #1f6fa5;
  box-shadow: none;
}

#como-funciona .camus-flow-item h3,
#como-funciona .camus-flow-item-highlight h3 {
  color: #0b1f33;
}

#como-funciona .camus-flow-item p,
#como-funciona .flow-intro,
#como-funciona .camus-flow-note span {
  color: var(--ink-soft);
}

#como-funciona .camus-flow-note {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: none;
}

/* Pricing */
.site-root .pricing-section {
  color: #0b1f33 !important;
  border-top: 1px solid var(--line);
  border-bottom-color: var(--line);
  background: var(--surface-soft) !important;
  box-shadow: none !important;
}

.pricing-grid {
  position: relative;
  isolation: isolate;
}

.pricing-grid::before {
  content: none;
}

.pricing-grid > * {
  position: relative;
  z-index: 1;
}

.pricing-section .plan-card {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 16px 40px rgba(13, 38, 58, 0.08) !important;
}

.pricing-section .plan-target {
  color: #ffffff !important;
  background: var(--brand-primary);
  box-shadow: none !important;
}

.pricing-section .plan-users {
  color: #0b1f33 !important;
  border-color: var(--line);
  background: var(--bg-soft);
}

.pricing-section .plan-price-value {
  color: var(--brand-primary) !important;
}

.pricing-section .plan-price-billing,
.pricing-section .plan-description {
  color: var(--ink-soft) !important;
}

.pricing-section .plan-card ul {
  border-top-color: var(--line);
}

.pricing-section .plan-card li {
  color: #0b1f33 !important;
}

.plan-users-editor {
  border-top-color: var(--line);
}

.plan-users-stepper {
  border-color: var(--line);
  background: var(--surface);
}

.plan-users-stepper button {
  color: var(--brand-primary);
  background: var(--surface-soft);
}

.plan-users-stepper button:hover {
  background: #e4eef4;
}

/* Footer */
.site-footer,
html[data-camus-theme="dark"] .site-footer {
  color: #dce7ef;
  background: #0d263a;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
}

@media (hover: hover) {
  .hero-facts div:hover,
  .hero-benefits li:hover {
    border-color: #bfd8e9;
    box-shadow: 0 7px 18px rgba(13, 38, 58, 0.065);
    transform: translateY(-1px);
  }

  .quick-feature-grid .quick-feature-card:hover {
    border-top-color: #b9d6e8;
    background: #fbfdff;
  }
}

/* Dark mode keeps the same component behavior with solid, alternating surfaces. */
html[data-camus-theme="dark"] body,
html[data-camus-theme="dark"] .site-root {
  background: #06131f;
}

html[data-camus-theme="dark"] .hero-grid::after {
  border-color: rgba(147, 197, 253, 0.2);
  background: #0f2a40;
}

html[data-camus-theme="dark"] .hero-section {
  background: #081b2b !important;
  box-shadow: none !important;
}

html[data-camus-theme="dark"] .quick-section {
  background: #0b2133 !important;
  box-shadow: none !important;
}

html[data-camus-theme="dark"] #como-funciona.flow-section {
  background: #102638 !important;
  box-shadow: none !important;
}

html[data-camus-theme="dark"] .site-root .pricing-section {
  background: #081b2b !important;
  box-shadow: none !important;
}

html[data-camus-theme="dark"] .quick-feature-grid .quick-feature-card,
html[data-camus-theme="dark"] #como-funciona .camus-flow-item,
html[data-camus-theme="dark"] #como-funciona .camus-flow-item-highlight,
html[data-camus-theme="dark"] .pricing-section .plan-card {
  border-color: rgba(147, 197, 253, 0.22) !important;
  background: #0c2234 !important;
  box-shadow: 0 8px 24px rgba(0, 7, 14, 0.18) !important;
}

html[data-camus-theme="dark"] .quick-feature-grid .quick-feature-card::before,
html[data-camus-theme="dark"] #como-funciona .camus-flow-item .flow-step-number,
html[data-camus-theme="dark"] .pricing-section .plan-users {
  border-color: rgba(147, 197, 253, 0.22) !important;
  background: #102a3f !important;
  box-shadow: none !important;
}

html[data-camus-theme="dark"] .quick-feature-grid .quick-feature-card::after,
html[data-camus-theme="dark"] #como-funciona .flow-grid::before {
  background: rgba(147, 197, 253, 0.22) !important;
}

html[data-camus-theme="dark"] #como-funciona .camus-flow-item-highlight::before,
html[data-camus-theme="dark"] #como-funciona .camus-flow-item-highlight .flow-step-number,
html[data-camus-theme="dark"] .pricing-section .plan-target {
  color: #ffffff !important;
  border-color: #1f6fa5 !important;
  background: #1f6fa5 !important;
  box-shadow: none !important;
}

html[data-camus-theme="dark"] .btn-primary,
html[data-camus-theme="dark"] .plan-cta,
html[data-camus-theme="dark"] .mockup-compose button {
  background: #1f6fa5 !important;
}

html[data-camus-theme="dark"] .btn-primary:hover,
html[data-camus-theme="dark"] .plan-cta:hover,
html[data-camus-theme="dark"] .mockup-compose button:hover {
  background: #185c89 !important;
}

@media (max-width: 760px) {
  .hero-grid::after {
    top: auto;
    right: 8px;
    bottom: -12px;
    left: 8px;
    width: auto;
    height: calc(min(420px, 110vw) + 24px);
    border-radius: 20px;
    transform: none;
  }
}

@media (min-width: 761px) and (max-width: 1140px) {
  .hero-grid::after {
    top: auto;
    right: 50%;
    bottom: -24px;
    width: min(680px, calc(100% - 32px));
    height: 600px;
    transform: translateX(50%);
  }
}