/* VALUE — color system v2 (feedback Fillipe 19/07)
   Dominant surface color is a deep navy (not the vibrant presentation blue).
   The vibrant blue survives only as an ACCENT (links, eyebrows, buttons,
   focus states, small UI) — never as a full-section background anymore.
   A dark petrol/teal (the pre-2026 brand color) returns in ONE section only
   (.testimonial-section) to break up the navy monotony, as requested.
   Light sections (.bg-primary, .value-framework, .client-proof-section) use
   the existing --ivory token + dark ink text so pages alternate dark/light
   instead of one flat color top to bottom. */

:root {
  --value-blue: #0032FF;       /* accent only from here down */
  /* The one tonal break in the page rhythm (.testimonial-section). Was a deep
     petrol/teal; the client rejected the green on 23/07, so the break is now
     made in the blue family — deep enough to still read as a distinct band
     against --bg-deep, without introducing a second hue to the palette. */
  --value-deep-blue: #12275C;

  /* Deep navy family — restores the tokens refinements.css already defines
     for --ink/--ink-2/--ink-3 (dozens of hover/card/menu surfaces already
     consume these) instead of letting them get flattened to the vibrant blue. */
  --bg-deep: #0A1B3D;
  --bg-primary: #102A56;
  --bg-secondary: #15335F;
  --bg-card: rgba(255, 255, 255, 0.045);

  --ink: #0A1B3D;
  --ink-2: #102A56;
  --ink-3: #15335F;

  --blue: #0032FF;
  --blue-light: #0032FF;
  --blue-glow: rgba(0, 50, 255, 0.2);
  --blue-soft: rgba(0, 50, 255, 0.1);
  --accent: #0032FF;
  --brand-blue: #0032FF;
  --brand-teal: #0032FF;
  --brand-accent: #0032FF;
}

html,
body {
  background-color: var(--bg-deep);
}

/* ============================================================
   DARK sections (navy) — hero, page heroes, footer, CTA, and the
   "rich brand moment" sections.
   ============================================================ */
.bg-deep,
.bg-secondary,
.page-hero,
.page-hero-blog,
.footer {
  background-color: var(--bg-deep);
}

/* Moved to the LIGHT group — see "SOLUÇÕES" block below.
   (Feedback Fillipe 23/07: "os serviços, eu queria que ficasse branco também
   […] que nem você colocou lá dos 300 ou 10", i.e. same ivory as
   .value-framework.) */

.section-trust,
.section-cta {
  background: var(--bg-deep);
}

.not-found {
  background:
    radial-gradient(circle at 72% 18%, rgba(255, 255, 255, 0.12), transparent 34%),
    var(--bg-deep);
}

.hero-premium,
.hero-premium--portrait .hero-bg {
  background: var(--bg-deep);
}

.hero-premium .hero-bg::after,
.hero-premium--portrait .hero-bg::after {
  background:
    linear-gradient(90deg, rgba(10, 27, 61, 0.97) 0%, rgba(10, 27, 61, 0.9) 37%, rgba(10, 27, 61, 0.42) 66%, rgba(10, 27, 61, 0.24) 100%),
    linear-gradient(180deg, rgba(10, 27, 61, 0.24) 0%, transparent 46%, rgba(10, 27, 61, 0.88) 100%);
}

.hero-premium .hero-bg img {
  transform: none !important;
  transition: none !important;
}

.page-hero::after {
  background:
    radial-gradient(circle at 75% 20%, rgba(255, 255, 255, 0.11), transparent 34%);
}

/* ============================================================
   LIGHT sections — real alternation, not two shades of the same
   dark color. .client-proof-section already ships its own ivory/ink
   styling in refinements.css:526-534 and needs no override here.
   ============================================================ */
.bg-primary {
  background: var(--ivory);
  color: var(--ink);
}

.value-framework {
  background: var(--ivory);
  color: var(--ink);
}

:is(.bg-primary, .value-framework) :is(h1, h2, h3, h4, .section-title) {
  color: var(--ink);
}

:is(.bg-primary, .value-framework) .section-title .thin,
:is(.bg-primary, .value-framework) .section-subtitle {
  color: #53616b;
}

/* These cards paint their OWN navy panel (--ink-2) on top of the light
   .bg-primary section — their headings must stay light, not inherit the
   section-level "dark text on light bg" rule above (navy-on-navy bug). */
:is(.bg-primary, .value-framework) :is(.pocket-card, .client-case, .diff-item, .form-card) :is(h1, h2, h3, h4, .section-title) {
  color: var(--white);
}

:is(.bg-primary, .value-framework) :is(.pocket-card, .client-case, .diff-item, .form-card) {
  color: var(--text-2);
}

:is(.bg-primary, .value-framework) .form-card .section-subtitle {
  color: var(--text-2);
}

/* Plain paragraphs (e.g. .info-block on contato.html) default to --text-2,
   a near-white tone meant for dark sections — invisible on the light ivory
   background. The navy-card exceptions above win on specificity, so this
   only affects text sitting directly on the light section. */
