/*
 * SOMA · Componentes públicos compartilhados
 *
 * Depende de styles.css + marketing-foundation.css.
 * Todos os seletores são opt-in por body.marketing-surface.
 */

body.marketing-surface .marketing-nav {
  background: rgba(5, 11, 23, 0.78);
  border-bottom: 1px solid rgba(127, 231, 235, 0.08);
  backdrop-filter: saturate(150%) blur(20px);
}

body.marketing-surface .marketing-nav .nav-brand img {
  height: 32px;
  max-width: 190px;
  width: auto;
}

body.marketing-surface .marketing-nav .nav-links {
  gap: clamp(4px, 0.75vw, 10px);
}

body.marketing-surface .marketing-nav .nav-links a {
  color: rgba(245, 249, 252, 0.76);
  font-family: var(--marketing-font-body);
  font-size: var(--marketing-nav-font-size);
  font-weight: 500;
  padding-inline: clamp(12px, 1.35vw, 18px);
}

body.marketing-surface .marketing-nav .nav-links a:hover,
body.marketing-surface .marketing-nav .nav-links a.is-on,
body.marketing-surface .marketing-nav .nav-links a.is-current,
body.marketing-surface .marketing-nav .nav-links a[aria-current="page"] {
  color: var(--marketing-color-teal-light);
}

body.marketing-surface .marketing-nav .nav-actions .btn {
  min-height: 44px;
}

body.marketing-surface .marketing-eyebrow,
body.marketing-surface .eyebrow,
body.marketing-surface .mvp-eyebrow,
body.marketing-surface .sol-eyebrow,
body.marketing-surface .pricing-step-kicker {
  font-family: var(--marketing-font-meta);
}

body.marketing-surface .marketing-eyebrow {
  color: var(--marketing-color-teal-light);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

body.marketing-surface .btn,
body.marketing-surface .marketing-button {
  border-radius: var(--marketing-radius-pill);
  font-family: var(--marketing-font-body);
  font-weight: 600;
  transition-duration: var(--marketing-motion-fast);
  transition-timing-function: var(--marketing-ease-out);
}

body.marketing-surface .marketing-button {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-height: 44px;
}

body.marketing-surface .marketing-card {
  --marketing-card-background: var(--marketing-surface-glass);
  --marketing-card-border: var(--marketing-border-subtle);
  --marketing-card-radius: var(--marketing-radius-card-lg);
  background: var(--marketing-card-background);
  border: 1px solid var(--marketing-card-border);
  border-radius: var(--marketing-card-radius);
  box-shadow: var(--marketing-shadow-card);
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

body.marketing-surface .marketing-card--panel {
  --marketing-card-background:
    radial-gradient(circle at 12% 0%, rgba(2, 184, 191, 0.09), transparent 34%),
    linear-gradient(145deg, rgba(9, 25, 44, 0.94), rgba(6, 14, 27, 0.98));
}

body.marketing-surface .marketing-card--compact {
  --marketing-card-radius: var(--marketing-radius-card-sm);
  box-shadow: none;
}

body.marketing-surface .marketing-card--interactive {
  transition:
    background var(--marketing-motion-base) ease,
    border-color var(--marketing-motion-base) ease,
    box-shadow var(--marketing-motion-base) ease,
    transform var(--marketing-motion-base) var(--marketing-ease-out);
}

body.marketing-surface .marketing-card--interactive:hover,
body.marketing-surface .marketing-card--interactive:focus-visible,
body.marketing-surface .marketing-card--interactive:focus-within {
  border-color: var(--marketing-border-strong);
  box-shadow: var(--marketing-shadow-card-hover), var(--marketing-shadow-teal);
  transform: translateY(-6px);
}

body.marketing-surface .marketing-card--compact.marketing-card--interactive:hover,
body.marketing-surface .marketing-card--compact.marketing-card--interactive:focus-visible,
body.marketing-surface .marketing-card--compact.marketing-card--interactive:focus-within {
  transform: translateY(-2px);
}

body.marketing-surface .marketing-field label {
  color: var(--marketing-color-text);
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 7px;
}

body.marketing-surface .marketing-field :is(input, textarea, select) {
  background: rgba(5, 11, 23, 0.58);
  border: 1px solid var(--marketing-border-default);
  border-radius: var(--marketing-radius-control);
  color: var(--marketing-color-text);
  font-family: var(--marketing-font-body);
  font-size: 14px;
  min-height: 46px;
  transition:
    background var(--marketing-motion-fast) ease,
    border-color var(--marketing-motion-fast) ease,
    box-shadow var(--marketing-motion-fast) ease;
}

body.marketing-surface .marketing-field :is(input, textarea, select):focus {
  background: rgba(5, 11, 23, 0.78);
  border-color: var(--marketing-border-strong);
  box-shadow: 0 0 0 3px rgba(127, 231, 235, 0.1);
  outline: none;
}

body.marketing-surface .marketing-choice {
  background: rgba(127, 231, 235, 0.06);
  border: 1px solid var(--marketing-border-default);
  border-radius: var(--marketing-radius-pill);
  color: var(--marketing-color-text-muted);
  min-height: 38px;
  transition:
    background var(--marketing-motion-fast) ease,
    border-color var(--marketing-motion-fast) ease,
    color var(--marketing-motion-fast) ease;
}

body.marketing-surface .marketing-choice:hover,
body.marketing-surface .marketing-choice.is-active,
body.marketing-surface .marketing-choice[aria-pressed="true"] {
  background: rgba(2, 184, 191, 0.16);
  border-color: rgba(2, 184, 191, 0.56);
  color: var(--marketing-color-teal-light);
}

body.marketing-surface .marketing-icon-tile {
  align-items: center;
  background: rgba(2, 184, 191, 0.1);
  border: 1px solid var(--marketing-border-default);
  border-radius: 12px;
  display: inline-flex;
  flex: 0 0 44px;
  height: 44px;
  justify-content: center;
  width: 44px;
}

body.marketing-surface .marketing-icon-tile img {
  filter: brightness(0) saturate(100%) invert(84%) sepia(27%) saturate(676%) hue-rotate(134deg) brightness(102%) contrast(86%);
  height: 21px;
  object-fit: contain;
  width: 21px;
}

body.marketing-surface .marketing-footer-principle,
body.marketing-surface .mvp-footer-principle {
  color: var(--marketing-color-teal-light);
  font-family: var(--marketing-font-meta);
  font-size: 10px;
  letter-spacing: 0.1em;
  margin-top: 12px;
  text-transform: uppercase;
}

body.marketing-surface .pricing-starting-card small,
body.marketing-surface .pricing-starting-card .pricing-starting-value em {
  color: rgba(215, 226, 236, 0.68);
  font-size: 10px;
  line-height: 1.3;
}

body.marketing-surface :where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--marketing-focus-ring);
  outline-offset: 3px;
}

@media (max-width: 920px) {
  body.marketing-surface .marketing-nav .nav-links {
    gap: 4px;
  }

  body.marketing-surface .marketing-nav .nav-links a {
    padding-inline: 14px;
  }
}

@media (max-width: 500px) {
  body.marketing-surface .marketing-eyebrow,
  body.marketing-surface .eyebrow,
  body.marketing-surface .mvp-eyebrow,
  body.marketing-surface .sol-eyebrow {
    font-size: 10px;
    letter-spacing: 0.16em;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.marketing-surface *,
  body.marketing-surface *::before,
  body.marketing-surface *::after {
    scroll-behavior: auto !important;
  }

  body.marketing-surface .marketing-card--interactive {
    transition-duration: 0.001ms !important;
  }
}