/* ════════════════════════════════════════════════════════════════
   SANBERNARDA.COM · CROSS-BROWSER (Chrome = source of truth)
   Gecko (Firefox) equalizes viewport units, sticky pin, SVG HUD,
   gradient text and flex/grid shrink. Do not constrain rail cards
   with max-width: 100% (cyclic % on max-content flex is a Gecko trap).
   Load LAST.
   ════════════════════════════════════════════════════════════════ */

:root {
  --cc-vw: 100vw;
  --cc-vh: 100vh;
}

html.is-gecko {
  -moz-text-size-adjust: none;
  text-size-adjust: none;
  scroll-behavior: auto;
}

img, svg, video {
  max-width: 100%;
  height: auto;
}

canvas {
  max-width: none;
}

#hero-waves,
#radar-canvas {
  width: 100%;
  height: 100%;
}

/* Pair prefix-only clip with the standard property */
[style*="-webkit-background-clip: text"] {
  background-clip: text;
}

/* ── Diagnóstico rail: pixel viewport, never cyclic % ── */
html.cc-brut body #diagnostico.probsol .psc-stage {
  overflow-x: visible !important;
  overflow-y: visible !important;
}

html.cc-brut body #diagnostico.probsol .psc-rail-wrap {
  overflow-x: clip !important;
  overflow-y: visible !important;
  isolation: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

html.cc-brut body #diagnostico.probsol .psc-rail.probsol-grid {
  --psc-card-w: min(1560px, calc(var(--cc-vw, 100vw) - 48px)) !important;
  --psc-card-h: min(720px, calc(var(--cc-vh, 100vh) - 130px)) !important;
  padding-left: calc((var(--cc-vw, 100vw) - var(--psc-card-w)) / 2) !important;
  padding-right: calc((var(--cc-vw, 100vw) - var(--psc-card-w)) / 2) !important;
}

html.cc-brut body #diagnostico.probsol .psc-rail .probsol-card,
html.cc-brut body .probsol .probsol-card {
  flex: 0 0 var(--psc-card-w) !important;
  width: var(--psc-card-w) !important;
  min-width: var(--psc-card-w) !important;
  max-width: var(--psc-card-w) !important;
}

/* Gecko: 3-col grid must be allowed to shrink (320px min overflows) */
html.is-gecko.cc-brut body #diagnostico.probsol .psc-rail .probsol-card .psc-body,
html.is-gecko.cc-brut body .probsol .probsol-card .psc-body {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.12fr) minmax(0, 1.25fr) !important;
  min-width: 0 !important;
}

html.is-gecko.cc-brut body #diagnostico.probsol .psc-col,
html.is-gecko.cc-brut body #diagnostico.probsol .psc-body {
  min-width: 0;
}

/* HUD rings: fill-box origin matches Blink */
.psc-hud-ring circle,
.psc-hud-ring .hud-outer,
.psc-hud-ring .hud-inner,
.psc-hud-ring .hud-glow,
.psc-hud-ring .hud-fill {
  transform-box: fill-box;
  transform-origin: center;
}

.psc-marker__info {
  filter: drop-shadow(0 0 16px rgba(255, 92, 20, 0.45));
}
.psc-marker__metric {
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: #FF5C14 !important;
  -webkit-text-fill-color: transparent !important;
  filter: none !important;
}

.probsol,
#diagnostico {
  content-visibility: visible !important;
  contain: none !important;
}

.hero-title-v3 .hero-line {
  padding-right: 0.06em;
}

html.is-gecko {
  scrollbar-width: thin;
}

@media (max-width: 1100px) {
  html.cc-brut body #diagnostico.probsol .psc-rail.probsol-grid {
    --psc-card-w: min(440px, calc(var(--cc-vw, 100vw) - 28px)) !important;
  }
}

@media (max-width: 768px) {
  /* Nested scroll: sticky stage + GSAP Y inside card, then X to next card.
     Do not switch the stage to relative or the rail to native overflow-x. */
  html.cc-brut body #diagnostico.probsol .psc-stage {
    position: sticky !important;
    top: 52px !important;
    height: calc(100svh - 52px) !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  html.cc-brut body #diagnostico.probsol .psc-rail-wrap {
    overflow: hidden !important;
    -webkit-overflow-scrolling: auto;
  }
  html.cc-brut body #diagnostico.probsol .psc-rail.probsol-grid {
    --psc-card-w: min(360px, calc(var(--cc-vw, 100vw) - 32px)) !important;
    --psc-card-h: min(640px, calc(100svh - 72px)) !important;
  }
}

/* ── Gecko §1 Diagnóstico: cards opacos, um por vez, no tempo do Chrome ──
   Blink: opacity .32 + perspective() + 350ms fade = vizinhos em vidro.
   Gecko: opacity<1 + 3D transform + backdrop-filter = card ativo translúcido
   e o pin curto faz is-focused pular → flash de módulos. */
html.is-gecko.cc-brut body #diagnostico.probsol .psc-rail .probsol-card,
html.is-gecko.cc-brut body .probsol .probsol-card {
  opacity: 1 !important;
  transform: none !important;
  transform-style: flat !important;
  will-change: auto !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
html.is-gecko.cc-brut body #diagnostico.probsol .psc-hud {
  flex: 0 0 auto !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
}
html.is-gecko.cc-brut body #diagnostico.probsol .psc-rail .probsol-card .psc-body,
html.is-gecko.cc-brut body .probsol .probsol-card .psc-body {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
html.is-gecko.cc-brut body #diagnostico.probsol .psc-col,
html.is-gecko.cc-brut body #diagnostico.probsol .psc-focus-panel {
  min-height: 0 !important;
}
html.is-gecko.cc-brut body #diagnostico.probsol .psc-rail .probsol-card:hover,
html.is-gecko.cc-brut body #diagnostico.probsol .psc-rail .probsol-card.is-focused,
html.is-gecko.cc-brut body #diagnostico.probsol .psc-rail .probsol-card.is-focused:hover,
html.is-gecko.cc-brut body .probsol .probsol-card.is-focused {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}
html.is-gecko.cc-brut body.dark-theme #diagnostico.probsol .probsol-card,
html.is-gecko.cc-brut body.dark-theme #diagnostico.probsol .psc-rail .probsol-card {
  background: linear-gradient(145deg, #1A0B24 0%, #12061A 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html.is-gecko.cc-brut body:not(.dark-theme) #diagnostico.probsol .probsol-card,
html.is-gecko.cc-brut body:not(.dark-theme) #diagnostico.probsol .psc-rail .probsol-card {
  background: linear-gradient(145deg, #FFFFFF 0%, #F8F4FF 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html.is-gecko.cc-brut body #diagnostico.probsol .psc-glass,
html.is-gecko.cc-brut body #diagnostico.probsol .psc-glass__frost {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html.is-gecko.cc-brut body.dark-theme #diagnostico.probsol .psc-glass__frost {
  background: linear-gradient(145deg, #16081E, #0E0514) !important;
}
html.is-gecko.cc-brut body:not(.dark-theme) #diagnostico.probsol .psc-glass__frost {
  background: linear-gradient(145deg, #FFFFFF, #F8F4FF) !important;
}
html.is-gecko.cc-brut body #diagnostico.probsol .psc-rail .probsol-card:not(.is-focused) {
  opacity: 1 !important;
}