:is(.bg-primary, .value-framework) p {
  color: #53616b;
}

:is(.bg-primary, .value-framework) :is(.pocket-card, .client-case, .diff-item, .form-card) p {
  color: var(--text-2);
}

/* final-polish.css's mobile .info-block::before badge is hardcoded white
   border/text for the old all-dark-sections world — beats this file by
   load order, so needs !important to win on the now-light .bg-primary. */
.bg-primary .info-block::before {
  border-color: rgba(10, 27, 61, 0.2) !important;
  color: var(--brand-accent) !important;
}

.value-framework .value-framework-metrics {
  border-top-color: rgba(10, 27, 61, 0.14);
  border-bottom-color: rgba(10, 27, 61, 0.14);
}

.value-framework .value-framework-metric + .value-framework-metric {
  border-left-color: rgba(10, 27, 61, 0.14);
}

.value-framework .value-framework-metric strong {
  color: var(--ink);
}

.value-framework .value-framework-metric span {
  color: #53616b;
}

.value-framework .value-framework-lead {
  color: var(--ink);
}

/* ============================================================
   SOLUÇÕES — light, matching .value-framework.
   Feedback Fillipe 23/07 (áudio): the services block should read
   white like the "+10 anos / +300 empresas" block, not navy.
   The cards keep their editorial 1px-gap grid; only the surface
   and the text tones flip.
   ============================================================ */
.services-editorial {
  background:
    radial-gradient(circle at 12% 18%, rgba(0, 50, 255, 0.05), transparent 30%),
    var(--ivory);
  color: var(--ink);
}

.services-editorial :is(h1, h2, h3, h4, .section-title) {
  color: var(--ink);
}

.services-editorial .section-title .thin,
.services-editorial .section-subtitle {
  color: #53616b;
}

/* Hairlines: --line is a light-on-dark token and disappears on ivory. */
.services-editorial .service-grid {
  background: rgba(10, 27, 61, 0.13);
}

.services-editorial .service-grid .service-card,
.services-editorial .service-grid .service-card:not(.service-card-large) {
  background: #FFFFFF;
  box-shadow: 0 18px 40px -30px rgba(10, 27, 61, 0.35);
}

.services-editorial .service-grid .service-card:hover {
  background: #FBFDFF;
  box-shadow:
    0 22px 48px -26px rgba(10, 27, 61, 0.34),
    0 0 0 1px color-mix(in srgb, var(--value-blue) 32%, transparent);
}

.services-editorial .service-card p {
  color: #53616b;
}

.services-editorial .service-points li {
  border-top-color: rgba(10, 27, 61, 0.13);
  color: #4a5a66;
}

/* The corner watermark is forced white for dark sections; on the light
   ones it has to be ink or it simply vanishes. */
main > :is(.value-framework, .services-editorial):not(.section-cta)::after {
  filter: brightness(0) !important;
  opacity: 0.035;
}

/* ============================================================
   DEPOIMENTOS — was petrol/green.
   Feedback Fillipe 23/07 (áudio): "esse verde nos depoimentos
   eu acho que não ornou não. Qualquer coisa deixa azul." The
   section keeps its role as the one tonal break in the page
   rhythm, but in the brand blue family instead of teal.
   ============================================================ */
.testimonial-section {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 30%),
    var(--value-deep-blue);
}

/* Petrol is a rare, deliberate minority accent (one section, site-wide) —
   the blog page IS the testimonials hub, so painting its main section
   green would make petrol read as a primary page color instead. Keep it
   navy there; petrol stays reserved for the home/clientes teaser only. */
.page-blog .testimonial-section {
  background: var(--bg-deep);
}

.page-blog .testimonial-play {
  color: var(--value-blue);
}

.testimonial-media {
  background: var(--bg-deep);
}

.testimonial-media::after {
  background: linear-gradient(180deg, transparent 50%, rgba(10, 27, 61, 0.78));
}

.testimonial-play {
  background: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.72);
  color: var(--value-blue);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ============================================================
   CHROME — nav, mobile menu, modal. Stays navy regardless of the
   section rhythm; this is UI chrome, not page content.
   ============================================================ */
.navbar.scrolled {
  background: var(--bg-deep);
  border-color: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.nav-links a::after { background: #FFFFFF; }

.mobile-menu {
  background: var(--bg-deep);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.mobile-menu > a:not(.btn)::before,
.mobile-menu > a:not(.btn).active { color: #FFFFFF; }
.mobile-menu > a:not(.btn).active::after { background: #FFFFFF; box-shadow: none; }

.mobile-menu > .btn.btn-primary {
  background: var(--ivory);
  color: var(--value-blue);
}

/* Retain the original cards, using their existing translucent construction. */
.hero-panel,
.card-deep,
.blog-hero-panel,
.featured-article-card {
  background: rgba(255, 255, 255, 0.045);
}

.video-modal {
  background: rgba(10, 27, 61, 0.94);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.video-modal-close {
  background: #FFFFFF;
  color: var(--value-blue);
}

/* ============================================================
   Text-on-dark vs text-on-light. .bg-primary / .value-framework
   are light now — excluded from the white-text list, and NOT added
   to a forced-dark list either, so .eyebrow/.text-link fall back to
   their default vibrant-blue accent color (correct on a light bg).
   ============================================================ */
:is(
  .hero,
  .page-hero,
  .services-editorial,
  .testimonial-section,
  .section-cta,
  .section-trust,
  .bg-deep,
  .bg-secondary,
  .footer,
  .not-found
) :is(
  .eyebrow,
  .text-link,
  .value-framework-index,
  .service-card::before,
  .pillar-num,
  .diff-icon,
  .seg-icon,
  .info-block::before,
  .testimonial-name
) {
  color: rgba(255, 255, 255, 0.86) !important;
}

/* Semi-transparent white reads as washed-out mint against the petrol
   .testimonial-section background — needs solid, high-contrast text. */
.testimonial-section .eyebrow,
.testimonial-section .text-link,
.testimonial-section .testimonial-name {
  color: #FFFFFF !important;
}

.testimonial-section .section-subtitle,
.testimonial-section .section-title .thin {
  color: rgba(255, 255, 255, 0.92);
}

:is(
  .services-editorial,
  .testimonial-section,
  .section-cta,
  .section-trust,
  .bg-deep,
  .bg-secondary
) :is(.service-points li::before, .pocket-points li::before) {
  background: #FFFFFF;
}

:is(
  .hero,
  .page-hero,
  .services-editorial,
  .testimonial-section,
  .section-cta,
  .section-trust,
  .bg-deep,
  .bg-secondary,
  .not-found
) .btn-blue {
  background: var(--ivory);
  color: var(--value-blue);
  box-shadow: none;
}

:is(
  .hero,
  .page-hero,
  .services-editorial,
  .testimonial-section,
  .section-cta,
  .section-trust,
  .bg-deep,
  .bg-secondary,
  .not-found
) .btn-blue:hover {
  background: #FFFFFF;
  color: var(--value-blue);
}

.mobile-rail-progress > span { background: #FFFFFF; }
.client-proof-section .mobile-rail-progress > span { background: var(--value-blue); }

/* Performance correction: keep the design static where continuous compositor
   work was producing the small scroll glitches. */
body::before,
#meshCanvas,
.cursor-glow {
  display: none !important;
}

.shape,
.orb,
.grid-bg-animated::before,
.hero-premium::before,
.testimonial-play::after,
.wa-fab::before,
.scroll-bar {
  animation: none !important;
}

.parallax-layer {
  transition: none;
  will-change: auto;
}

.mobile-rail > *.is-rail-active,
.tilt-3d,
.stat-3d {
  transform: none;
  transform-style: flat;
}

/* Reveal is prepared before paint and runs once as a compositor transition.
   This fixes the previous visible → hidden → visible keyframe restart. */
.reveal,
.reveal.visible {
  animation: none !important;
}

.experience-js .reveal {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity 520ms var(--ease-heavy) var(--reveal-delay),
    transform 640ms var(--ease-heavy) var(--reveal-delay);
  will-change: opacity, transform;
}

.experience-js .reveal.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

.reveal-d1 { --reveal-delay: 55ms; }
.reveal-d2 { --reveal-delay: 100ms; }
.reveal-d3 { --reveal-delay: 145ms; }
.reveal-d4 { --reveal-delay: 180ms; }
.reveal-d5 { --reveal-delay: 210ms; }

@media (max-width: 767px) {
  .navbar {
    background: linear-gradient(180deg, rgba(10, 27, 61, 0.92), rgba(10, 27, 61, 0));
  }

  .navbar.scrolled { background: var(--bg-deep); }

  .mobile-menu {
    background:
      radial-gradient(circle at 88% 10%, rgba(255, 255, 255, 0.1), transparent 30%),
      var(--bg-deep);
  }

  .hero-premium .hero-bg::after,
  .hero-premium--portrait .hero-bg::after {
    background:
      linear-gradient(180deg, rgba(10, 27, 61, 0.48) 0%, rgba(10, 27, 61, 0.38) 28%, rgba(10, 27, 61, 0.79) 58%, rgba(10, 27, 61, 0.99) 87%),
      linear-gradient(90deg, rgba(10, 27, 61, 0.48), rgba(10, 27, 61, 0.08) 78%);
  }

  .service-grid .service-card,
  .service-grid .service-card:not(.service-card-large) {
    background:
      radial-gradient(circle at 92% 0%, rgba(255, 255, 255, 0.08), transparent 30%),
      var(--bg-deep);
  }

  .testimonial-card:active .testimonial-media,
  .service-grid .service-card:hover,
  .pocket-card:hover,
  .channel:hover {
    transform: none !important;
  }

  .wa-fab { border-color: #FFFFFF; }
}

@media (prefers-reduced-motion: reduce) {
  .experience-js .reveal,
  .experience-js .reveal.visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}