/* ===== Product pages (Insights, Score, ...) — extends styles.css ===== */

:root {
  --void: #000000;
  --raw: #35906a;
  --neon: #50ea9a;
  --glow: #eafff2;
}

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.hero--insights { isolation: isolate; }
.hero--insights::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to top, #000 0%, transparent 10%, transparent 90%, #000 100%);
}

.eyebrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #9a9a9a;
  text-transform: uppercase;
  margin-bottom: 20px;
  transition: color .2s var(--ease);
}
.eyebrow-link:hover { color: #50ea9a; }

.eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #50ea9a;
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* Hero variant: shorter than the homepage hero, no scroll indicator */
.hero--product { min-height: 760px; padding-top: 220px; padding-bottom: 64px; }
.hero--product .hero-content { max-width: 760px; }

/* Score hero: two columns, copy + interactive dial */
.hero--score .hero-content { max-width: 1160px; }
.hero-score-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  text-align: left;
}
.hero-score-copy { pointer-events: none; }
.hero-score-copy a { pointer-events: auto; }

.score-dial {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: center;
  pointer-events: auto;
  --live: hsl(157 6% 58%);
  --live-hi: hsl(157 4% 84%);
  --glow-near: hsl(157 6% 50% / .11);
  --glow-far: hsl(157 6% 50% / .04);
  --halo-near: hsl(157 6% 50% / .03);
  --halo-far: hsl(157 6% 50% / .01);
}
.score-dial__halo {
  position: absolute;
  top: 50%; left: 50%;
  width: min(460px, 86vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, var(--halo-near) 0%, var(--halo-far) 38%, transparent 66%);
  filter: blur(26px);
  opacity: .25;
}
.score-dial__gauge { width: min(420px, 84vw); height: auto; display: block; overflow: visible; touch-action: none; cursor: grab; outline: none; }
.score-dial.dragging .score-dial__gauge { cursor: grabbing; }
#scoreTrack line { stroke: var(--track, #0e3527); stroke-width: 2.5; stroke-linecap: round; }
#scoreLive line { stroke: var(--live); stroke-width: 2.5; stroke-linecap: round; opacity: 0; }
#scoreLive { filter: drop-shadow(0 0 3px var(--glow-near)) drop-shadow(0 0 13px var(--glow-far)); }
.score-dial__rim { fill: none; stroke: rgba(80, 234, 154, .16); stroke-width: 1; stroke-dasharray: 2 10; transform-origin: 180px 180px; }
#scoreKnob { opacity: 0; transition: opacity .35s ease; filter: drop-shadow(0 0 6px var(--glow-near)) drop-shadow(0 0 18px var(--glow-far)); }
.score-dial.done #scoreKnob, .score-dial.dragging #scoreKnob { opacity: 1; }
.score-dial__knob-core { fill: var(--live-hi); }
.score-dial__knob-ring { fill: none; stroke: var(--live); stroke-width: 1.5; stroke-opacity: .5; transition: stroke-opacity .2s ease; }
.score-dial.dragging .score-dial__knob-ring { stroke-opacity: 1; }
.score-dial__gauge:focus-visible .score-dial__knob-ring { stroke: #eafff5; stroke-opacity: 1; }

.score-dial__readout { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -46%); text-align: center; pointer-events: none; }
.score-dial__value {
  font-family: var(--ff);
  font-weight: 800;
  font-size: clamp(3.4rem, 7.4vw, 4.75rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--live-hi);
  text-shadow: 0 0 14px var(--glow-near), 0 0 44px var(--glow-far);
}
.score-dial__of { font-family: var(--ff); font-size: .82rem; color: #7d9a8a; margin-top: .5rem; }
.score-dial__band { margin-top: .9rem; font-size: .85rem; color: var(--live); letter-spacing: .02em; opacity: 0; transition: opacity .5s ease .1s; }
.score-dial.done .score-dial__band { opacity: 1; }
.score-dial__ends { font-family: var(--ff); font-size: .72rem; fill: #4e645a; }

.score-dial__meta { margin-top: 1.6rem; display: flex; align-items: center; gap: 1rem; font-size: .82rem; color: #7d9a8a; }
.score-dial__replay {
  font: inherit; font-size: .82rem; color: #7d9a8a; background: none;
  border: 1px solid rgba(80, 234, 154, .18); border-radius: 2px;
  padding: .45rem .9rem; cursor: pointer; transition: .18s ease;
}
.score-dial__replay:hover { color: #50ea9a; border-color: rgba(80, 234, 154, .45); }
.score-dial__replay:focus-visible { outline: 2px solid #50ea9a; outline-offset: 2px; }

@keyframes scoreDialSpin { to { transform: rotate(360deg); } }
@keyframes scoreDialBreathe { 0%, 100% { opacity: .22; transform: translate(-50%, -50%) scale(1); } 50% { opacity: .4; transform: translate(-50%, -50%) scale(1.045); } }
@keyframes scoreDialLand { 0% { opacity: .7; transform: translate(-50%, -50%) scale(1); } 35% { opacity: .85; transform: translate(-50%, -50%) scale(1.1); } 100% { opacity: .3; transform: translate(-50%, -50%) scale(1); } }
.score-dial.running .score-dial__rim { animation: scoreDialSpin 42s linear infinite; }
.score-dial.done .score-dial__rim { animation: scoreDialSpin 42s linear infinite; }
.score-dial.done .score-dial__halo { animation: scoreDialBreathe 5.5s ease-in-out infinite; }
.score-dial.landing .score-dial__halo { animation: scoreDialLand .7s ease-out; }

@media (max-width: 860px) {
  .hero-score-grid { grid-template-columns: 1fr; text-align: left; }
  .score-dial { order: -1; margin-bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .score-dial.done .score-dial__rim, .score-dial.done .score-dial__halo,
  .score-dial.landing .score-dial__halo, .score-dial.running .score-dial__rim { animation: none; }
  .score-dial__replay { transition: none; }
}

.hero-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 48px;
  margin-top: 52px;
  pointer-events: none;
}
.hero-stats .stat { width: auto; }
.hero-stats .stat-number { font-size: clamp(22px, 3vw, 30px); margin-bottom: 6px; }
.hero-stats .stat-label { font-size: 13px; max-width: 160px; color: #9a9a9a; }

.section-lead {
  max-width: 680px;
  margin: -32px auto 56px;
  text-align: center;
  font-size: 16px;
  color: #d5d5d5;
}

/* Cards without a bottom image (pain points, pillars, "o que recebe") */
.feature-card.no-image { min-height: auto; }
.feature-card.no-image .feature-body { padding: 32px 24px; text-align: center; }
.feature-card.no-image .feature-body p { color: #333; }
.feature-card .idx {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #0d8f5f;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.pain-grid, .pillars-grid, .receives-grid {
  display: grid;
  gap: 25px;
  max-width: 1080px;
  margin: 0 auto;
}
.pain-grid, .receives-grid { grid-template-columns: repeat(3, 1fr); }
.receives-grid { grid-template-columns: repeat(2, 1fr); max-width: 800px; }
.pillars-grid { grid-template-columns: repeat(5, 1fr); }

.source-line {
  text-align: center;
  font-size: 13px;
  color: var(--muted-label);
  margin: 32px auto 0;
}

/* Process steps (numbered pipeline, e.g. Ingestão -> Entrega) */
.process-steps {
  display: flex;
  max-width: 1080px;
  margin: 0 auto 48px;
  flex-wrap: wrap;
  gap: 32px 0;
}
.process-step {
  flex: 1 1 220px;
  position: relative;
  padding: 0 24px;
  text-align: center;
}
.process-step:not(:first-child)::before {
  content: '\203A';
  position: absolute;
  left: -2px;
  top: 2px;
  color: #50ea9a;
  font-size: 22px;
  font-weight: 800;
}
@media (max-width: 860px) {
  .process-step:not(:first-child)::before { display: none; }
}
.process-step .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid rgba(80, 234, 154, .35);
  color: #50ea9a;
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 16px;
}
.process-step h4 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.process-step p { font-size: 14px; color: #bbb; line-height: 1.6; }

/* Compact pipeline (used on Score, referencing the same 4 steps) */
.pipeline-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  max-width: 900px;
  margin: 0 auto 8px;
}
.pipeline-pill {
  background: var(--card);
  border: 1px solid rgba(80, 234, 154, .3);
  border-radius: var(--radius-pill);
  padding: 12px 26px;
  font-size: 15px;
  font-weight: 700;
}
.pipeline-arrow { color: #50ea9a; font-size: 20px; font-weight: 800; }

/* Terminal-style classification example */
.terminal {
  max-width: 620px;
  margin: 0 auto;
  background: #0a0f0c;
  border: 1px solid rgba(80, 234, 154, .25);
  border-radius: 8px;
  padding: 26px 30px;
  font-family: var(--ff);
  font-size: 13px;
  line-height: 2;
  color: rgba(255, 255, 255, .6);
}
.terminal .hl { color: #50ea9a; }
.terminal .ok { color: #50ea9a; }

/* Single case study panel */
.case-panel {
  max-width: 860px;
  margin: 0 auto;
  background: var(--card);
  border-radius: var(--radius-card);
  padding: 48px 40px;
  text-align: center;
}
.case-panel .case-tag {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--muted-label);
  margin-bottom: 10px;
}
.case-panel h3 { font-size: 24px; font-weight: 700; margin-bottom: 40px; }
.case-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.case-stats .stat-number { font-size: clamp(28px, 3.4vw, 40px); }
.case-stats .stat-label { font-size: 14px; }

/* Score gauge */
.gauge-wrap { max-width: 620px; margin: 36px auto 0; }
.gauge-track {
  height: 20px;
  border-radius: 10px;
  background: linear-gradient(90deg, #f9465c 0%, #f5d99a 50%, #50ea9a 100%);
  position: relative;
}
.gauge-marker {
  position: absolute;
  top: -7px;
  width: 3px;
  height: 34px;
  background: #fff;
  border-radius: 2px;
  left: 68%;
}
.gauge-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted-label);
}

.body-copy {
  max-width: 720px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.6;
  color: #d5d5d5;
  text-align: center;
}

.result-list {
  max-width: 760px;
  margin: 0 auto 8px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.result-list li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-size: 16px;
  color: #d5d5d5;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  padding-bottom: 18px;
}
.result-list li::before {
  content: '';
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #50ea9a;
  margin-top: 8px;
}

/* Social proof band shared by product pages */
.social-proof { text-align: center; }
.social-proof .client-logos { margin-bottom: 40px; }

/* CTA band before footer */
.cta-band {
  max-width: 1080px;
  margin: 0 auto;
  background: var(--card);
  border-radius: var(--radius-card);
  padding: 56px 48px;
  text-align: center;
}
.cta-band h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; margin-bottom: 28px; }

/* Pending content — used instead of fabricating numbers/bios that don't exist yet */
.stat.is-pending .stat-number { color: var(--muted-label); font-weight: 400; }
.process-step.is-pending h4 { color: var(--muted-label); font-weight: 400; }
.process-step.is-pending .step-num { border-style: dashed; color: var(--muted-label); border-color: rgba(255, 255, 255, .2); }
.step-num.year { width: auto; padding: 0 12px; border-radius: 20px; font-size: 13px; }

.pending-note {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  border: 1px dashed rgba(255, 255, 255, .25);
  border-radius: var(--radius-card);
  padding: 32px 28px;
  color: #bbb;
  font-size: 15px;
  line-height: 1.6;
}
.pending-note strong { color: #fff; }

/* Press / brand kit */
.press-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
  max-width: 900px;
  margin: 0 auto;
}
.press-card { background: var(--card); border-radius: var(--radius-card); padding: 28px 26px; }
.press-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 10px; }
.press-card p { font-size: 14px; color: #bbb; line-height: 1.6; margin-bottom: 16px; }
.press-card a.download-link { font-size: 14px; font-weight: 700; color: #50ea9a; text-decoration: underline; }

.palette-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
.swatch { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; color: #bbb; font-family: var(--ff); }
.swatch-color { width: 56px; height: 56px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .15); }

/* FAQ accordion (native <details>/<summary>) */
.faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(255, 255, 255, .08);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.faq-item { background: var(--card); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 26px;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 22px;
  font-weight: 400;
  color: #50ea9a;
  flex-shrink: 0;
  transition: transform .2s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: 0; padding: 0 26px 24px; font-size: 15px; line-height: 1.6; color: #bbb; }

.stat-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .3px;
  color: #0d8f5f;
  margin-bottom: 10px;
}

@media (max-width: 1080px) {
  .pain-grid, .pillars-grid { grid-template-columns: repeat(3, 1fr); }
  .receives-grid { grid-template-columns: repeat(2, 1fr); }
  .case-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .hero--product { min-height: 640px; padding-top: 150px; }
}
@media (max-width: 640px) {
  .pain-grid, .pillars-grid, .receives-grid, .case-stats, .press-grid { grid-template-columns: 1fr 1fr; }
  .case-panel { padding: 32px 22px; }
  .cta-band { padding: 40px 24px; }
}
@media (max-width: 480px) {
  .press-grid { grid-template-columns: 1fr; }
}

/* ===== BFM page (bfm.html) — measurements from the 1440px Figma frame ===== */
.bfm-hero { position: relative; padding: 174px 0 120px; overflow: hidden; }
/* text + laptop as one centered group across the full screen width
   (not pinned to the container's left edge) */
.bfm-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 590px) auto;
  justify-content: center;
  align-items: center;
  gap: 56px;
  max-width: none;
  transform: translateX(30px);
}
.bfm-hero__brand { display: block; margin: 0 0 52px; width: 337px; max-width: 100%; height: auto; }
/* laptop wrapper: room for a glow layer behind (::before, free for later) and a
   black fade on top (::after) that hides the laptop base */
.bfm-hero__visual {
  --visual-w: 50vw;
  position: relative;
  width: var(--visual-w);
  justify-self: start;
  isolation: isolate;
  /* optical centering: the (faded-out) laptop base sticks out ~6% past the
     screen on the right; leave it out of the layout so the visible screen, not
     the image box, lines up with the text's margin on the other side */
  margin-right: calc(var(--visual-w) * -0.06);
  /* same entrance technique as the homepage hero (see @keyframes fadeUp in
     styles.css), but with a taller rise so the motion reads more clearly */
  animation: fadeUpTall 1s var(--ease) .25s both;
}
/* 05/10: the laptop gave way to the screen alone with a neon line round it
   (js/bfm-hero.js, from the approved prototype). The box keeps the same
   2000×1259 unit system the shader uses; the screen sits inside it at the
   prototype's position. No laptop base any more, so no optical offset, no
   black fade and no CSS entrance: the script opens it (line first, then the
   screen rising in). */
.bfm-hero__visual { aspect-ratio: 2000 / 1259; margin-right: 0; animation: none; }
.bfm-hero__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.bfm-hero__screen {
  position: absolute;
  z-index: 1;
  display: block;
  left: 5.83%;
  top: 4.607%;
  width: 89.04%;
  height: auto;
  border-radius: 1.0818% / 1.7481%;
  will-change: opacity, transform;
}
.bfm-hero__visual.is-intro .bfm-hero__screen { opacity: 0; }
/* 19/10: the screen is the live dashboard (js/bfm-dash.js) in a shadow root, not a
   screenshot: same place and rounded corners, the page's own aspect, the poster
   (its first view) until it has loaded */
.bfm-hero__screen.bfm-dash {
  aspect-ratio: 1700 / 1052;
  overflow: hidden;
  background: #fff url("../assets/bfm-dash-poster.webp") 0 0 / 100% 100% no-repeat;
}
.bfm-hero__screen.bfm-dash.is-live { background-image: none; }
.bfm-hero__visual .glow-layer { position: absolute; pointer-events: none; z-index: 3; mix-blend-mode: screen; }
.bfm-hero__visual .glow-tint { position: absolute; pointer-events: none; z-index: 2; mix-blend-mode: multiply; }
@media (prefers-reduced-motion: reduce) {
  .bfm-hero__visual.is-intro .bfm-hero__screen { opacity: 1; }
}
@keyframes fadeUpTall {
  from { opacity: 0; transform: translateY(90px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bfm-hero__visual { animation: none; }
}
.bfm-hero__media { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
/* Edge light on the laptop lid: a WebGL shader (js/bfm-edge-glow.js) that
   lights the lid outline with physical-looking glow — brightness falls off as
   1/distance from the edge, so the core burns white and a long soft halo
   spreads around it. Red, green and blue are traced at slightly different
   scales, so the white core opens into colour fringes (chromatic aberration).
   The canvas overhangs the laptop so the halo has room to spread. It sits
   above the ::after fade that hides the laptop base (z-index 3 vs 2), so that
   fade doesn't dim the light early; the shader ends it at the lid bottom. */
.bfm-hero__glow { /* desktop: js stretches it to both screen edges for the lead-in/out lines */
  position: absolute;
  top: -30%;
  left: -10%;
  width: 120%;
  height: 160%;
  z-index: 3;
  pointer-events: none;
}
/* same scale as the home hero h1 */
/* the glow line runs 44px under the button
   (js/bfm-edge-glow.js lines the laptop up with it) */
.bfm-hero h1 { font-size: 56px; font-weight: 700; line-height: 1.3; letter-spacing: 1.2px; margin: 0 0 36px; }
.bfm-lead { max-width: 480px; margin: 0 0 52px; font-size: 16px; line-height: 1.6; color: #e8e8e8; }

.bfm-exp { padding: 155px 0 190px; }
.bfm-exp__inner { display: flex; align-items: center; justify-content: center; gap: 100px; transform: translateX(15px); }
.bfm-exp__visual { position: relative; flex: 0 0 384px; height: 522px; }
.bfm-exp__wordmark { position: absolute; left: 0; top: 0; width: 178px; height: 522px; }
/* app mockup (1351x2000, tilted): same height and centre as the old phone */
.bfm-exp__phone { position: absolute; left: 113px; top: 32px; width: 315px; height: 467px; }
.bfm-exp__text { flex: 0 1 447px; }
.bfm-exp__text h2 { font-size: 40px; font-weight: 700; line-height: 1.25; margin: 0 0 34px; }
.bfm-exp__text p { max-width: 320px; margin: 0; font-size: 15px; line-height: 1.6; color: #e8e8e8; }

.bfm-benefits { position: relative; z-index: 1; padding-bottom: 122px; }
/* .bfm-title's margin-bottom and .bfm-dots's margin-top are negative on
   purpose: they cancel out .bfm-carousel__track's padding below, which exists
   only to stop the cards' hover glow from being clipped (see that comment).
   Net visible spacing above/below the carousel stays the same as before
   that padding was added. */
.bfm-title { font-size: 40px; font-weight: 700; line-height: 1.25; text-align: center; margin: 0 0 -21px; padding: 0 24px; }
/* only the centered card is fully lit; neighbours fade into the black edges */
/* measured from the centre in px (card 285 + gap 29), not in % of the screen:
   the centre card and its two neighbours (out to ±456px) stay fully visible;
   the fade follows a smoothstep curve (gentle at both ends, so neither its
   start nor its end reads as a line) from ±430px, a hair inside the
   neighbours, to zero at ±720px, past the middle of the outer card, whose
   outer edge (±770px) stays fully hidden at any width */
.bfm-carousel__viewport {
  --bfm-fade: linear-gradient(to right,
    transparent calc(50% - 720px),
    rgba(0,0,0,.028) calc(50% - 691px),
    rgba(0,0,0,.104) calc(50% - 662px),
    rgba(0,0,0,.216) calc(50% - 633px),
    rgba(0,0,0,.352) calc(50% - 604px),
    rgba(0,0,0,.5) calc(50% - 575px),
    rgba(0,0,0,.648) calc(50% - 546px),
    rgba(0,0,0,.784) calc(50% - 517px),
    rgba(0,0,0,.896) calc(50% - 488px),
    rgba(0,0,0,.972) calc(50% - 459px),
    #000 calc(50% - 430px),
    #000 calc(50% + 430px),
    rgba(0,0,0,.972) calc(50% + 459px),
    rgba(0,0,0,.896) calc(50% + 488px),
    rgba(0,0,0,.784) calc(50% + 517px),
    rgba(0,0,0,.648) calc(50% + 546px),
    rgba(0,0,0,.5) calc(50% + 575px),
    rgba(0,0,0,.352) calc(50% + 604px),
    rgba(0,0,0,.216) calc(50% + 633px),
    rgba(0,0,0,.104) calc(50% + 662px),
    rgba(0,0,0,.028) calc(50% + 691px),
    transparent calc(50% + 720px));
  -webkit-mask-image: var(--bfm-fade);
  mask-image: var(--bfm-fade);
}
.bfm-carousel__track {
  display: flex;
  gap: 29px;
  margin: 0;
  /* top/bottom padding: overflow-x:auto forces overflow-y:auto too (a CSS
     quirk — an axis can't be scrollable while the other stays visible), which
     would otherwise clip the cards' glow bleeding past their own box. 48px
     comfortably clears the glow's 20px blur. */
  padding: 48px calc(50% - 142.5px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  position: relative;
  cursor: grab;
}
.bfm-carousel__track::-webkit-scrollbar { display: none; }
.bfm-carousel__track.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.bfm-carousel__track.is-free { scroll-snap-type: none; }   /* 21/10: stays where a mouse drag lets it go (js/bfm.js) */
.bfm-carousel__track.is-dragging .bfm-card { cursor: grabbing; }
.bfm-card {
  --active: 0;
  --start: 0;
  --spread: 60;
  --border-width: 2px;
  --glow-border: rgba(80, 234, 154, .35);
  --glow-gradient: conic-gradient(from 180deg at 50% 70%,
    #d9fff0 0deg, #50ea9a 90deg, #0d8f5f 180deg, #baffe0 270deg, #d9fff0 1turn);
  flex: 0 0 285px;
  height: 365px;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 28px 0;
  text-align: center;
  background: #2a2a2a;
  color: #fff;
  cursor: pointer;
  position: relative;
  border-radius: var(--radius-card);
}
.bfm-card__icon { display: flex; align-items: center; justify-content: center; height: 92px; margin-bottom: 19px; }
.bfm-card__icon img { max-height: 92px; width: auto; }
.bfm-card h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin: 0 0 20px;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.bfm-card p { margin: 0; font-size: 15px; line-height: 24px; }
.bfm-benefits--light .bfm-card:not(.glass) { background: #fff; color: #2a2a2a; }
/* 05/10: the user cards are glass too, like the section above; their icons
   are dark grey, so they're turned white to read on the glass */
.bfm-benefits--light .bfm-card.glass .bfm-card__icon img { filter: brightness(0) invert(1); }
/* hover: same lift + 3% zoom as the solution cards and the Insights pillars;
   the track's 48px padding leaves room so it isn't clipped */
.bfm-card { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.bfm-card:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 16px 32px rgba(0,0,0,.4); }
.bfm-benefits--light .bfm-card:not(.glass):hover { box-shadow: 0 16px 32px rgba(0,0,0,.18); }
.bfm-carousel__track.is-dragging .bfm-card:hover { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .bfm-card:hover { transform: none; }
}
/* 05/10: same look as the side section indicator (.fp-nav__dot in styles.css),
   laid flat: 6px-thick pills, 12px long, 40px for the current one, faint white
   with the current one lit */
.bfm-dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: -24px; position: relative; z-index: 1; }
.bfm-dots button {
  width: 12px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, .35);
  cursor: pointer;
  transition: width .35s var(--ease), background .25s var(--ease);
}
.bfm-dots button:hover { background: rgba(255, 255, 255, .7); }
.bfm-dots button.is-active { width: 40px; background: #fff; }

/* autoplay (js/bfm.js): same pattern as the homepage testimonials, just a
   shorter fill duration since each card is much less to read */
.bfm-carousel.is-auto .bfm-dots button { position: relative; overflow: hidden; }
.bfm-carousel.is-auto .bfm-dots button.is-active { background: rgba(255, 255, 255, .35); }
.bfm-carousel.is-auto .bfm-dots button.is-active::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #fff;
  transform-origin: left;
  animation: bfmDotFill 3.5s linear forwards;
}
.bfm-carousel.is-paused .bfm-dots button.is-active::after { animation-play-state: paused; }
@keyframes bfmDotFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.bfm-cta { position: relative; min-height: 830px; margin-top: -117px; display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center; }
/* 06/10: one canvas over the whole section with both "O" loops of glass plates
   (js/bfm-glass-o.js). The .bfm-cta__swirl rules below are the previous version
   (two "C" swirls), no longer in the page. */
.bfm-cta__glass { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
/* since 02/10 these are canvases (js/bfm-glass.js), same box as the old JPGs */
.bfm-cta__swirl { position: absolute; display: block; height: auto; aspect-ratio: 382 / 695; pointer-events: none; }
/* -14px: room for the mouse parallax (RANGE_X in js/bfm.js), since the swirl
   runs right up to its left edge */
.bfm-cta__swirl--left { left: -14px; top: 135px; width: 382px; }
.bfm-cta__swirl--right { right: -24px; top: 0; width: 383px; transform: scaleX(-1); }
/* entrance: both swirls reveal at the same time with a soft-edged mask, the
   right one top to bottom, the left one bottom to top (same technique as the
   Score closing wave; js/bfm.js toggles .is-in on the section) */
@property --bfm-swirl { syntax: '<percentage>'; inherits: false; initial-value: 114%; }
.bfm-cta__swirl {
  --bfm-swirl: 0%;
  transition: --bfm-swirl 0s;
}
.bfm-cta__swirl--right {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--bfm-swirl) - 14%), transparent var(--bfm-swirl));
  mask-image: linear-gradient(to bottom, #000 calc(var(--bfm-swirl) - 14%), transparent var(--bfm-swirl));
}
.bfm-cta__swirl--left {
  -webkit-mask-image: linear-gradient(to top, #000 calc(var(--bfm-swirl) - 14%), transparent var(--bfm-swirl));
  mask-image: linear-gradient(to top, #000 calc(var(--bfm-swirl) - 14%), transparent var(--bfm-swirl));
}
.bfm-cta.is-in .bfm-cta__swirl { --bfm-swirl: 114%; transition: --bfm-swirl 1.8s cubic-bezier(.45, 0, .2, 1) .45s; }
@media (prefers-reduced-motion: reduce) {
  .bfm-cta__swirl, .bfm-cta.is-in .bfm-cta__swirl { --bfm-swirl: 114%; transition: none; }
}
.bfm-cta__content { position: relative; z-index: 1; padding-top: 110px; }
.bfm-cta h2 { font-size: 40px; font-weight: 700; line-height: 1.25; margin: 0 0 20px; }
.bfm-cta p { max-width: 720px;   /* 06/10: 3 lines on desktop (was 600px, 4 lines) */ margin: 0 auto 40px; font-size: 15px; line-height: 1.6; color: #e8e8e8; }

.bfm-faq { padding: 60px 0 82px; }
.bfm-faq .container { max-width: calc(954px + 48px); }
.bfm-faq__title { font-size: 44px; font-weight: 700; line-height: 1.3; margin: 0 0 27px; }
/* separate cards on black: drop the shared list's hairline background, which
   would otherwise fill the 13px gaps in grey */
.bfm-faq .faq-list { max-width: none; gap: 13px; background: none; border-radius: 0; overflow: visible; }
/* 05/10: the FAQ items are glass cards (.glass), like the rest of the site */
.bfm-faq .faq-item { border-radius: 6px; }
.bfm-faq .faq-item:not(.glass) { background: #2a2a2a; }
.bfm-faq .faq-item summary { padding: 17px 60px 17px 29px; font-size: 16px; font-weight: 700; line-height: 20px; position: relative; }
.bfm-faq .faq-item summary::after {
  content: '';
  position: absolute;
  right: 26px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
  transition: transform .25s var(--ease);
}
.bfm-faq .faq-item[open] summary::after { transform: rotate(-45deg); margin-top: -9px; }
.bfm-faq .faq-item p { padding: 0 29px 22px; font-size: 14px; line-height: 1.6; color: #e8e8e8; }

/* one screen per section when js/fullpage.js is active (desktop) */
html.fp-on .bfm-hero {
  min-height: 100vh;
  padding: var(--header-h) 0 40px;
  display: flex;
  align-items: center;
}
html.fp-on .bfm-hero__grid { width: 100%; }
/* keep the bleed, but never taller than the screen (1.5886 = image aspect ratio) */
html.fp-on .bfm-hero__visual { --visual-w: min(50vw, calc((100vh - var(--header-h) - 80px) * 1.5886)); }
html.fp-on .bfm-exp,
html.fp-on .bfm-benefits,
html.fp-on .bfm-cta {
  min-height: 100vh;
  margin-top: 0;
  padding: var(--header-h) 0 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
html.fp-on .bfm-exp > .container { width: 100%; }
html.fp-on .bfm-cta__content { padding-top: 0; }
html.fp-on .bfm-faq { padding-top: calc(var(--header-h) + 40px); }

@media (max-width: 860px) {
  .bfm-hero { padding: 120px 0 80px; }
  .bfm-hero__grid { grid-template-columns: 1fr; gap: 40px; transform: none; }
  .bfm-hero__visual { justify-self: center; width: 100%; margin-right: 0; }
  .bfm-hero__brand { width: 240px; }
  .bfm-hero .bfm-lead { margin-bottom: 52px; }
  .bfm-hero h1, .bfm-exp__text h2, .bfm-title { font-size: 28px; }
  .bfm-exp__text h2 br { display: none; }
  .bfm-exp { padding: 80px 0 100px; }
  .bfm-exp__inner { flex-direction: column; gap: 40px; transform: none; }
  .bfm-exp__text { text-align: center; }
  .bfm-exp__text p { margin: 0 auto; }
  .bfm-carousel__viewport {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  }
  .bfm-cta { min-height: 560px; margin-top: 0; }
  .bfm-cta__swirl { width: 200px !important; opacity: .6; }
  .bfm-cta__content { padding-top: 0; }
  .bfm-cta h2 { font-size: 28px; }
  .bfm-faq__title { font-size: 32px; }
}

/* ===== Insights page (insights.html) — designer layout, measured from the 1440px frame ===== */
.ins { --ins-w: 876px; --ins-line: #62ECA4; }
.ins-wrap { box-sizing: content-box; max-width: var(--ins-w); margin: 0 auto; padding: 0 24px; position: relative; }
/* type follows the BFM page: section titles 40px/400, body copy 15-16px */
.ins-title { font-size: 40px; font-weight: 700; line-height: 1.25; text-align: center; margin: 0 auto; }
.ins-sub { font-size: 16px; line-height: 1.6; text-align: center; margin: 22px auto 0; color: #e8e8e8; max-width: 640px; }
.ins-sub--narrow { max-width: 480px; }
/* one sentence per line: the breaks are set by hand, so no width cap */
.ins-sub--lines { max-width: none; }
.ins-steps .ins-sub { margin-top: 30px; }
.ins-title--line { white-space: nowrap; }
@media (max-width: 860px) { .ins-title--line { white-space: normal; } .ins-sub--lines br { display: none; } }
.ins-btn {
  display: inline-flex;
  align-items: center;
  height: 29px;
  padding: 0 13px;
  border: 1px solid #31AB6B;
  border-radius: 1px;
  background: #020a07;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.ins-btn:hover { border-color: var(--neon); background: rgba(80, 234, 154, .12); transform: translateY(-2px); }
.ins-section { position: relative; }
/* full-screen mode (js/fullpage.js, desktop): one section per screen, content centred */
html.fp-on .ins-section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--header-h) + 24px) 0 40px;
  box-sizing: border-box;
}
/* flex items with auto margins don't stretch: give the text column its width back
   (content-box, so 100% - its 2x24px padding) */
html.fp-on .ins-section > .ins-wrap { width: calc(100% - 48px); }
html.fp-on .ins-steps__track { width: 100%; }

/* the flow images' near-black ground isn't page black: feather every edge so no box shows */
.ins-hero__bg img, .ins-cta__flow, .ins-cta__streak {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 18%, #000 78%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 18%, #000 78%, transparent);
  mask-composite: intersect;
}
/* hero: title above the light line, lead + button below it.
   Product-page standard (same as the BFM hero): full screen, copy block centred
   vertically, left edge on the BFM text column — its grid (590px text + 56px
   gap + 47vw visual, centred, nudged 30px) puts that edge at 26.5vw - 293px. */
.ins-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: var(--header-h) 0 40px;
  box-sizing: border-box;
  overflow: hidden;
}
.ins-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.ins-hero__bg img {
  position: absolute;
  /* the image's light line sits 380px from its top; with the copy block centred
     (logo 53 + 52, title 3x72.8, 90 gap, lead, 52, button) this keeps it in the
     90px gap between the title and the lead */
  top: calc(50vh - 278px);
  left: calc(50% - 577px);
  width: 1293px;
  height: 745px;
  max-width: none;
  object-fit: cover;
}
/* dark wash behind the copy on the left, then a fade into the next section */
.ins-hero__bg::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 716px);
  width: 404px;
  background: linear-gradient(to right, #000 29%, transparent);
}
.ins-hero__bg::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, #000);
}
.ins-hero__content {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 24px 0 max(24px, calc(26.5vw - 293px));
}
.ins-hero__logo { display: block; width: auto; height: 53px; margin: 0 0 52px; } /* same height as the BFM product logo */
.ins-hero__title { font-size: 56px; font-weight: 700; line-height: 1.3; letter-spacing: 1.2px; margin: 0; }
.ins-hero__lead { max-width: 480px; margin: 140px 0 0; font-size: 16px; line-height: 1.6; color: #e8e8e8; }
.ins-hero__content .glow-button { display: inline-block; margin-top: 52px; }
.ins-hero__logo, .ins-hero__title, .ins-hero__lead, .ins-hero__content .glow-button { animation: fadeUp .8s var(--ease) both; }
.ins-hero__title { animation-delay: .1s; }
.ins-hero__lead { animation-delay: .2s; }
.ins-hero__content .glow-button { animation-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  .ins-hero__logo, .ins-hero__title, .ins-hero__lead, .ins-hero__content .glow-button { animation: none; }
}

/* pain: vertical wordmark, laptop over a soft green glow, the three facts on the right */
.ins-pain { padding-bottom: 96px; }
.ins-pain__stage { position: relative; height: 514px; margin-top: 55px; }
/* composition (word + laptop + facts) is re-centred in the 876px column: it now
   spans 999px, with ~100px of air between the laptop and the facts, like the
   BFM "Experiência" section (visual → text 100px) */
.ins-pain__word { position: absolute; left: -61px; top: 1px; width: 73px; height: auto; }
.ins-pain__glow {
  position: absolute;
  left: 249px;
  top: 40px;
  width: 323px;
  height: 318px;
  border-radius: 50%;
  background: var(--ins-line);
  filter: blur(90px);
  opacity: .5;
}
.ins-pain__laptop { position: absolute; left: -26px; top: 0; width: 629px; height: auto; }
/* 15/10: the laptop is a photo with its screen painted black (.ins-laptop__frame) and,
   over it, a video of the Hub Analítico scrolling (.ins-laptop__screen); js/ins-laptop.js
   maps the 800x500 video onto the screen's corners with a matrix3d transform. */
.ins-laptop { overflow: hidden; }
/* 16/10: the photo is ABOVE the video (its display is cut out with a smooth edge), the
   video below it, mapped a little larger than the display: no jagged edges */
.ins-laptop__frame { display: block; width: 100%; height: auto; position: relative; z-index: 2; pointer-events: none; }
.ins-laptop__screen { position: absolute; left: 0; top: 0; width: 800px; height: 500px; transform-origin: 0 0; z-index: 1; pointer-events: none; object-fit: fill; background: #000; }
/* facts block (+ sources under it) centred vertically on the INSIGHTS word (same top + height: 1px, 471px) */
.ins-pain__facts { position: absolute; left: 698px; top: 1px; height: 471px; width: 240px; display: flex; flex-direction: column; justify-content: center; }
.ins-pain__list { display: flex; flex-direction: column; gap: 40px; }
/* sources sit under the facts, on the same text edge (2px rule + 14px padding) */
.ins-pain .ins-pain__source { margin: 40px 0 0; padding-left: 0; text-align: left; font-size: 11px; white-space: nowrap; }
.ins-pain__list li { border-left: 2px solid #fff; padding-left: 14px; font-size: 15px; line-height: 1.6; color: #e8e8e8; }


/* four steps on one green line */
.ins-steps { padding: 96px 0 150px; }
.ins-steps__track { position: relative; margin-top: 100px; }
/* 05/10: neon line + energy pulse, from the approved model
   (Downloads/celero-quatro-passos.html, js/insights.js). The old 1px line
   (::before) is gone. --glow is a slow neon "breathing", --flare lights a
   circle up as the pulse goes by. */
.ins-steps__track { --cf-green: #2fe67a; --cf-core: #8ef5b8; }
.ins-steps__line,
.ins-steps__pulse-track { position: absolute; left: 0; right: 0; top: 40.5px; height: 2px; pointer-events: none; }
.ins-steps__line {
  border-radius: 2px;
  background: var(--cf-core);
  box-shadow: 0 0 2px var(--cf-green), 0 0 6px var(--cf-green), 0 0 12px rgba(47, 230, 122, .55), 0 0 26px rgba(47, 230, 122, .28);
  opacity: var(--glow, .9);
  will-change: opacity;   /* 15/10: the breathing (--glow, 12x/s) is composited, not repainted with the four shadows */
}
.ins-steps__pulse {
  position: absolute;
  top: 0;
  left: 0;
  width: 320px;
  height: 3px;
  margin-top: -.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(57, 255, 136, 0) 0%, rgba(57, 255, 136, .55) 40%, rgba(190, 255, 215, .95) 82%, #fff 100%);
  filter: drop-shadow(0 0 3px #7dffb5) drop-shadow(0 0 8px #39ff88) drop-shadow(0 0 18px rgba(57, 255, 136, .7));
  opacity: 0;
  will-change: transform, opacity;
}
.ins-steps__pulse::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 50%;
  width: 10px;
  height: 6px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: #fff;
  box-shadow: 0 0 4px #fff, 0 0 10px #7dffb5, 0 0 22px #39ff88, 0 0 44px rgba(57, 255, 136, .7), 0 0 80px rgba(57, 255, 136, .35);
}
/* opening: the line is drawn by the script; circles and text wait for it */
.ins-steps__track.is-intro .ins-steps__line { clip-path: inset(-60px 100% -60px 0); }
.ins-steps__track.is-intro .ins-steps__num { opacity: 0; transform: scale(.82); }
.ins-steps__track.is-intro .ins-steps__list h3,
.ins-steps__track.is-intro .ins-steps__list p { opacity: 0; transform: translateY(16px); }
/* .ins-steps__track prefix: these must outrank the .is-intro rules above, or the
   titles and texts stay hidden (bug fixed 05/10) */
.ins-steps__track .ins-steps__list li.is-in .ins-steps__num { opacity: 1; transform: none; transition: opacity .23s ease-out, transform .4s cubic-bezier(.2, .8, .2, 1); }
.ins-steps__track .ins-steps__list li.is-in h3,
.ins-steps__track .ins-steps__list li.is-in p { opacity: 1; transform: none; transition: opacity .7s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
.ins-steps__track .ins-steps__list li.is-in p { transition-delay: .12s; }
.ins-steps__list { display: grid; grid-template-columns: repeat(4, min(300px, 24vw)); justify-content: center; margin: 0; padding: 0; list-style: none; }
.ins-steps__list li { text-align: center; }
.ins-steps__num {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 83px;
  height: 83px;
  margin: 0 auto;
  border-radius: 50%;
  background: #090909;
  font-size: 69px;
  font-weight: 700;
  line-height: 1;
}
/* optical centring of each digit in its circle (05/10): the glyphs sat 1px
   low and the "2" and "3" 1px to the left (padding on one side shifts the
   flex-centred digit by half of it). The "1" is NOT box-centred on purpose:
   its flag and heavy right side read as off-centre, so its ink sits ~1.5px
   left of the circle's centre */
.ins-steps__num { padding-bottom: 2px; }
.ins-steps__list li:nth-child(1) .ins-steps__num { padding-left: 2px; }
.ins-steps__list li:nth-child(2) .ins-steps__num,
.ins-steps__list li:nth-child(3) .ins-steps__num { padding-left: 2px; }
/* neon ring (breathing with the line) and the flare as the pulse passes */
.ins-steps__num::before,
.ins-steps__num::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.ins-steps__num::before {
  border: 2px solid var(--cf-core);
  box-shadow: 0 0 2px var(--cf-green), 0 0 6px var(--cf-green), 0 0 12px rgba(47, 230, 122, .55), 0 0 26px rgba(47, 230, 122, .28),
    inset 0 0 3px var(--cf-green), inset 0 0 9px rgba(47, 230, 122, .45), inset 0 0 18px rgba(47, 230, 122, .14);
  opacity: var(--glow, .9);
}
.ins-steps__num::after {
  border: 2px solid #fff;
  box-shadow: 0 0 4px #fff, 0 0 10px #7dffb5, 0 0 22px #39ff88, 0 0 44px rgba(57, 255, 136, .6), inset 0 0 6px #7dffb5, inset 0 0 18px rgba(57, 255, 136, .5);
  opacity: var(--flare, 0);
}
/* same card-title style as .bfm-card h3 / .ins-pillar h3 */
.ins-steps__list h3 { margin: 36px 0 0; font-size: 15px; font-weight: 700; line-height: 20px; letter-spacing: .3px; text-transform: uppercase; }
.ins-steps__list p { max-width: 220px; margin: 12px auto 0; font-size: 15px; line-height: 1.6; color: #e8e8e8; }

/* five pillars: wider than the text column (1052px in the layout) */
.ins-pillars { padding-bottom: 146px; }
/* full-screen mode: the content is centred in the screen but the fixed header
   eats the top, so the group read low; more room below lifts it ~40px (05/10) */
html.fp-on .ins-pillars { padding-bottom: 120px; }
.ins-pillars__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 17px;
  width: min(1052px, calc(100vw - 48px));
  margin: 84px 0 0 50%;
  transform: translateX(-50%);
}
.ins-pillar { min-height: 300px; padding: 40px 18px 28px; border-radius: 3px; background: #2A2A2A; text-align: center; }
.ins-pillar h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  max-width: 170px;
  margin: 0 auto;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: .3px;
  text-transform: uppercase;
}
/* icon slot: placeholder until the icons are chosen (swap the span for an <img>) */
.ins-pillar__icon { display: block; width: 56px; height: 56px; margin: 0 auto 24px; border-radius: 50%; border: 1px dashed rgba(98, 236, 164, .45); background: radial-gradient(circle, rgba(98, 236, 164, .14), transparent 70%); }
.ins-pillar p { max-width: 170px; margin: 20px auto 0; font-size: 15px; line-height: 24px; color: #e8e8e8; }
/* 05/10: the team's 3D scanline icons (js/insights-pillars.js) in place of the
   dashed circles; without WebGL the script marks them .is-fallback and the
   dashed circle comes back */
/* own compositing layer: each frame of the icon then updates only this layer,
   instead of repainting the whole glass card (masks and all) around it */
.ins-pillar__art { display: block; width: 171px; max-width: 100%; height: 150px; margin: -18px auto 8px; flex-shrink: 0; will-change: transform; transform: translateZ(0); }
.ins-pillar__art.is-fallback { width: 56px; height: 56px; margin: 0 auto 24px; border-radius: 50%; border: 1px dashed rgba(98, 236, 164, .45); background: radial-gradient(circle, rgba(98, 236, 164, .14), transparent 70%); }

/* closing call: the data flow runs the other way, behind the copy */
.ins-cta { overflow: hidden; padding: 146px 0 100px; }
/* the flow sits inside the copy box, so its light line stays locked between the
   title and the text wherever the section is placed on screen */
.ins-cta__bg { position: absolute; left: 0; right: 0; top: 0; height: 100%; z-index: -1; pointer-events: none; }
.ins-cta__flow {
  position: absolute;
  top: -160px;
  left: calc(50% - 1240px);
  width: 1293px;
  height: 745px;
  max-width: none;
  object-fit: cover;
  transform: rotate(180deg);
}
.ins-cta__streak {
  position: absolute;
  top: -262px;
  left: calc(50% + 14px);
  width: 1722px;
  height: 917px;
  max-width: none;
  object-fit: cover;
}
.ins-cta__content { position: relative; z-index: 1; isolation: isolate; text-align: center; }
.ins-cta__title { max-width: 680px; }
.ins-cta__title.ins-title--line { max-width: none; } /* one sentence per line */
.ins-cta__text { max-width: 480px; margin-top: 180px; }
.ins-cta__content .glow-button { display: inline-block; margin-top: 40px; }

@media (max-width: 1080px) {
  .ins-pillars__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
  .ins-pain__stage { height: auto; display: flex; flex-direction: column; align-items: center; }
  .ins-pain__word { display: none; }
  .ins-pain__glow { left: 50%; top: 20px; transform: translateX(-50%); }
  .ins-pain__laptop { position: relative; left: 0; width: min(629px, 100%); }
  .ins-pain__facts { position: static; height: auto; width: auto; max-width: 480px; margin-top: 32px; }
  .ins-pain__list { gap: 20px; }
}
@media (max-width: 860px) {
  .ins-title { font-size: 28px; line-height: 1.3; }
  .ins-title br { display: none; }
  .ins-hero { min-height: 640px; display: block; padding: 0; }
  .ins-hero__bg img { top: 230px; left: -40%; width: 180%; height: auto; opacity: .75; }
  .ins-hero__content { padding: 110px 24px 0; }
  .ins-hero__title { font-size: 28px; line-height: 1.3; }
  .ins-hero__lead { margin-top: 150px; }
  /* 29/10 (her request): the two rows of steps each get the neon line, edge to edge, with
     the same pulse (js/insights.js places the lines at the rows and makes the second one);
     the pulse's tail is shorter on a narrow screen, keeping the desktop's proportion */
  .ins-steps__pulse { width: min(320px, 45vw); }
  .ins-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px; padding: 0 24px; }
  .ins-pillars__grid { grid-template-columns: repeat(2, 1fr); width: auto; margin: 48px 0 0; transform: none; }
  .ins-cta__flow { left: -70%; }
  .ins-cta__title { line-height: 1.3; }
  .ins-cta__text { margin-top: 90px; }
}
@media (max-width: 480px) {
  .ins-pillars__grid { grid-template-columns: 1fr; }
  .ins-pillar { min-height: 0; padding: 32px 18px; }
}
/* ---- Insights motion: reuses the site's existing patterns ---- */
/* pain glow breathes like the "Quem somos" globe halo (sphereBreathe) */
.ins-pain__glow { animation: insGlowBreathe 5s ease-in-out infinite; }
@keyframes insGlowBreathe { 0%, 100% { opacity: .35; } 50% { opacity: .6; } }
/* the steps line draws left to right and each step appears as it passes (js/insights.js
   sets [data-draw] and tweens --draw; same scaleX fill as the carousel dots) */
/* pillars: same proximity glow + hover lift as the home solution cards */
.ins-pillar {
  --active: 0;
  --start: 0;
  --spread: 60;
  --border-width: 2px;
  --glow-border: rgba(80, 234, 154, .35);
  --glow-gradient: conic-gradient(from 180deg at 50% 70%,
    #d9fff0 0deg, #50ea9a 90deg, #0d8f5f 180deg, #baffe0 270deg, #d9fff0 1turn);
  position: relative;
  transition: opacity .6s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.ins-pillar:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 16px 32px rgba(0,0,0,.4); }
@media (prefers-reduced-motion: reduce) {
  .ins-pain__glow { animation: none; }
  .ins-pillar:hover { transform: none; }
}

/* Insights hero: the designer's data-enrichment animation replaces the flow
   image (js/insights-hero.js); the bottom fade stays on top of it */
.ins-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ins-hero__bg::after { z-index: 1; }
.ins-hero__bg::before { display: none; } /* the animation has its own dark field on the left */
/* closing section: the hero animation reversed (js/insights-hero.js, mirror).
   The canvas is flipped here; the script draws its texts back the right way */
.ins-cta__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; transform: scaleX(-1); pointer-events: none; }
/* vignette + film grain of the data animations (js/insights-hero.js adds these
   over each canvas). They used to be drawn inside the canvas every frame; as
   CSS layers they are painted once and composited by the GPU. The grain is the
   script's own noise tile, added with plus-lighter at the same opacity, and
   jumps around like the random offset it replaced. The canvas's parent is
   isolated so the blend sees only the canvas. */
.ins-hero__bg, .ins-cta { isolation: isolate; }
.ins-canvas-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } /* no z-index: a stacking context here would keep the grain from blending with the canvas */
.ins-canvas-fx__vignette {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 8%, rgba(0,0,0,0) 95%, rgba(0,0,0,.3) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, rgba(0,0,0,.7) 100%);
}
.ins-canvas-fx--mirror .ins-canvas-fx__vignette { transform: scaleX(-1); } /* the canvas under it is flipped */
/* 15/10: the animation's text layers (incoming values, data grid) are canvases of
   their own at the screen's resolution, added over the 1x drawing (plus-lighter,
   like the 'lighter' blits they replace); the wrapper carries the parallax (js) */
.ins-canvas-text { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
.ins-canvas-text canvas { position: absolute; left: 0; top: 0; display: block; mix-blend-mode: plus-lighter; }
.ins-canvas-fx__grain {
  position: absolute; left: -160px; top: -160px; right: -160px; bottom: -160px;
  background-repeat: repeat; background-size: 160px 160px;
  opacity: .028; mix-blend-mode: plus-lighter;
  animation: insGrain .4s steps(1, end) infinite;
  will-change: transform;
}
@keyframes insGrain {
  0%    { transform: translate(0, 0); }
  12.5% { transform: translate(37px, 91px); }
  25%   { transform: translate(118px, 22px); }
  37.5% { transform: translate(64px, 140px); }
  50%   { transform: translate(151px, 73px); }
  62.5% { transform: translate(9px, 48px); }
  75%   { transform: translate(96px, 127px); }
  87.5% { transform: translate(132px, 5px); }
  100%  { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) { .ins-canvas-fx__grain { animation: none; } }

/* ===== Score page (score.html) — designer layout, built on the Insights
   (.ins-*) product-page blocks; only what differs lives here ===== */
/* hero: the score gauge line image, full bleed; js/score.js sets its top so the
   line runs halfway between the title and the lead */
.sc-hero .ins-hero__bg img.sc-hero__bg {
  top: calc(50vh - 420px);
  left: 50%;
  width: max(1440px, 100vw);
  height: auto;
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
/* the gauge sits on the right: no dark wash needed behind the copy */
.sc-hero .ins-hero__bg::before { display: none; }
/* the Score wordmark is wider than the others: a little shorter than the 53px standard */
.sc-hero .ins-hero__logo { height: 44px; }

/* "A Celero mede": same stage as the Insights pain section (vertical word,
   laptop over a green glow, facts centred on the word, ~100px laptop → facts,
   composition centred in the 876px column) */
.sc-sub { max-width: 692px; }
.sc-pain .ins-pain__stage { height: 420px; }
.sc-pain .ins-pain__word { left: -20px; width: 88px; }
.sc-pain .ins-pain__glow { left: 83px; top: 12px; }
/* 14/10: mockup 8% bigger (was left 61, top 33, width 554), grown around its centre; glow moved with it */
.sc-pain .ins-pain__laptop { left: 38px; top: 16px; width: 600px; }
.sc-pain .ins-pain__facts { left: 695px; height: 405px; width: 200px; }
/* 20/10 (comentário dela): os números da lista um pouco maiores e em bold */
.sc-pain__num { font-size: 20px; font-weight: 700; color: #fff; }

/* "Score de risco": four cards under the red→green scale line */
.sc-score { overflow: hidden; }
.sc-score .ins-wrap { position: relative; z-index: 1; }
.sc-score__line {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 50%;
  width: max(1440px, 100vw);
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
}
.sc-cards { grid-template-columns: repeat(4, 1fr); gap: 25px; width: min(863px, calc(100vw - 48px)); margin-top: 140px; }
.sc-card { min-height: 205px; padding: 40px 18px 28px; }
.sc-card p { margin-top: 18px; }

/* closing call: the glass wave behind the copy, tilted as in the layout */
.sc-cta__wave {
  position: absolute;
  z-index: -1;
  left: calc(50% - 1808px);
  top: -320px;
  width: 2772px;
  height: 1617px;
  max-width: none;
  object-fit: cover;
  transform: rotate(-18.94deg);
  /* a touch bigger than the layout, so the mouse parallax (up to 22px, js/score.js)
     never pulls the image's right edge into view */
  scale: 1.03;
  pointer-events: none;
}
/* reveal, left to right: a soft-edged mask sweeps along the wave when the
   section comes in (js/score.js toggles .is-in). The image runs far off the
   left of the screen, so the sweep starts around the screen's left edge. */
@property --sc-wave { syntax: '<percentage>'; inherits: false; initial-value: 112%; }
.sc-cta__wave {
  --sc-wave: 30%;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--sc-wave) - 14%), transparent var(--sc-wave));
  mask-image: linear-gradient(90deg, #000 calc(var(--sc-wave) - 14%), transparent var(--sc-wave));
  transition: --sc-wave 0s;
}
.sc-cta__wave.is-in { --sc-wave: 112%; transition: --sc-wave 2.2s cubic-bezier(.45, 0, .2, 1) .45s; }
@media (prefers-reduced-motion: reduce) {
  .sc-cta__wave, .sc-cta__wave.is-in { --sc-wave: 112%; transition: none; }
}
/* closing call background (02/10): Three.js glass plates (js/score-glass.js)
   fill the whole section behind the copy; it replaced the wave image above */
.sc-cta__glass { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; }
/* entrance: a soft-edged mask sweeps it in left to right each time the section
   comes in (js/score-glass.js toggles .is-in), same recipe as the old wave */
@property --sc-glass { syntax: '<percentage>'; inherits: false; initial-value: 114%; }
.sc-cta__glass {
  --sc-glass: 0%;
  -webkit-mask-image: linear-gradient(to right, #000 calc(var(--sc-glass) - 14%), transparent var(--sc-glass));
  mask-image: linear-gradient(to right, #000 calc(var(--sc-glass) - 14%), transparent var(--sc-glass));
  transition: --sc-glass 0s;
}
.sc-cta__glass.is-in { --sc-glass: 114%; transition: --sc-glass 2.2s cubic-bezier(.45, 0, .2, 1) .45s; }
@media (prefers-reduced-motion: reduce) {
  .sc-cta__glass, .sc-cta__glass.is-in { --sc-glass: 114%; transition: none; }
}
.sc-cta__text { max-width: 820px; margin-top: 22px; }   /* 06/10: 2 lines on desktop (was 560px) */
/* copy raised so it stays clear of the glass plates below it (was -60px with
   the old wave; -150px since 02/10) */
.sc-cta .ins-cta__content { top: -150px; }

@media (max-width: 960px) {
  .sc-pain .ins-pain__laptop { left: 0; width: min(600px, 100%); }
}
@media (max-width: 860px) {
  .sc-cards { grid-template-columns: repeat(2, 1fr); margin-top: 48px; }
  .sc-cta__wave { left: -1400px; }
}
@media (max-width: 480px) {
  .sc-cards { grid-template-columns: 1fr; }
}

/* Score hero gauge (js/score-gauge.js): the designer's image rebuilt live, in
   the image's own 1440x900 frame. 1em = 1 image px, so the readout scales with
   the drawing. js/score.js sets its top (line halfway title → lead). */
.sc-gauge {
  position: absolute;
  left: 50%;
  top: calc(50vh - 420px);
  width: max(1440px, 100vw);
  aspect-ratio: 1440 / 900;
  transform: translateX(-50%);
  font-size: calc(max(1440px, 100vw) / 1440);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  pointer-events: none;
}
.sc-gauge__svg, .sc-gauge__dust { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sc-gauge__head { transform-box: fill-box; transform-origin: center; opacity: 0; }
.sc-gauge.is-done .sc-gauge__head { animation: scHeadPulse 2.4s ease-in-out infinite; }
@keyframes scHeadPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: .8; } }
.sc-gauge__read {
  position: absolute;
  left: 71.875%;
  top: 47.7%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
  font-weight: 700;
}
.sc-gauge__label { font-size: 11.5em; letter-spacing: .04em; color: #fff; }
.sc-gauge__num { margin-top: .12em; font-size: 52em; letter-spacing: .14em; margin-right: -.14em; color: #fff; font-variant-numeric: tabular-nums; }
.sc-gauge__status { margin-top: .9em; font-size: 11.5em; letter-spacing: .04em; color: #50ea9a; transition: color .3s; }
@media (max-width: 860px) {
  .sc-gauge { width: 170vw; font-size: calc(170vw / 1440); transform: translateX(-62%); }
}

/* Score hero: live score line (adapted from the reference file
   Downloads/score-line-hero.html; js/score-line.js). Covers the hero; the
   straight run sits halfway between the title and the lead. */
.sc-line {
  --live: #FF2F2F; --glow-a: rgba(255,47,47,.5); --glow-b: rgba(255,47,47,.22);
  position: absolute; inset: 0; pointer-events: none;
}
.sc-line__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
/* 05/10 (performance): each SVG is its own compositing layer; parallax and the
   atmosphere's breathing are transforms on the layer (js), so they don't repaint.
   The front layer (flare, pulses, sparks) screens onto the line like before. */
.sc-line .sl-layer { will-change: transform; }
.sc-line .sl-layer--front { mix-blend-mode: screen; }
.sc-line .sl-atmos { opacity: .85; }
/* 05/10: the two widest static glows blur through an SVG filter that also adds
   a fine noise (dither) proportional to the glow, breaking up the banding rings
   without lifting the black (see #sl-dith72 / #sl-dith64 in score.html) */
.sc-line .sl-atmosE { filter: url(#sl-dith72); }
.sc-line .ghost-line { fill: none; stroke: url(#sl-g); stroke-width: 22; filter: url(#sl-dith64); opacity: .28; }
.sc-line .ghost-line2 { fill: none; stroke: url(#sl-g); stroke-width: 9; filter: blur(30px); opacity: .2; }
.sc-line .ref { fill: none; stroke: url(#sl-g); stroke-width: 3; stroke-linecap: round; filter: blur(13px); opacity: .28; }
.sc-line .ref2 { fill: none; stroke: url(#sl-g); stroke-width: 9; stroke-linecap: round; filter: blur(34px); opacity: .14; }
.sc-line .track { fill: none; stroke: #454B49; stroke-width: 1.6; stroke-linecap: round; opacity: .85; }
.sc-line .track-glow { fill: none; stroke: #454B49; stroke-width: 4; stroke-linecap: round; filter: blur(7px); opacity: .28; }
.sc-line .tick { stroke: #3C4341; stroke-width: 1.2; stroke-linecap: round; }
.sc-line .thr { stroke: #5A6360; stroke-width: 1.6; stroke-linecap: round; transition: stroke .45s ease, filter .45s ease; }
.sc-line .thr.on { stroke: #DFF6EA; filter: drop-shadow(0 0 5px rgba(223,246,234,.75)); }
.sc-line .ln { fill: none; stroke: url(#sl-g); stroke-linecap: round; }
.sc-line .l5 { stroke-width: 14; filter: blur(54px); opacity: .42; }
.sc-line .l4 { stroke-width: 8; filter: blur(24px); opacity: .7; }
.sc-line .l3 { stroke-width: 4.4; filter: blur(10px); opacity: .92; }
.sc-line .l2 { stroke-width: 2.8; filter: blur(3.4px); }
.sc-line .l1 { stroke-width: 1.5; }
.sc-line .lw3 { stroke: #fff; stroke-width: 7.5; filter: blur(11px); opacity: .24; mix-blend-mode: screen; }
.sc-line .lw2 { stroke: #fff; stroke-width: 3.6; filter: blur(4.5px); opacity: .52; mix-blend-mode: screen; }
.sc-line .lw1 { stroke: #fff; stroke-width: 1.05; filter: blur(1.7px); opacity: .94; mix-blend-mode: screen; }
.sc-line .sl-pulses path { fill: #fff; mix-blend-mode: screen; }
.sc-line .pz-glow { filter: blur(9px); }
.sc-line .pz-core { filter: blur(2px); }
.sc-line .sl-flare { --p: 1; }   /* full strength; the pulse is the layer's opacity (js) */
.sc-line .sl-flare path { stroke: none; mix-blend-mode: screen; }
.sc-line .f-halo { fill: url(#sl-g); filter: blur(92px); opacity: calc(.46 + .54*var(--p)); }
.sc-line .f-aura { fill: url(#sl-g); filter: blur(52px); opacity: calc(.56 + .44*var(--p)); }
.sc-line .f-bloom { fill: url(#sl-g); filter: blur(26px); opacity: calc(.7 + .3*var(--p)); }
.sc-line .f-mid { fill: url(#sl-g); filter: blur(11px); opacity: calc(.84 + .16*var(--p)); }
.sc-line .f-core { fill: url(#sl-g); filter: blur(3px); }
.sc-line .f-wash { fill: #fff; filter: blur(46px); opacity: calc(.52 + .48*var(--p)); }
.sc-line .f-wash2 { fill: #fff; filter: blur(24px); opacity: calc(.66 + .34*var(--p)); }
.sc-line .f-hot { fill: #fff; filter: blur(12px); opacity: calc(.8 + .2*var(--p)); }
.sc-line .f-spark { fill: #fff; filter: blur(5px); opacity: calc(.9 + .1*var(--p)); }
.sc-line .sl-headGlow { mix-blend-mode: screen; filter: blur(30px); }
/* sparks: a soft radial gradient instead of blur + drop-shadow on each of the
   36 circles (06/10, performance) */
.sc-line .sl-particles circle { fill: url(#sl-spk); }
/* readout under the hump (Outfit: site standard, no monospace) */
/* 06/10: the readout sits tucked under the arch: digits centred under the apex
   (--aside-shift, js) and a fixed gap below it (was down at the straight run,
   floating far from the line) */
.sc-line__right {
  position: absolute; z-index: 2;
  left: calc(var(--apex-x, 50%) + var(--aside-shift, 0px));
  /* between the two tries: apex + 40px was too high, the straight run + 40px too low */
  top: calc(var(--apex-y, 40%) + (var(--peak, 55%) - var(--apex-y, 40%)) * .45 + 60px);
  transform: translateX(-50%);
}
/* 06/10: the two small lines sit up against the number (her reference): the
   last line ("Risco …") aligns to the digits' baseline (last baseline) and the
   pair is lifted .17 of the number size, so it reads beside the digits' lower
   half instead of hanging below them */
.sc-line__above { --sl-num: clamp(4rem, 9.5vw, 7.5rem); display: flex; align-items: last baseline; gap: 1.1rem; white-space: nowrap; opacity: 0; }
.sc-line__above .sc-line__aside { transform: translateY(calc(var(--sl-num) * -.17)); }
.sc-line.is-on .sc-line__above { animation: slRise .9s cubic-bezier(.16,1,.3,1) .35s forwards; }
.sc-line__score {
  font-weight: 700; font-size: var(--sl-num); line-height: .88; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: #fff;
  text-shadow: 0 0 22px var(--glow-a), 0 0 70px var(--glow-b);
}
.sc-line__aside { display: flex; flex-direction: column; gap: .5rem; }
.sc-line__of { font-size: .64rem; color: #6E7A74; letter-spacing: .32em; text-transform: uppercase; }
.sc-line__band { font-size: .68rem; font-weight: 700; color: var(--live); letter-spacing: .22em; text-transform: uppercase; }
@keyframes slRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) { .sc-line__right { top: calc(var(--peak, 55%) + 28px); transform: translateX(-50%); } .sc-line__above { gap: .8rem; } }
@media (prefers-reduced-motion: reduce) { .sc-line__above { opacity: 1; } .sc-line.is-on .sc-line__above { animation: none; } }

/* "Score de risco": the scale image drawn live (js/score-scale.js). Same frame
   as the image (1440x900, line at y 440); js/score.js sets its top */
.sc-scale {
  position: absolute; z-index: 0; top: 0; left: 50%;
  width: max(1440px, 100vw); aspect-ratio: 1440 / 900;
  transform: translateX(-50%); pointer-events: none;
}
.sc-scale svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
/* 06/10: the team's vector line (Downloads/linha score 2.html, js/score-vector.js),
   styles copied as they were, scoped to .sc-vec. Replaces the scale image
   (js/score-scale.js, no longer loaded). */
.sc-vec { --live: #FF2F2F; --glow-a: rgba(255,47,47,.5); --glow-b: rgba(255,47,47,.22); }
.sc-vec .sv-atmos { opacity: .17; }
.sc-vec .sv-atmosE { filter: blur(48px); }
.sc-vec .sv-ghost-line2 { fill: none; stroke: url(#svG); stroke-width: 12.2; filter: blur(32px); opacity: .065; }
.sc-vec .sv-ref { fill: none; stroke: url(#svG); stroke-width: 4.05; stroke-linecap: round; filter: blur(10px); opacity: .11; }
.sc-vec .sv-track { fill: none; stroke: #5D6563; stroke-width: 2.16; stroke-linecap: round; opacity: .85; }
.sc-vec .sv-track-glow { fill: none; stroke: #5D6563; stroke-width: 5.4; stroke-linecap: round; filter: blur(7px); opacity: .28; }
.sc-vec .sv-ln { fill: none; stroke: url(#svG); stroke-linecap: round; }
.sc-vec .l4 { stroke-width: 9.45; filter: blur(19px); opacity: .24; }
.sc-vec .l3 { stroke-width: 5.4; filter: blur(8px); opacity: .34; }
.sc-vec .l2 { stroke-width: 3.5; filter: blur(2.8px); opacity: .38; }
.sc-vec .l1 { stroke-width: 2.03; }
.sc-vec .lw3 { stroke: #fff; stroke-width: 10.1; filter: blur(11px); opacity: .09; }
.sc-vec .lw2 { stroke: #fff; stroke-width: 4.86; filter: blur(4.5px); opacity: .19; }
.sc-vec .lw1 { stroke: #fff; stroke-width: 1.42; filter: blur(1.7px); opacity: .44; }
.sc-vec .sv-pulses path { fill: #fff; }
.sc-vec .pz-glow { filter: blur(9px); }
.sc-vec .pz-core { filter: blur(2px); }
.sc-vec .sv-flare { --p: 1; }
.sc-vec .sv-flare path { stroke: none; }
.sc-vec .f-aura { fill: url(#svG); filter: blur(34px); opacity: calc(.08 + .027*var(--p)); }
.sc-vec .f-bloom { fill: url(#svG); filter: blur(18px); opacity: calc(.093 + .018*var(--p)); }
.sc-vec .f-mid { fill: url(#svG); filter: blur(8px); opacity: calc(.106 + .01*var(--p)); }
.sc-vec .f-wash2 { fill: #fff; filter: blur(16px); opacity: calc(.09 + .021*var(--p)); }
.sc-vec .f-core { fill: url(#svG); filter: blur(3px); opacity: .15; }
.sc-vec .f-hot { fill: #fff; filter: blur(15px); opacity: calc(.069 + .008*var(--p)); }
.sc-vec .f-spark { fill: #fff; filter: blur(9px); opacity: calc(.073 + .004*var(--p)); }
.sc-vec .sv-tipOval { fill: #fff; opacity: .72; }
/* additive light, like After Effects' Add mode (screen as the fallback) */
.sc-vec :is(.l2, .l3, .l4, .lw1, .lw2, .lw3, .sv-flare path, .sv-ghost-line2, .sv-ref, .sv-atmos, .sv-pulses path, .sv-particles circle, .sv-tipOval) { mix-blend-mode: plus-lighter; }
@supports not (mix-blend-mode: plus-lighter) {
  .sc-vec :is(.l2, .l3, .l4, .lw1, .lw2, .lw3, .sv-flare path, .sv-ghost-line2, .sv-ref, .sv-atmos, .sv-pulses path, .sv-particles circle, .sv-tipOval) { mix-blend-mode: screen; }
}
.sc-vec .sv-headGlow { mix-blend-mode: screen; filter: blur(30px); }
.sc-vec .sv-particles circle { fill: #fff; filter: blur(2.2px) drop-shadow(0 0 6px var(--glow-a)); }

@media (max-width: 360px) { .ins-pain .ins-pain__source { white-space: normal; } }

/* ===== 06/10 Score hero line = the team's reference as-is
   (claude.ai/artifact/3QqzPJdUC8tU5ebVgcJXiK; js/score-line.js). One SVG, the
   reference's own layers and values. Scoped to .sc-line--ref so the older
   .sc-line rules above (layers, dither filters) no longer shape it. The readout
   (.sc-line__right / __above / __score …) is untouched. */
.sc-line--ref .sl-atmos { opacity: .85; transform: translate(calc(var(--px,0)*14px), calc(var(--py,0)*10px)); }
.sc-line--ref .sl-atmosE { filter: blur(72px); }
.sc-line--ref .sl-ghost { transform: translate(calc(var(--px,0)*9px), calc(var(--py,0)*7px)); }
/* 14/10 (lighter): the two ghost lines (22px/blur 64 at .28 + 9px/blur 30 at .2)
   became one, tuned to the same spread of light */
.sc-line--ref .ghost-line { fill: none; stroke: url(#sl-g); stroke-width: 17; filter: blur(46px); opacity: .46; }
.sc-line--ref .sl-stack { transform: translate(calc(var(--px,0)*-4px), calc(var(--py,0)*-3px)); }
.sc-line--ref .ref { fill: none; stroke: url(#sl-g); stroke-width: 3; stroke-linecap: round; filter: blur(13px); opacity: .28; }
.sc-line--ref .ref2 { fill: none; stroke: url(#sl-g); stroke-width: 9; stroke-linecap: round; filter: blur(34px); opacity: .14; }
.sc-line--ref .track { fill: none; stroke: #454B49; stroke-width: 1.6; stroke-linecap: round; opacity: .85; }
.sc-line--ref .track-glow { fill: none; stroke: #454B49; stroke-width: 4; stroke-linecap: round; filter: blur(7px); opacity: .28; }
.sc-line--ref .tick { stroke: #3C4341; stroke-width: 1.2; stroke-linecap: round; }
.sc-line--ref .thr { stroke: #5A6360; stroke-width: 1.6; stroke-linecap: round; transition: stroke .45s ease, filter .45s ease; }
.sc-line--ref .thr.on { stroke: #DFF6EA; filter: drop-shadow(0 0 5px rgba(223,246,234,.75)); }
.sc-line--ref .ln { fill: none; stroke: url(#sl-g); stroke-linecap: round; }
/* 14/10 (lighter): l5 (14px/blur 54 at .42) + l4 (8px/blur 24 at .7) became one */
.sc-line--ref .l4 { stroke-width: 11; filter: blur(34px); opacity: .88; }
.sc-line--ref .l3 { stroke-width: 4.4; filter: blur(10px); opacity: .92; }
.sc-line--ref .l2 { stroke-width: 2.8; filter: blur(3.4px); }
.sc-line--ref .l1 { stroke-width: 1.5; }
.sc-line--ref .lw3 { stroke: #fff; stroke-width: 7.5; filter: blur(11px); opacity: .34; mix-blend-mode: screen; }
/* 14/10 (lighter): lw2 (3.6px/blur 4.5 at .52) is gone; lw1 and lw3 take its place */
.sc-line--ref .lw1 { stroke: #fff; stroke-width: 1.6; filter: blur(2.2px); opacity: .96; mix-blend-mode: screen; }
.sc-line--ref .sl-pulses path { fill: #fff; mix-blend-mode: screen; }
.sc-line--ref .pz-glow { filter: blur(9px); }
.sc-line--ref .pz-core { filter: blur(2px); }
.sc-line--ref .sl-flare { --p: 1; --flash: 0; }
.sc-line--ref .sl-flare path { stroke: none; mix-blend-mode: screen; }
/* 14/10 (lighter): halo (blur 92, invisible) and wash (blur 46) gone; aura and
   wash2 carry their light */
.sc-line--ref .f-aura { fill: url(#sl-g); filter: blur(50px); opacity: calc(.8 + .2*var(--p)); }
.sc-line--ref .f-bloom { fill: url(#sl-g); filter: blur(26px); opacity: calc(.7 + .3*var(--p)); }
.sc-line--ref .f-mid { fill: url(#sl-g); filter: blur(11px); opacity: calc(.84 + .16*var(--p)); }
.sc-line--ref .f-core { fill: url(#sl-g); filter: blur(3px); opacity: 1; }
.sc-line--ref .f-wash2 { fill: #fff; filter: blur(30px); opacity: calc(.9 + .1*var(--p)); }
.sc-line--ref .f-hot { fill: #fff; filter: blur(12px); opacity: calc(.8 + .2*var(--p)); }   /* kept (14/10): it is the hot white tip, and blur 12 is cheap */
.sc-line--ref .f-spark { fill: #fff; filter: blur(6px); opacity: calc(.9 + .1*var(--p)); }
.sc-line--ref .sl-headGlow { mix-blend-mode: screen; filter: blur(30px); }
.sc-line--ref .sl-particles { filter: blur(2.2px) drop-shadow(0 0 6px var(--glow-a)); }
.sc-line--ref .sl-particles circle { fill: #fff; mix-blend-mode: screen; }

/* ===== BFM cards: ícone com scanline + CRT revelado pelo cursor (js/bfm-icon-crt.js, 06/10) =====
   O canvas fica exatamente sobre o <img>, com uma margem (PAD no JS) para o
   bloom e a aberração cromática não serem cortados. Ele só aparece enquanto
   há alguma região revelada (entra e sai com um fade curto, sem salto);
   fora disso o <img> original é o que se vê. */
.bfm-card__icon { position: relative; }
.bfm-card__icon .crt-icon {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity .16s linear, visibility 0s linear .16s;
}
.bfm-card__icon.is-crt .crt-icon { opacity: 1; visibility: visible; transition: opacity .16s linear, visibility 0s; }
.bfm-card__icon.is-crt-solid img { visibility: hidden; }
/* 13/10: the same reveal on the hero's software screen (js/bfm-hero-crt.js):
   the canvas sits exactly over the <img> (same rounded corners) and only
   shows while something is revealed */
.bfm-hero__visual .crt-screen {
  position: absolute; z-index: 1;
  pointer-events: none;
  border-radius: 1.0818% / 1.7481%;
  opacity: 0; visibility: hidden;
  transition: opacity .16s linear, visibility 0s linear .16s;
}
.bfm-hero__visual.is-crt .crt-screen { opacity: 1; visibility: visible; transition: opacity .16s linear, visibility 0s; }
.bfm-hero__visual.is-crt-solid .bfm-hero__screen { visibility: hidden; }

/* ===== Política de Privacidade (politica-privacidade.html, 07/10) =====
   Long legal text: one readable column (72ch), site type scale, normal scroll
   (no full-screen mode on this page). */
.legal-wrap { box-sizing: content-box; max-width: 760px; margin: 0 auto; padding: 0 24px; }
.legal-hero { padding: calc(var(--header-h) + 72px) 0 40px; }
.legal-title { margin: 0; font-size: 56px; font-weight: 700; line-height: 1.15; letter-spacing: 1.2px; }
.legal-updated { margin: 18px 0 0; font-size: 14px; color: #9aa59f; }
.legal-body { padding-bottom: 120px; font-size: 16px; line-height: 1.7; color: #e8e8e8; }
.legal-body p { margin: 0 0 18px; text-wrap: pretty; }
.legal-body h2 {
  margin: 56px 0 18px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .02em;
  color: #fff;
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.legal-body ul, .legal-body ol { margin: 0 0 18px; padding-left: 22px; }
.legal-body li { margin: 0 0 10px; text-wrap: pretty; }
.legal-body li::marker { color: #50ea9a; }
.legal-body strong { color: #fff; font-weight: 700; }
.legal-body a { color: #50ea9a; text-decoration: underline; text-underline-offset: 3px; }
.legal-body a:hover { color: #8df3bb; }
/* the policy is a page people read and copy from: allow text selection here */
.legal, .legal * { -webkit-user-select: text; user-select: text; }
@media (max-width: 860px) {
  .legal-title { font-size: 34px; }
  .legal-hero { padding-top: calc(var(--header-h) + 40px); }
}

/* ===== Experimente a Celero (experimente.html + js/experimente.js, 07/10) =====
   Interactive product tour in three steps (after slopepay.ai/guide): one text
   column, a sticky step index under the header, dark cards like the rest of the
   site, green for what the Celero adds. Normal scroll, no full-screen mode. */
.exp-wrap { box-sizing: content-box; max-width: 960px; margin: 0 auto; padding: 0 24px; }
/* 07/10: identity aligned with the product pages: full-screen hero on the BFM
   text column with scroll arrows, centred 40px section titles under a numbered
   circle like the Insights "Como funciona" steps, glass cards (js/glass-cards.js),
   square green-bordered chips like .ins-btn, and the neon green line. */
.exp-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: var(--header-h) 0 40px;
  box-sizing: border-box;
  overflow: hidden;
  /* 09/10: the screen is opaque (page black). In the full-screen stack the
     screen on its way out is still seen through the one sliding in; here only
     the fog's drawing area was opaque, so on the way back its black rectangle
     cut a hard-edged hole (bottom-left corner) into the fading step behind.
     Black on black, the rectangle is gone and the step fades under the whole
     screen like everywhere else. */
  background: var(--bg);
}
.exp-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.exp-hero__bg::before {
  content: '';
  position: absolute;
  right: 6vw;
  top: 50%;
  width: 520px;
  height: 420px;
  margin-top: -210px;
  border-radius: 50%;
  background: #62ECA4;
  filter: blur(140px);
  opacity: .22;
}
.exp-hero__content {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  padding: 0 24px 0 max(24px, calc(26.5vw - 293px));
}
.exp-hero__title { margin: 0; font-size: 56px; font-weight: 700; line-height: 1.3; letter-spacing: 1.2px; }
.exp-hero__lead { max-width: 480px; margin: 40px 0 0; font-size: 16px; line-height: 1.6; color: #e8e8e8; }
.exp-hero__content .glow-button { display: inline-block; margin-top: 52px; }
.exp-hero__note { margin: 24px 0 0; font-size: 14px; color: #9aa59f; }
.exp-hero__note a { color: #50ea9a; text-decoration: underline; text-underline-offset: 3px; }
.exp-hero__title, .exp-hero__lead, .exp-hero__content .glow-button, .exp-hero__note { animation: fadeUp .8s var(--ease) both; }
.exp-hero__lead { animation-delay: .1s; }
.exp-hero__content .glow-button { animation-delay: .2s; }
.exp-hero__note { animation-delay: .3s; }

/* 08/10: névoa interativa ao lado do título (js/hero-fog.js, portada do
   "Financial Fog"): campos de transação correndo sob uma névoa verde; o cursor
   abre a névoa e acende os dados. Fica à direita, sob o texto (z 0); os
   eventos de ponteiro vêm da seção. Oculta em telas estreitas. */
.exp-fog {
  --rw: 1px; --beam: 0;
  --x1: 50%; --y1: 50%; --r1: 1px;
  --x2: 50%; --y2: 50%; --r2: 1px;
  --x3: 50%; --y3: 50%; --r3: 1px;
  --x4: 50%; --y4: 50%; --r4: 1px;
  position: absolute;
  z-index: 0;
  /* mesmo fundo do original (preto): o grão em overlay mistura sobre ele e
     fica invisível, sem desenhar o retângulo da área */
  background: #000;
  /* 08/10: maior e mais perto do texto: começa logo depois da coluna de texto
     (mesmo recuo da coluna + 400px) e vai até perto da borda direita; a
     margem própria da silhueta (como no original) mantém a névoa longe das bordas */
  top: calc(var(--header-h) + 24px);   /* 08/10: mais distante do menu */
  bottom: 16px;
  left: calc(max(24px, calc(26.5vw - 293px)) + 400px);
  right: 12px;
}
.exp-fog__painel {
  /* 09/10: the drawing area runs the full height of the screen (from the very
     top, behind the menu bar, to the bottom edge), so the fog is no longer cut
     by a black band under the menu or above the bottom edge. The fog itself
     (its silhouette, the data rows) keeps the same place and size: it is still
     laid out on .exp-fog (js/hero-fog.js), this is only room to draw. */
  /* 19/10 (her comment: the fog looked cut on its left edge): the drawing area
     now also runs 320px further left (under the text column, which sits above
     it) and to the right edge of the screen, with no side fade any more, so no
     edge of the fog is ever cut; the fog itself keeps its place and size. */
  position: absolute; left: -320px; right: -12px;
  top: calc(-1 * (var(--header-h) + 24px)); bottom: -16px;
  overflow: hidden; pointer-events: none;
  background: #000;   /* fundo do grupo: o grão em overlay some sobre o preto, como no original */
}
.exp-fog__mancha { position: absolute; inset: 0; }
.exp-fog__grade {
  position: absolute; inset: 0; overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 11px; letter-spacing: .5px; user-select: none;
}
.exp-fog__grade--base { z-index: 1; color: rgba(255,255,255,.14); }
.exp-fog__grade--acesa {
  z-index: 2; color: #fff;
  text-shadow: 0 0 1px rgba(255,255,255,.75), 0 0 4px rgba(158,246,205,.30);
  opacity: var(--beam);
  -webkit-mask-image:
    radial-gradient(circle var(--r1) at var(--x1) var(--y1), #000 0%, rgba(0,0,0,.74) 44%, rgba(0,0,0,.26) 74%, rgba(0,0,0,0) 100%),
    radial-gradient(circle var(--r2) at var(--x2) var(--y2), #000 0%, rgba(0,0,0,.74) 44%, rgba(0,0,0,.26) 74%, rgba(0,0,0,0) 100%),
    radial-gradient(circle var(--r3) at var(--x3) var(--y3), #000 0%, rgba(0,0,0,.74) 44%, rgba(0,0,0,.26) 74%, rgba(0,0,0,0) 100%),
    radial-gradient(circle var(--r4) at var(--x4) var(--y4), #000 0%, rgba(0,0,0,.74) 44%, rgba(0,0,0,.26) 74%, rgba(0,0,0,0) 100%);
  mask-image:
    radial-gradient(circle var(--r1) at var(--x1) var(--y1), #000 0%, rgba(0,0,0,.74) 44%, rgba(0,0,0,.26) 74%, rgba(0,0,0,0) 100%),
    radial-gradient(circle var(--r2) at var(--x2) var(--y2), #000 0%, rgba(0,0,0,.74) 44%, rgba(0,0,0,.26) 74%, rgba(0,0,0,0) 100%),
    radial-gradient(circle var(--r3) at var(--x3) var(--y3), #000 0%, rgba(0,0,0,.74) 44%, rgba(0,0,0,.26) 74%, rgba(0,0,0,0) 100%),
    radial-gradient(circle var(--r4) at var(--x4) var(--y4), #000 0%, rgba(0,0,0,.74) 44%, rgba(0,0,0,.26) 74%, rgba(0,0,0,0) 100%);
}
.exp-fog__fila { position: absolute; height: 21px; line-height: 21px; }
.exp-fog__fila > i {
  position: absolute; left: 0; top: 0; font-style: normal; white-space: nowrap;
  animation: expFogFluxo var(--dur) linear infinite;
  animation-delay: var(--atr);
}
/* 28/10 (performance): the rows rest while the hero is not the current screen (js/hero-fog.js) */
.exp-fog.is-off .exp-fog__fila > i, .exp-fog.is-off .exp-fog__grao { animation-play-state: paused; }
@keyframes expFogFluxo {
  0%   { transform: translateX(0);         opacity: 0; }
  9%   {                                    opacity: var(--op); }
  82%  {                                    opacity: var(--op); }
  100% { transform: translateX(var(--dx)); opacity: 0; }
}
.exp-fog__fumaca { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; opacity: .92; filter: blur(5px) saturate(1.18); }
.exp-fog__grao {
  position: absolute; inset: -25%; z-index: 4; opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='.55'/></svg>");
  animation: expFogGrao 34s linear infinite alternate; will-change: transform;
}
@keyframes expFogGrao { from { transform: translate3d(-3%,-2%,0); } to { transform: translate3d(3%,2%,0); } }
/* fidelidade ao original: a névoa fica sobre o preto puro da página, sem
   máscara nem brilho de fundo (o brilho verde clareava o grão e criava um
   retângulo); as bordas são só as da própria silhueta */
.exp-hero__bg::before { display: none; }

.exp-step { padding: 120px 0 24px; scroll-margin-top: calc(var(--header-h) + 60px); text-align: center; }
/* 08/10: full-screen mode like the product pages (js/fullpage.js, stack transition
   + side indicator): one step per screen, content centred; a step taller than
   the screen (step 2 after the analysis) scrolls inside its own screen first */
html.fp-on .exp-step {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--header-h) + 32px) 0 56px;
  box-sizing: border-box;
}
html.fp-on .exp-step > .exp-wrap { width: calc(100% - 48px); }
.exp-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 83px;
  height: 83px;
  margin: 0 auto 36px;
  padding-bottom: 2px;
  box-sizing: border-box;
  border-radius: 50%;
  background: #090909;
  border: 2px solid #8ef5b8;
  box-shadow: 0 0 2px #2fe67a, 0 0 8px #2fe67a, 0 0 22px rgba(47,230,122,.45), inset 0 0 12px rgba(47,230,122,.25);
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
}
/* 09/10: the neon line of the Insights "Como funciona" steps, brought over as
   it is (.ins-steps__line / __pulse / __num in this file; js/exp-line.js is
   the same script as js/insights.js, one per step): a line across the whole
   screen behind each step's number, drawn left to right at the opening with
   a bright tip, then a pulse of light running along it in a loop and flaring
   the circle as it passes, while the neon breathes (--glow). The circle is
   opaque and sits above the line. Hidden on small screens, like the Insights one. */
.exp-step { position: relative; }
.exp-line { --cf-green: #2fe67a; --cf-core: #8ef5b8; position: absolute; left: 0; right: 0; top: 0; height: 2px; pointer-events: none; }
.exp-line__line,
.exp-line__pulse-track { position: absolute; left: 0; right: 0; top: 0; height: 2px; }
.exp-line__line {
  border-radius: 2px;
  background: var(--cf-core);
  box-shadow: 0 0 2px var(--cf-green), 0 0 6px var(--cf-green), 0 0 12px rgba(47, 230, 122, .55), 0 0 26px rgba(47, 230, 122, .28);
  opacity: var(--glow, .9);
}
.exp-line__pulse {
  position: absolute;
  top: 0;
  left: 0;
  width: 320px;
  height: 3px;
  margin-top: -.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(57, 255, 136, 0) 0%, rgba(57, 255, 136, .55) 40%, rgba(190, 255, 215, .95) 82%, #fff 100%);
  filter: drop-shadow(0 0 3px #7dffb5) drop-shadow(0 0 8px #39ff88) drop-shadow(0 0 18px rgba(57, 255, 136, .7));
  opacity: 0;
  will-change: transform, opacity;
}
.exp-line__pulse::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 50%;
  width: 10px;
  height: 6px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: #fff;
  box-shadow: 0 0 4px #fff, 0 0 10px #7dffb5, 0 0 22px #39ff88, 0 0 44px rgba(57, 255, 136, .7), 0 0 80px rgba(57, 255, 136, .35);
}
.exp-line.is-intro .exp-line__line { clip-path: inset(-60px 100% -60px 0); }
/* the number: opaque disc above the line; its neon ring breathes with the line
   (::before) and flares white as the pulse passes (::after), as in the Insights */
.exp-num { position: relative; z-index: 1; border-color: transparent; box-shadow: none; }
.exp-num::before,
.exp-num::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; pointer-events: none; }
.exp-num::before {
  border: 2px solid #8ef5b8;
  box-shadow: 0 0 2px #2fe67a, 0 0 6px #2fe67a, 0 0 12px rgba(47, 230, 122, .55), 0 0 26px rgba(47, 230, 122, .28),
    inset 0 0 3px #2fe67a, inset 0 0 9px rgba(47, 230, 122, .45), inset 0 0 18px rgba(47, 230, 122, .14);
  opacity: var(--glow, .9);
}
.exp-num::after {
  border: 2px solid #fff;
  box-shadow: 0 0 4px #fff, 0 0 10px #7dffb5, 0 0 22px #39ff88, 0 0 44px rgba(57, 255, 136, .6), inset 0 0 6px #7dffb5, inset 0 0 18px rgba(57, 255, 136, .5);
  opacity: var(--flare, 0);
}
@media (max-width: 860px) { .exp-line { display: none; } }
.exp-title { margin: 0 auto; font-size: 40px; font-weight: 700; line-height: 1.25; text-align: center; }
.exp-sub { margin: 22px auto 0; max-width: 680px; font-size: 16px; line-height: 1.6; color: #e8e8e8; text-align: center; }
.exp-sub strong { color: #fff; }
.exp-card { margin-top: 56px; padding: 40px; border-radius: 3px; text-align: left; }
.exp-card:not(.glass) { background: #090909; border: 1px solid rgba(255,255,255,.08); }
.exp-label { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: #9aa59f; }
.exp-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.exp-chip { height: 32px; padding: 0 14px; border-radius: 1px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.4); color: #e8e8e8; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease); }
.exp-chip:hover { border-color: #31AB6B; transform: translateY(-2px); }
.exp-chip.is-on { border-color: var(--neon, #50ea9a); color: #fff; background: rgba(80,234,154,.12); }
.exp-raw { display: flex; gap: 16px; margin-top: 24px; }
.exp-raw__field { flex: 1; padding: 14px 16px; border-radius: 3px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.08); }
.exp-raw__field--amt { flex: 0 0 180px; }
.exp-raw__k { display: block; margin-bottom: 6px; font-size: 12px; color: #9aa59f; }
.exp-raw__v { font-family: inherit; font-size: 15px; color: #fff; letter-spacing: .02em; }
.exp-raw__v.is-in { color: #50ea9a; }
.exp-raw__v.is-out { color: #ff8a7a; }
.exp-raw__v span { transition: color .2s, text-shadow .2s; }
.exp-raw__v span.is-read { color: #50ea9a; text-shadow: 0 0 12px rgba(80,234,154,.6); }
.exp-btn { display: inline-block; margin-top: 24px; }
.exp-btn[disabled] { opacity: .5; pointer-events: none; }
.exp-result.is-on { margin-top: 28px; }
.exp-status { margin: 0; font-size: 14px; color: #50ea9a; }
.exp-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; margin: 0; }
.exp-field { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); opacity: 0; transform: translateY(8px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.exp-field.is-in { opacity: 1; transform: none; }
.exp-field dt { font-size: 14px; color: #9aa59f; }
.exp-field dd { margin: 0; font-size: 15px; font-weight: 700; color: #fff; text-align: right; }

.exp-table__head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 12px; font-size: 13px; color: #9aa59f; }
.exp-progress { color: #50ea9a; }
.exp-table { max-height: 420px; overflow: auto; border-radius: 3px; border: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.45); }
.exp-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.exp-table th { position: sticky; top: 0; z-index: 1; padding: 10px 12px; background: #0d0f0e; font-size: 12px; letter-spacing: .3px; text-transform: uppercase; text-align: left; font-weight: 700; color: #9aa59f; }
.exp-table td { padding: 9px 12px; border-top: 1px solid rgba(255,255,255,.05); color: #e8e8e8; white-space: nowrap; }
.exp-table td code { font-family: inherit; color: #cfcfcf; }
.exp-table .num { text-align: right; }
.exp-table td.num.is-in { color: #50ea9a; }
.exp-table td.num.is-out { color: #ff8a7a; }
.exp-pill { display: inline-block; padding: 3px 9px; border-radius: 999px; background: rgba(80,234,154,.12); color: #50ea9a; font-size: 12px; opacity: 0; transform: scale(.8); transition: opacity .3s, transform .3s var(--ease); }
.exp-table tr.is-done .exp-pill { opacity: 1; transform: none; }
.exp-table tr.is-done td { background: rgba(80,234,154,.03); }

.exp-insights { margin-top: 28px; opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.exp-insights.is-on { opacity: 1; transform: none; }
.exp-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.exp-kpi { padding: 18px; border-radius: 3px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.08); }
.exp-kpi strong { display: block; font-size: 26px; font-weight: 700; color: #50ea9a; }
.exp-kpi span { display: block; margin-top: 4px; font-size: 14px; color: #fff; }
.exp-kpi small { display: block; margin-top: 4px; font-size: 12px; color: #9aa59f; }
.exp-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.exp-panel { margin-top: 12px; padding: 20px; border-radius: 3px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.08); }
.exp-panels .exp-panel { margin-top: 0; }
.exp-panel h3 { margin: 0 0 16px; font-size: 15px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
.exp-chart { display: flex; align-items: flex-end; gap: 14px; height: 170px; }
.exp-bar { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 4px; padding-bottom: 20px; box-sizing: border-box; }
.exp-bar span { width: 12px; height: calc(var(--h) * .85); border-radius: 2px 2px 0 0; transform: scaleY(0); transform-origin: bottom; transition: transform 1s var(--ease); }
.exp-insights.is-on .exp-bar span { transform: none; }
.exp-bar .in { background: #50ea9a; }
.exp-bar .out { background: #5a6360; }
.exp-bar em { position: absolute; bottom: 0; font-style: normal; font-size: 12px; color: #9aa59f; }
.exp-legend { display: flex; gap: 16px; margin-top: 8px; font-size: 12px; color: #9aa59f; }
.exp-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }
.exp-legend .in::before { background: #50ea9a; }
.exp-legend .out::before { background: #5a6360; }
.exp-cats, .exp-attrs ul { margin: 0; padding: 0; list-style: none; }
.exp-cats li, .exp-attrs li { display: grid; grid-template-columns: 1fr 120px 44px; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; color: #e8e8e8; }
.exp-cats b, .exp-attrs b { height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); position: relative; overflow: hidden; }
.exp-cats b::after, .exp-attrs b::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: var(--w); border-radius: 3px; background: #50ea9a; transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) .2s; }
.exp-insights.is-on .exp-cats b::after, .exp-score__body.is-on .exp-attrs b::after { transform: none; }
.exp-cats em, .exp-attrs em { font-style: normal; text-align: right; color: #9aa59f; }
.exp-signals { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.exp-signals li { position: relative; padding: 12px 14px 12px 40px; border-radius: 3px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06); font-size: 14px; line-height: 1.5; color: #e8e8e8; }
.exp-signals li::before { position: absolute; left: 14px; top: 12px; font-weight: 700; color: #50ea9a; }
.exp-signals li.is-opp::before { content: "\25C6"; }
.exp-signals li.is-up::before { content: "\2191"; }
.exp-signals li.is-ok::before { content: "\2713"; }

.exp-locked { margin: 0; padding: 40px 0; text-align: center; color: #9aa59f; }
.exp-score__body { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: center; opacity: 0; transition: opacity .6s var(--ease); }
.exp-score__body.is-on { opacity: 1; }
.exp-gauge { position: relative; }
.exp-gauge svg { display: block; width: 100%; height: auto; }
.exp-gauge__track, .exp-gauge__fill { fill: none; stroke-width: 14; stroke-linecap: round; }
.exp-gauge__track { stroke: rgba(255,255,255,.08); }
.exp-gauge__fill { stroke: url(#expGaugeG); }
.exp-gauge__read { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; }
.exp-gauge__num { display: block; font-size: 52px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.exp-gauge__of { display: block; margin-top: 2px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #9aa59f; }
.exp-gauge__band { display: block; margin-top: 6px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.exp-gauge__band.is-high { color: #ff6b5b; }
.exp-gauge__band.is-mid { color: #ffd21f; }
.exp-gauge__band.is-low { color: #50ea9a; }
.exp-attrs h3 { margin: 0 0 12px; font-size: 15px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
.exp-attrs li.is-neg b::after { background: #ff8a7a; }
.exp-attrs li.is-pos em { color: #50ea9a; }
.exp-attrs li.is-neg em { color: #ff8a7a; }
.exp-final { padding: 140px 0 160px; text-align: center; overflow: hidden; }
.exp-final .exp-sub { margin-bottom: 52px; }
/* 28/10 (her request): behind the last screen's text, the fog's rows of transaction
   fields (js/exp-dados.js), all around the text and never under it. Same type, colours,
   row pitch, drift and light as the fog's own rows (.exp-fog__grade, .exp-fog__fila) */
.exp-final .exp-wrap { position: relative; z-index: 1; }
.exp-dados {
  --x1: 50%; --y1: 50%; --beam: 0;
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  /* the page's own black, stated: the hot core (colour-dodge) needs an opaque backdrop to
     blend with, or it would show as a plain disc where there is nothing behind it */
  background: #000;
}
.exp-dados__grade {
  position: absolute; inset: 0; overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 11px; letter-spacing: .5px; user-select: none;
}
.exp-dados__grade--base { z-index: 1; color: rgba(255,255,255,.14); }
.exp-dados__grade--acesa {
  z-index: 2; color: #fff;
  text-shadow: 0 0 1px rgba(255,255,255,.75), 0 0 4px rgba(158,246,205,.30);
  opacity: var(--beam);
  -webkit-mask-image: radial-gradient(circle 469px at var(--x1) var(--y1), #000 0%, rgba(0,0,0,.9) 8%, rgba(0,0,0,.7) 24%, rgba(0,0,0,.46) 44%, rgba(0,0,0,.26) 64%, rgba(0,0,0,.1) 84%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(circle 469px at var(--x1) var(--y1), #000 0%, rgba(0,0,0,.9) 8%, rgba(0,0,0,.7) 24%, rgba(0,0,0,.46) 44%, rgba(0,0,0,.26) 64%, rgba(0,0,0,.1) 84%, rgba(0,0,0,0) 100%);
}
/* 28/10 (her request): the lit fields take the look of the BFM icons' old cursor reveal
   (js/bfm-icon-crt.js, 06/10): phosphor green with a hot core, red/blue fringes (chromatic
   aberration), phosphor bloom, scanlines every 3px with the faint lit glass between them,
   a tracking band rolling down, a flicker and a line tremor, and a grainy, broken edge on
   the lit area (the mask's outer ring is cut by static). Only the lit layer changes: the
   grey rows and the light's reach stay as they were. */
.exp-dados__grade--acesa {
  /* 28/10 (her requests): greener and brighter text, darker glass. The whole layer goes
     through brightness(1.4) (flicker around it): at 11px most pixels of a glyph are only
     partly covered, so this is what makes the thin strokes bright (the few fully covered
     pixels go to a hot, whiter core, as on the icons); a 1px sharp shadow thickens the
     strokes, the scanlines over the text are lighter and the bloom stronger. The glass
     between the lines and the tracking band are 80% fainter than before, so the
     background of the lit area stays dark behind the bright characters. 28/10: the light's
     light has no plateau any more (her request): it is full only at the cursor and fades
     from there all the way to its 560px radius, in a smooth bell, so the filter melts into
     the background instead of ending in a visible circle. */
  /* 28/10 (her comment: the lit characters looked blurred): the glyphs themselves stay
     sharp — the line tremor moves by whole pixels (a fractional move resamples the text),
     the colour fringes sit exactly 1px aside and lighter, no tight glow fattening the
     strokes; the bloom is a wider, softer halo that the glyph edge stands out from */
  color: #4aff9e;
  text-shadow:
    1px 0 0 rgba(255, 70, 70, .3), -1px 0 0 rgba(80, 140, 255, .3),
    0 0 7px rgba(20, 210, 110, .5), 0 0 18px rgba(20, 210, 110, .4);
  filter: brightness(1.4);
  /* 28/10 (her comment: the lit area seemed to flicker at a low frame rate): the stepped
     flicker, the 1px line tremor and the static that jumped every 60 ms all read as
     dropped frames, so they are gone; the brightness now only breathes, smoothly and
     slightly (1.40 to 1.34, every 0.4 s), the grain on the edge stands still and the
     tracking band is the only thing moving on the glass */
  animation: expCrtFlicker .4s ease-in-out infinite alternate;
}
.exp-dados__grade--acesa::before, .exp-dados__grade--acesa::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
/* scanlines (3 css px, as on the icons) and the faint green glass between them */
.exp-dados__grade--acesa::after {
  z-index: 1;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .22) 0 1px, rgba(20, 210, 110, .011) 1px 3px);
}
/* the tracking band going down (a strip 22% tall moved with a transform: no repaint) */
.exp-dados__grade--acesa::before {
  z-index: 2; mix-blend-mode: screen; inset: auto 0; top: 0; height: 22%;
  background: linear-gradient(to bottom, rgba(50, 245, 140, 0) 0%, rgba(50, 245, 140, .016) 42%, rgba(110, 255, 180, .029) 50%, rgba(50, 245, 140, .016) 58%, rgba(50, 245, 140, 0) 100%);
  animation: expCrtBand 3.1s linear infinite;
}
@keyframes expCrtBand { from { transform: translateY(-100%); } to { transform: translateY(455%); } }
@keyframes expCrtFlicker { from { filter: brightness(1.4); } to { filter: brightness(1.34); } }
/* the grainy edge: the light's core stays solid, its outer ring is cut by static */
@supports (mask-composite: intersect) {
  .exp-dados__grade--acesa {
    mask-image:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='1.6' intercept='-.25'/></feComponentTransfer></filter><rect width='220' height='220' filter='url(%23n)'/></svg>"),
      radial-gradient(circle 519px at var(--x1) var(--y1), #000 0%, #000 20%, rgba(0,0,0,0) 100%),
      radial-gradient(circle 469px at var(--x1) var(--y1), #000 0%, rgba(0,0,0,.9) 8%, rgba(0,0,0,.7) 24%, rgba(0,0,0,.46) 44%, rgba(0,0,0,.26) 64%, rgba(0,0,0,.1) 84%, rgba(0,0,0,0) 100%);
    mask-composite: intersect, add;
    mask-size: 220px 220px, auto, auto;
    mask-repeat: repeat, no-repeat, no-repeat;
  }
}
/* 28/10 (her request): the hot core of the light. A 480px disc that rides with the cursor,
   blended in colour-dodge over the lit rows: black stays black, so the glass is untouched,
   while the characters under it are pushed towards white (her follow-up: a stronger light
   on that spot rather than a stronger green: the dodge colour is near-neutral, a touch warm
   so the push does not turn cyan), fading gently over the whole disc so the white core melts
   into the green of the rest of the light. Moved with a transform: no repaint. */
.exp-dados__core {
  position: absolute; left: -240px; top: -240px; width: 480px; height: 480px; z-index: 3;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle closest-side, rgba(200, 190, 160, 1) 0%, rgba(185, 175, 145, .85) 18%, rgba(165, 155, 125, .5) 48%, rgba(165, 155, 125, .2) 76%, rgba(165, 155, 125, 0) 100%);
  mix-blend-mode: color-dodge;
  opacity: var(--beam);
  transform: translate(var(--x1), var(--y1));
  will-change: transform;
}
/* 28/10 (her comment: on her monitor some values passed behind the text): each row is
   exactly its segment and clips at its two ends, so nothing can show past them whatever
   the font; the clip is open above and below (24px) so the lit values' glow is not cut.
   Layout containment: a value changing (the scramble) is laid out inside its row only.
   28/10 (performance): the values drift through the Web Animations API (js/exp-dados.js),
   not through the fog's CSS animation (its keyframes read variables, which keeps them on
   the main thread); with reduced motion the script sets each value's resting place itself */
.exp-dados .exp-fog__fila { clip-path: inset(-24px 0); contain: layout; }
.exp-dados .exp-fog__fila > i { animation: none; }
/* the glass rests while this screen is not the current one (it is hidden then anyway) */
.exp-dados.is-off .exp-dados__grade--acesa, .exp-dados.is-off .exp-dados__grade--acesa::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  /* the lit area keeps the CRT look but nothing in it moves */
  .exp-dados__grade--acesa, .exp-dados__grade--acesa::before { animation: none; }
}

@media (max-width: 860px) {
  .exp-hero__title { font-size: 34px; }
  .exp-title { font-size: 28px; }
  .exp-step { padding-top: 80px; }
  .exp-num { width: 64px; height: 64px; font-size: 40px; margin-bottom: 24px; }
  .exp-hero__bg::before { right: -120px; width: 360px; height: 300px; margin-top: -150px; }
  .exp-fog { display: none; }
  .exp-hero__bg::before { display: block; }
  .exp-card { padding: 20px; }
  .exp-raw { flex-direction: column; }
  .exp-raw__field--amt { flex: none; }
  .exp-fields, .exp-panels, .exp-kpis { grid-template-columns: 1fr; }
  .exp-score__body { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .exp-field, .exp-pill, .exp-insights, .exp-score__body, .exp-bar span, .exp-cats b::after, .exp-attrs b::after { transition: none; }
  .exp-hero__title, .exp-hero__lead, .exp-hero__content .glow-button, .exp-hero__note { animation: none; }
  .exp-fog__grao { animation: none; }
  .exp-fog__fila > i { animation-play-state: paused; }
  .exp-fog__fumaca {
    -webkit-mask-image: radial-gradient(circle var(--rw) at var(--x1) var(--y1), transparent 0%, rgba(0,0,0,.40) 42%, #000 84%);
    mask-image: radial-gradient(circle var(--rw) at var(--x1) var(--y1), transparent 0%, rgba(0,0,0,.40) 42%, #000 84%);
  }
}

/* 09/10: Experimente opening — the fog runs up behind the menu bar, so the bar's
   dark fade is dropped while this first screen is shown (the menu itself stays
   on top). Once you move on, the bar turns solid black as on every page. */
html.fp-on body:has(#main.exp) .site-header:not(.is-scrolled) { background: transparent; }

/* 09/10 (her comment): BFM opening — the title, lead and button sit 10% of the
   screen width further from the left edge, the title is a little smaller with
   more room before the lead, and the button sits higher above the neon line
   (the line gap lives in js/bfm-hero.js). */
@media (min-width: 861px) {
  .bfm-hero__content { left: 1vw; }                         /* 09/10 (4th comment): closer still to the side guide (was 3vw), not touching it */
  .bfm-hero h1 { font-size: 52px; margin-bottom: 40px; }    /* 09/10 (3rd comment): a little bigger (was 48.4px), closer to the lead (was 48px) */
  .bfm-hero .bfm-lead { max-width: 500px; font-size: 17px; } /* 09/10 (3rd comment): a little bigger (was 16px) */
}

/* ===== 09/10 Score hero line in layers (score.html .sc-line--split, js/score-line.js).
   Performance only: the one SVG became independent compositor layers. The
   atmosphere, ghost line and static line are painted once and only moved
   (parallax, breathing) as layers; the flare repaints only when its shape or
   its pulse step changes; each pulse is a small layer of its own; the sparks
   are the one layer painted every frame. The front layers screen onto the
   line like before (screen is associative, so the result is the same), and
   the whole thing is isolated like the single SVG was. */
.sc-line--split { isolation: isolate; }
.sc-line--split .sl-defs { position: absolute; width: 0; height: 0; }
.sc-line--split .sl-L {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  display: block; overflow: visible; pointer-events: none; will-change: transform;
}
.sc-line--split .sl-L--atmos { left: -620px; top: -470px; width: 1240px; height: 940px; transform-origin: 50% 50%; }
.sc-line--split .sl-atmosE { opacity: .85; }   /* 14/10: the layer's opacity moved to the ellipse (the head glow shares the layer) */
/* the parallax offsets are transforms set by js (no --px/--py variables: a
   custom-property change on the hero restyles every svg element below it,
   and an svg restyle repaints its layer) */
/* the white lines: screen with white equals normal compositing, and without
   the blend mode Chrome doesn't split them into layers of their own */
.sc-line--split .lw1, .sc-line--split .lw2, .sc-line--split .lw3 { mix-blend-mode: normal; }
.sc-line--split .sl-L--flare,
.sc-line--split .sl-L--pulse,
.sc-line--split .sl-L--parts { mix-blend-mode: screen; }
.sc-line--split .sl-L--pulse { left: -70px; top: -32px; width: 140px; height: 64px; transform-origin: 50% 50%; }
/* 14/10: the head glow sits in the atmosphere's layer, screened over the ellipse there */
.sc-line--split .sl-headGlow { mix-blend-mode: screen; }

/* ===== Institucional (13/10): layout do designer, Downloads/Frame 1 (1).svg (1440 px).
   Medidas tiradas do arquivo; a Imprensa, no fim da página, continua como era. */
.inst-hero { position: relative; height: 680px; text-align: center; overflow: visible; }
.inst-hero__bg { position: absolute; left: 0; top: 46px; width: 100%; height: 749px; object-fit: cover; pointer-events: none; z-index: 0; }
.inst-hero__content { position: relative; z-index: 1; padding-top: 286px; }
.inst-hero__title { font-size: 42px; font-weight: 700; line-height: 1.25; max-width: 600px; margin: 0 auto; }
.inst-hero__lead { font-size: 15px; line-height: 1.6; max-width: 540px; margin: 34px auto 0; color: #fff; text-wrap: pretty; }
.inst-hero .scroll-indicator { z-index: 1; }
.inst-sec { position: relative; z-index: 1; text-align: center; padding: 0 16px; }
.inst-sec .section-title { margin: 0 auto; }
.inst-lead { font-size: 15px; line-height: 1.6; max-width: 540px; margin: 24px auto 0; color: #fff; text-wrap: pretty; }   /* line breaks as in the layout (balance made two short lines) */
.inst-about { padding-top: 10px; }
/* mosaic: the photos at their exact place in the layout (166–1280 px), scaled with the width */
.inst-mosaic {
  position: relative; width: min(1114px, 100%); aspect-ratio: 1114 / 312; margin: 63px auto 0;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,.55), #000 20%, #000 79%, transparent);
          mask-image: linear-gradient(to right, rgba(0,0,0,.55), #000 20%, #000 79%, transparent);
}
.inst-mosaic img {
  position: absolute; object-fit: cover; border-radius: 3px;
  left: calc(var(--x) / 1114 * 100%); top: calc(var(--y) / 312 * 100%);
  width: calc(var(--w) / 1114 * 100%); height: calc(var(--h) / 312 * 100%);
}
.inst-dna { margin-top: 111px; overflow: hidden; }
/* 15/10: the animated helix (css/dna-threads.css) takes the stage once it is
   built (.is-dna); until then, and without WebGL / on narrow screens, the
   static image and values (.inst-dna__fallback) show as before */
.inst-dna__stage .dna-bg, .inst-dna__stage .dna-labels { display: none; }
.inst-dna__stage.is-dna .dna-bg { display: block; }
.inst-dna__stage.is-dna .dna-labels:not([hidden]) { display: block; }
.inst-dna__stage.is-dna .inst-dna__fallback { display: none; }
/* the helix and its values: a 1440 x 743 stage, centred, as in the layout */
.inst-dna__stage { position: relative; width: 1440px; height: 743px; left: 50%; margin: 74px 0 0 -720px; text-align: left; }
.inst-dna__img {
  position: absolute; left: 0; top: 0; width: 1430px; height: 743px; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 77%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 77%, transparent);
}
.inst-value { position: absolute; top: calc(var(--y) * 1px); height: 90px; font-size: 13px; line-height: 18px; }
.inst-value h3 { font-size: 13px; line-height: 18px; font-weight: 700; margin: 0; color: #fff; }
.inst-value p { margin: 0; color: #e8e8e8; }
.inst-value--l { right: calc(1440px - 424px); padding-right: 10px; border-right: 4px solid #62ECA4; text-align: right; }
.inst-value--r { left: 1003px; padding-left: 10px; border-left: 4px solid #62ECA4; }
/* connector line from the bar to the helix, ending in a small square */
.inst-value::after { content: ''; position: absolute; top: 44px; width: calc(var(--line) * 1px); height: 1px; background: #62ECA4; }
.inst-value::before { content: ''; position: absolute; top: 39px; width: 10px; height: 10px; box-sizing: border-box; border: 1px solid #62ECA4; }
.inst-value--l::after { left: calc(100% + 4px); }
.inst-value--l::before { left: calc(100% + 4px + var(--line) * 1px); }
.inst-value--r::after { right: calc(100% + 4px); }
.inst-value--r::before { right: calc(100% + 4px + var(--line) * 1px); }
.inst-lead-sec { margin-top: 227px; padding-bottom: 120px; }
.inst-leaders { display: flex; justify-content: center; gap: 74px; margin-top: 58px; }
.inst-leader { width: 381px; border-radius: 6px; padding: 0 0 30px; display: flex; flex-direction: column; align-items: center; }
.inst-leader__photo { width: 100%; height: 236px; object-fit: cover; border: 1px solid #62ECA4; border-radius: 6px; display: block; }
.inst-leader h3 { margin: 26px 0 0; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: #fff; }
.inst-leader__role { margin: 2px 0 0; font-size: 14px; color: #d9d9d9; }
.inst-leader__bio { margin: 22px 30px 0; font-size: 14px; line-height: 1.6; color: #fff; }
.inst-leader__in { margin-top: 30px; color: #fff; display: inline-flex; }
@media (max-width: 860px) {
  .inst-hero { height: auto; padding-bottom: 120px; }
  .inst-hero__content { padding: 180px 16px 0; }
  .inst-hero__title { font-size: 30px; }
  .inst-dna__stage { width: 100%; left: 0; margin: 40px 0 0; height: auto; }
  .inst-dna__fallback { display: grid; gap: 24px; }
  .inst-dna__img { position: static; width: 100%; height: auto; }
  .inst-value, .inst-value--l, .inst-value--r { position: static; height: auto; border: 0; border-left: 4px solid #62ECA4; padding: 0 0 0 10px; text-align: left; }
  .inst-value::after, .inst-value::before { display: none; }
  .inst-leaders { flex-direction: column; align-items: center; gap: 32px; }
  .inst-leader { width: 100%; max-width: 381px; }
  .inst-lead-sec { margin-top: 96px; }
}

/* 16/10 (her comment): the Quem Somos text in 3 lines on desktop, same text and size, wider column (was 540px) */
.inst-about .inst-lead { max-width: 760px; }

/* 16/10 (her comment): the DNA values' titles bigger (were 13px like the text) */
.dna-label strong { font-size: 17px; line-height: 1.3; margin-bottom: 2px; }
.inst-value h3 { font-size: 16px; line-height: 21px; }
.inst-value { height: auto; min-height: 90px; }

/* 16/10: the leaders' real bios + "Porta-voz" line (topics for the press) under each */
.inst-leader__topics { margin: 16px 30px 0; font-size: 13px; line-height: 1.6; color: #d9d9d9; }
.inst-leader__topics strong { color: #62ECA4; font-weight: 700; }

/* 16/10 (her comment): wider, shorter leader cards, so the section title shows on the
   same screen as them. Photos rebuilt at 560x220 (the wall behind them extended to the
   sides, js-free, in the image itself) */
.inst-leaders { gap: 40px; margin-top: 44px; }
.inst-leader { width: 560px; padding-bottom: 26px; }
.inst-leader__photo { height: 220px; }
.inst-leader h3 { margin-top: 22px; }
.inst-leader__bio { margin: 16px 36px 0; }
.inst-leader__topics { margin: 12px 36px 0; }
.inst-leader__in { margin-top: 20px; }
@media (max-width: 1200px) { .inst-leader { width: calc(50% - 20px); } }
@media (max-width: 860px) { .inst-leader { width: 100%; max-width: 560px; } }

/* 16/10: Institucional in the full-screen mode (js/fullpage.js, desktop), like the
   rest of the site: one section per screen, content centred below the menu;
   a screen taller than the window (the DNA) scrolls inside before moving on */
html.fp-on .inst-hero { height: 100vh; }
html.fp-on .inst-hero__content { padding-top: calc(50vh - 120px); }
html.fp-on .inst-sec {
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  margin-top: 0; padding: calc(var(--header-h) + 32px) 16px 48px; box-sizing: border-box;
}
html.fp-on .inst-sec > * { flex-shrink: 0; }
html.fp-on .inst-sec .section-title, html.fp-on .inst-sec .inst-lead { align-self: center; }
html.fp-on .inst-dna__stage { margin-top: 40px; }
html.fp-on #imprensa { min-height: 100vh; padding-top: calc(var(--header-h) + 48px); box-sizing: border-box; }

/* 16/10 (her comment): the Propósito & DNA screen fits the window, no scrolling inside
   it. The 3D helix stage (once the animation is on, .is-dna) takes the height left
   under the title and text; the animation re-fits the helix and the labels to it */
html.fp-on .inst-dna { padding-bottom: 20px; }
html.fp-on .inst-dna__stage.is-dna { height: calc(100vh - var(--header-h) - 230px); min-height: 440px; margin-top: 24px; }

/* 16/10 (her comment): the Liderança text in one line on desktop (it wraps below 1200px) */
@media (min-width: 1200px) { .inst-lead-sec .inst-lead { max-width: none; white-space: nowrap; } }

/* 16/10 (her comment): the photo mosaic 25% bigger (was 1114 x 312, now up to 1392 x 390);
   it becomes a continuous carousel once the new photos come in */
.inst-mosaic { width: min(1392px, 100%); }
html.fp-on .inst-about .inst-mosaic { margin-top: 44px; }
/* 16/10 (her comment): the Propósito & DNA text in one line on desktop too */
@media (min-width: 1200px) { .inst-dna .inst-lead { max-width: none; white-space: nowrap; } }
/* 16/10 (her comment): the Quem Somos text in 2 lines on desktop (was 3 at 760px) */
@media (min-width: 1200px) { .inst-about .inst-lead { max-width: 1140px; } }
/* 16/10 (her comment: the values showed before the helix): on desktop + WebGL the
   static values stay hidden while the 3D animation loads (institucional.html) */
.inst-dna__stage.is-dna-pending .inst-dna__fallback { visibility: hidden; }
/* 16/10 (her comment): the mosaic as a continuous-loop carousel (js/inst-mosaic.js).
   Each module keeps the layout's 9 positions at the size of the box; the strip
   alternates module and mirror and slides by half its width (the doubled copy). */
.inst-mosaic.is-loop { container-type: inline-size; overflow: hidden; }
.inst-mosaic__track {
  display: flex; width: max-content; height: 100%;
  animation: inst-mosaic-loop var(--loop-dur, 92s) linear infinite;
  will-change: transform;
}
.inst-mosaic__mod {
  position: relative; flex: none; width: 100cqw; height: 100%;
  margin-right: calc(100cqw * 8 / 1114);
}
/* 21/10 (her comment): no pause on hover, the carousel keeps rolling; it only pauses off screen */
.inst-mosaic.is-paused .inst-mosaic__track { animation-play-state: paused; }
@keyframes inst-mosaic-loop { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .inst-mosaic__track { animation: none; } }
/* 16/10 (her comment: the photos weigh more, so it all looked too low): Quem Somos
   sits higher on its screen; more room below moves the centred block up ~50px */
html.fp-on .inst-about { padding-bottom: 148px; }
/* 16/10 (her comment: the DNA values sat too low): the static version goes up too
   (the 3D one uses labelLift in institucional.html) */
.inst-dna__stage .inst-value { margin-top: -40px; }
@media (max-width: 860px) { .inst-dna__stage .inst-value { margin-top: 0; } }
/* 16/10 (her comment): the LinkedIn icons aligned and the bios with the same number of
   lines: text a bit wider (both bios 7 lines at 1440, measured) and the icon pinned
   to the bottom of the card (cards in a row stretch to the same height) */
.inst-leader__bio, .inst-leader__topics { margin-left: 22px; margin-right: 22px; }
.inst-leader__topics { margin-bottom: 20px; }
.inst-leader__in { margin-top: auto; }
/* 16/10 (her reference image): Nossa história, the timeline after Quem somos. A dashed
   line with an arrow crosses the milestones; each one has the year above the line, a
   stem down to a round icon and the title + text to the left of it, right aligned.
   It draws itself left to right (js/inst-timeline.js sets --t, the moment the line
   reaches each stem): the line is revealed with a light at its tip and each milestone
   comes in as the light passes. Earlier years in grey, today in white. Milestones
   without a date yet: .is-pending (year dimmed) */
.inst-history .section-title { text-align: center; }
.inst-tl {
  --tl-line: 86px; --tl-dur: 2.6s;
  position: relative; list-style: none; margin: 64px auto 0; padding: 0;
  width: min(1240px, 100%); display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 24px;
}
.inst-tl__line {
  position: absolute; left: -24px; right: -24px; top: var(--tl-line); height: 1px;
  background: repeating-linear-gradient(to right, #6f6f6f 0 5px, transparent 5px 10px);
  clip-path: inset(-8px 100% -8px 0);
}
.inst-tl__line::after {
  content: ''; position: absolute; right: -1px; top: -3px; width: 7px; height: 7px;
  border-radius: 50%; background: #8a8a8a;
}
.inst-tl__head {
  position: absolute; left: 0; top: -2px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 8px 2px rgba(255, 255, 255, .7), 0 0 22px 6px rgba(98, 236, 164, .35); opacity: 0;
}
.inst-tl__item { position: relative; height: 270px; }
.inst-tl__year {
  position: absolute; left: 72%; bottom: calc(100% - var(--tl-line) + 14px); transform: translate(-50%, 10px);
  font-size: 40px; line-height: 1; font-weight: 400; color: #8f8f8f; white-space: nowrap; opacity: 0;
}
.inst-tl__item.is-now .inst-tl__year { color: #fff; }
.inst-tl__item.is-pending .inst-tl__year { color: #555; }
.inst-tl__stem {
  position: absolute; left: 72%; top: var(--tl-line); width: 1px; height: 32px; margin-left: -.5px;
  background: #8a8a8a; transform: scaleY(0); transform-origin: top;
}
.inst-tl__stem::before {
  content: ''; position: absolute; left: -2.5px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #bdbdbd;
}
.inst-tl__icon {
  position: absolute; left: 72%; top: calc(var(--tl-line) + 32px); width: 34px; height: 34px; margin-left: -17px;
  border-radius: 50%; display: grid; place-items: center; background: #9a9a9a; color: #111;
  transform: scale(.4); opacity: 0;
}
.inst-tl__item.is-now .inst-tl__icon { background: #fff; box-shadow: 0 0 18px rgba(255, 255, 255, .25); }
.inst-tl__text {
  position: absolute; right: calc(28% + 28px); left: 0; top: calc(var(--tl-line) + 36px); text-align: right;
  opacity: 0; transform: translateX(-14px);
}
.inst-tl__text h3 { margin: 0; font-size: 16px; line-height: 21px; font-weight: 700; color: #fff; }
.inst-tl__text p { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: #bdbdbd; text-wrap: pretty; }
/* play: the line, then each milestone at its --t */
.inst-tl.is-play .inst-tl__line { clip-path: inset(-8px 0 -8px 0); transition: clip-path var(--tl-dur) linear .3s; }
.inst-tl.is-play .inst-tl__head { left: 100%; opacity: 1; transition: left var(--tl-dur) linear .3s, opacity .3s ease .3s; }
.inst-tl.is-done .inst-tl__head { opacity: 0; transition: opacity .6s ease; left: 100%; }
.inst-tl.is-play .inst-tl__year { opacity: 1; transform: translate(-50%, 0); transition: opacity .5s ease var(--t, 0s), transform .6s cubic-bezier(.2, .8, .2, 1) var(--t, 0s); }
.inst-tl.is-play .inst-tl__stem { transform: scaleY(1); transition: transform .3s ease-out var(--t, 0s); }
.inst-tl.is-play .inst-tl__icon { opacity: 1; transform: scale(1); transition: opacity .25s ease calc(var(--t, 0s) + .22s), transform .45s cubic-bezier(.3, 1.5, .5, 1) calc(var(--t, 0s) + .22s); }
.inst-tl.is-play .inst-tl__text { opacity: 1; transform: none; transition: opacity .6s ease calc(var(--t, 0s) + .32s), transform .7s cubic-bezier(.2, .8, .2, 1) calc(var(--t, 0s) + .32s); }
@media (prefers-reduced-motion: reduce) {
  .inst-tl .inst-tl__line { clip-path: none; }
  .inst-tl .inst-tl__year, .inst-tl .inst-tl__icon, .inst-tl .inst-tl__text { opacity: 1; transform: none; }
  .inst-tl .inst-tl__year { transform: translateX(-50%); }
  .inst-tl .inst-tl__stem { transform: none; }
}
@media (max-width: 860px) {
  .inst-tl { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; padding-left: 52px; }
  .inst-tl__line, .inst-tl__stem { display: none; }
  .inst-tl__item { height: auto; }
  .inst-tl__year, .inst-tl__icon, .inst-tl__text { position: static; opacity: 1 !important; transform: none !important; margin: 0; }
  .inst-tl__year { display: block; font-size: 28px; margin-bottom: 8px; }
  .inst-tl__icon { position: absolute; left: -52px; top: 0; margin: 0; }
  .inst-tl__text { text-align: left; }
}
/* 16/10 (her comment): the timeline's round icons in neon green, every milestone */
.inst-tl__icon, .inst-tl__item.is-now .inst-tl__icon {
  background: #62ECA4; color: #06140d;
  box-shadow: 0 0 10px rgba(98, 236, 164, .75), 0 0 26px rgba(98, 236, 164, .35);
}
/* 16/10 (her comment): no dot at the end of the timeline's line */
.inst-tl__line::after { display: none; }
/* 16/10: hero background video. 21/10 (her request): no cover image, the hero opens black
   and the video fades in from black once the page has loaded (institucional.html); the
   still cover (only as a fallback) fades in the same way */
.inst-hero { background: #000; }
.inst-hero__video, .inst-hero__cover { opacity: 0; transition: opacity 1.4s ease-out; }
.inst-hero__video.is-on, .inst-hero__cover.is-on { opacity: 1; }
/* 16/10 (her comment): the timeline's line comes in from outside the screen on the left
   and goes out on the right (full window width); the milestones stay where they are */
.inst-history { overflow-x: clip; }
.inst-tl { --tl-dur: 3.2s; }
.inst-tl__line { left: calc(50% - 50vw); right: auto; width: 100vw; }
/* 16/10 (her request): the hero video fills the whole first screen, under a dark
   layer so the white text reads (the video is a bright office scene) */
.inst-hero__bg { top: 0; height: 100%; }
.inst-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(0,0,0,.35), transparent 75%),
    linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.5) 60%, #000);
}
/* 16/10 (her request): the hero video a little darker (~50% -> ~62% black) */
.inst-hero::after {
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(0,0,0,.35), transparent 75%),
    linear-gradient(to bottom, rgba(0,0,0,.67), rgba(0,0,0,.62) 60%, #000);
}
/* 16/10 (her comment): the mosaic fades out on the left like on the right (was a light 55% fade on the left) */
.inst-mosaic { -webkit-mask-image: linear-gradient(to right, transparent, #000 21%, #000 79%, transparent); mask-image: linear-gradient(to right, transparent, #000 21%, #000 79%, transparent); }
/* 17/10 (her comment): the DNA values' titles bigger again (were 17px / 16px) */
.dna-label strong { font-size: 20px; line-height: 1.25; margin-bottom: 2px; }
.inst-value h3 { font-size: 19px; line-height: 24px; }
/* 17/10 (her comment: the LinkedIn links looked loose at the bottom of the cards): the icon
   now sits right next to the name, small, as part of the identification */
.inst-leader__head { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 22px; }
.inst-leader__head h3 { margin: 0; }
.inst-leader__head .inst-leader__in { margin: 0; color: #62ECA4; opacity: .9; transition: opacity .2s ease; }
.inst-leader__head .inst-leader__in:hover { opacity: 1; }
/* 17/10 (her request): Hub de Imprensa redesigned. Grid of glass cards: the boilerplate
   (big, left) with a copy button; brand kit and press contact stacked on the right; the
   "Na mídia" strip across the bottom. Screenshots card removed. */
.press .section-title { text-align: left; margin-bottom: 10px; }
.press .section-lead { text-align: left; margin: 0 0 40px; max-width: none; color: #cfcfcf; }
.press-layout {
  display: grid; grid-template-columns: 1.45fr 1fr; gap: 20px;
  max-width: 1080px; margin: 0 auto;
}
.press .container > .section-title, .press .container > .section-lead { max-width: 1080px; margin-left: auto; margin-right: auto; }
.press-card.press-card { padding: 30px 32px; border-radius: 14px; display: flex; flex-direction: column; text-align: left; }
.press-side { display: grid; gap: 20px; }
.press-card--media { grid-column: 1 / -1; padding: 24px 32px; }
.press-kicker {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #62ECA4;
}
.press-kicker em { font-style: normal; font-weight: 400; letter-spacing: .02em; text-transform: none; color: #8a8a8a; }
.press-boiler { margin: 18px 0 26px; font-size: 19px; line-height: 1.55; color: #f2f2f2; text-wrap: pretty; }
.press-copy {
  margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(98, 236, 164, .45);
  background: rgba(98, 236, 164, .06); color: #e9fff4; font: 700 14px/1 Outfit, sans-serif;
  transition: background .2s ease, border-color .2s ease;
}
.press-copy:hover { background: rgba(98, 236, 164, .14); border-color: #62ECA4; }
.press-copy.is-done { border-color: #62ECA4; color: #62ECA4; }
.press-logo {
  margin: 16px 0 14px; height: 92px; border-radius: 10px; display: grid; place-items: center;
  background: radial-gradient(120% 140% at 50% 0%, rgba(98, 236, 164, .10), rgba(0, 0, 0, 0) 60%), #050505;
  border: 1px solid rgba(255, 255, 255, .06);
}
.press-logo img { height: 40px; width: auto; }
.press-palette { display: flex; gap: 8px; margin-bottom: 16px; }
.press-palette span { width: 26px; height: 26px; border-radius: 50%; background: var(--c); border: 1px solid rgba(255, 255, 255, .22); }
.press-link { margin-top: auto; font-size: 14px; font-weight: 700; color: #62ECA4; text-decoration: none; }
.press-link:hover { text-decoration: underline; }
.press-mail { margin: 14px 0 6px; font-size: 24px; font-weight: 700; color: #fff; text-decoration: none; word-break: break-all; }
.press-mail:hover { color: #62ECA4; }
.press-note { margin: 0; font-size: 14px; color: #a8a8a8; }
.press-news { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; }
.press-news li {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 4px 12px;
  padding: 14px 0 4px; border-top: 1px solid rgba(255, 255, 255, .1);
}
.press-news__outlet { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a8a8a; }
.press-news__title { grid-row: 2; font-size: 15px; color: #e8e8e8; }
.press-news__arrow { grid-row: 1 / 3; grid-column: 2; align-self: center; color: #62ECA4; }
html.fp-on #imprensa { display: flex; flex-direction: column; justify-content: center; padding-bottom: 48px; }
@media (max-width: 860px) {
  .press-layout { grid-template-columns: 1fr; }
  .press-news { grid-template-columns: 1fr; }
  .press-boiler { font-size: 17px; }
}
.press-card .press-boiler { margin: 16px 0 24px; font-size: 21px; line-height: 1.5; color: #f2f2f2; }
.press .section-title, .press .section-lead { text-align: center; }
.press .section-lead { margin-bottom: 32px; }
.press-card.press-card { padding: 26px 30px; }
.press-card--media.press-card--media { padding: 20px 30px 18px; }
.press-logo { height: 80px; margin: 14px 0 12px; }
html.fp-on #imprensa { padding-top: calc(var(--header-h) + 24px); padding-bottom: 32px; }
@media (max-width: 860px) { .press-card .press-boiler { font-size: 17px; } }
/* 17/10 (her comment: elements and texts too big; room for an image in each news item) */
.press-layout { max-width: 980px; gap: 16px; }
.press-side { gap: 16px; }
.press .container > .section-title, .press .container > .section-lead { max-width: 980px; }
.press-card.press-card { padding: 22px 26px; }
.press-card--media.press-card--media { padding: 18px 26px 20px; }
.press-kicker { font-size: 11px; }
.press-card .press-boiler { margin: 12px 0 18px; font-size: 16px; line-height: 1.6; }
.press-copy { padding: 8px 14px; font-size: 13px; }
.press-logo { height: 64px; margin: 12px 0 10px; }
.press-logo img { height: 30px; }
.press-palette span { width: 20px; height: 20px; }
.press-palette { margin-bottom: 12px; }
.press-link { font-size: 13px; }
.press-mail { margin: 10px 0 4px; font-size: 19px; }
.press-note { font-size: 13px; }
/* news items: a thumbnail on the left (placeholder until the real images come) */
.press-news { gap: 0 22px; margin-top: 10px; }
.press-news li { grid-template-columns: 96px 1fr auto; grid-template-rows: auto auto; gap: 2px 12px; padding: 12px 0 0; align-items: center; }
.press-news__img {
  grid-row: 1 / 3; grid-column: 1; width: 96px; aspect-ratio: 16 / 10; border-radius: 6px;
  background: linear-gradient(135deg, rgba(98, 236, 164, .10), rgba(255, 255, 255, .03)) , #0b0b0b;
  border: 1px dashed rgba(255, 255, 255, .14); background-size: cover; background-position: center;
}
.press-news__outlet { grid-column: 2; grid-row: 1; align-self: end; font-size: 11px; }
.press-news__title { grid-column: 2; grid-row: 2; align-self: start; font-size: 13px; line-height: 1.4; }
.press-news__arrow { grid-column: 3; grid-row: 1 / 3; }
.press .section-lead { margin-bottom: 28px; font-size: 15px; }
/* 17/10 (her comment): no lead under the Hub de Imprensa title; the title keeps the gap */
.press .section-title { margin-bottom: 32px; }
/* 17/10 (her comment): the LinkedIn icon grows a little on hover */
.inst-leader__head .inst-leader__in { transition: opacity .2s ease, transform .25s cubic-bezier(.3, 1.4, .5, 1); }
.inst-leader__head .inst-leader__in:hover { transform: scale(1.22); }
/* 17/10 (her comment: still not happy with the press section): open, editorial version.
   No glass boxes: two columns split by a thin green line, then the news as tiles with the
   image on top. Reuses .press-kicker / .press-boiler / .press-copy / .press-palette / .press-link. */
.pr { max-width: 980px; margin: 0 auto; text-align: left; }
.pr .press-card { background: none; padding: 0; border-radius: 0; }
.pr-top { display: grid; grid-template-columns: 1.5fr 1fr; gap: 0; }
.pr-about { padding-right: 48px; }
.pr-side { padding-left: 48px; border-left: 1px solid rgba(98, 236, 164, .35); display: flex; flex-direction: column; gap: 28px; }
.pr .press-boiler { margin: 14px 0 20px; font-size: 17px; line-height: 1.6; color: #ededed; }
.pr .press-copy { margin-top: 0; }
.pr-mail { display: inline-block; margin-top: 10px; font-size: 20px; font-weight: 700; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(98, 236, 164, .5); padding-bottom: 2px; transition: color .2s ease, border-color .2s ease; }
.pr-mail:hover { color: #62ECA4; border-color: #62ECA4; }
.pr-kit { display: flex; align-items: center; gap: 18px; margin: 12px 0 10px; }
.pr-kit img { height: 26px; width: auto; }
.pr .press-palette { margin: 0; }
.pr .press-palette span { width: 18px; height: 18px; }
.pr-media { margin-top: 44px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .1); }
.pr-news { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pr-news li { display: flex; flex-direction: column; gap: 6px; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.pr-news li:hover { transform: translateY(-4px); }
.pr-news__img {
  aspect-ratio: 16 / 9; border-radius: 8px; margin-bottom: 6px;
  background: linear-gradient(135deg, rgba(98, 236, 164, .10), rgba(255, 255, 255, .02)), #0a0a0a;
  border: 1px dashed rgba(255, 255, 255, .14); background-size: cover; background-position: center;
}
.pr-news__outlet { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #62ECA4; }
.pr-news__title { font-size: 15px; line-height: 1.4; color: #e8e8e8; }
@media (max-width: 860px) {
  .pr-top { grid-template-columns: 1fr; }
  .pr-about { padding-right: 0; }
  .pr-side { padding: 28px 0 0; border-left: 0; border-top: 1px solid rgba(98, 236, 164, .35); margin-top: 28px; }
  .pr-news { grid-template-columns: 1fr; }
}
.pr .pr-about { padding-right: 52px; }
.pr .pr-side { padding-left: 52px; }
.pr-news__img { aspect-ratio: 16 / 8; }
@media (max-width: 860px) { .pr .pr-about { padding-right: 0; } .pr .pr-side { padding: 28px 0 0; } }
/* 17/10 (her comment): the boilerplate smaller, body-text size (was 17px) */
.pr .press-boiler { font-size: 15px; line-height: 1.6; color: #e2e2e2; }
/* 17/10 (her comment): the press e-mail smaller (was 20px) */
.pr-mail { font-size: 16px; }
/* 17/10 (her comment): 'Copiar texto' is now the site's standard button (btn btn-secondary glow-button--sm) */
.pr .js-copy { align-self: flex-start; }
/* 17/10 (her comment): 'Copiar texto' keeps the site button's shape but without the glow animation\n   (no spinning light on the border, no light following the mouse): a still green border */
.pr .js-copy .gradient::before { animation: none; background: var(--button-border-dim); }
.pr .js-copy span::before { display: none; }
.pr .js-copy:hover .gradient::before { background: rgba(80, 234, 154, .7); }
/* 17/10 (her comment): the Hub de Imprensa as wide as the two Liderança cards above (2 x 560 + 40 = 1160px) */
.pr { max-width: 1160px; }
@media (max-width: 1200px) { .pr { max-width: 100%; } }
/* 17/10 (her comment: the brand kit prettier, and no pure black / white swatches):
   the logo on a dark tile with a soft green light, and the four brand colours as
   named chips (click copies the hex) */
.pr-kit { display: block; margin: 12px 0 14px; }
.pr-kit__logo {
  height: 84px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 12px;
  background: radial-gradient(90% 120% at 50% 0%, rgba(80, 234, 154, .18), rgba(80, 234, 154, 0) 65%), #0a0d0c;
  border: 1px solid rgba(80, 234, 154, .18);
}
.pr-kit__logo img { height: 30px; width: auto; }
.pr-kit__colors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pr-swatch {
  width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 0 0 8px;
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; overflow: hidden;
  background: #0b0d0c; color: #fff; font-family: inherit; text-align: left; cursor: pointer;
  transition: border-color .2s ease, transform .25s cubic-bezier(.3, 1.4, .5, 1);
}
.pr-swatch:hover { border-color: rgba(80, 234, 154, .5); transform: translateY(-2px); }
.pr-swatch i { display: block; width: 100%; height: 38px; background: var(--c); margin-bottom: 6px; }
.pr-swatch b { padding: 0 9px; font-size: 11px; font-weight: 700; line-height: 1.2; }
.pr-swatch span { padding: 0 9px; font-size: 11px; color: #9a9a9a; letter-spacing: .03em; }
.pr-swatch.is-done span { color: #62ECA4; }
.pr-swatch b { white-space: nowrap; }
.pr-news__img { aspect-ratio: 16 / 6.5; }
.pr-media { margin-top: 36px; padding-top: 22px; }
/* 17/10 (her request): "Celero na mídia" with the 8 real articles as a carousel (3 visible,
   one step every 4.5 s, loops; dots like the site's other carousels). The thumbnails are
   typographic (the outlet's name on a green tile) until there are images to use. */
.pr-carousel { overflow: hidden; margin-top: 16px; padding: 4px 0 6px; }
.pr-carousel .pr-news {
  display: flex; gap: 24px; margin: 0; grid-template-columns: none;
  transition: transform .7s cubic-bezier(.65, 0, .35, 1);
}
.pr-carousel .pr-news li { flex: 0 0 calc((100% - 48px) / 3); }
.pr-news a { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; }
.pr-news a:hover .pr-news__title { color: #fff; text-decoration: underline; text-decoration-color: rgba(98, 236, 164, .6); text-underline-offset: 3px; }
.pr-news__img { display: grid; place-items: center; border-style: solid; border-color: rgba(80, 234, 154, .16);
  background: radial-gradient(120% 140% at 0% 0%, rgba(80, 234, 154, .22), rgba(80, 234, 154, 0) 60%), #0a0d0c; }
.pr-news__img em { font-style: normal; font-weight: 700; font-size: 20px; color: rgba(255, 255, 255, .86); padding: 0 16px; text-align: center; line-height: 1.2; }
.pr-news__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pr-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.pr-dots span { width: 12px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .25); cursor: pointer; transition: width .3s ease, background .3s ease; }
.pr-dots span.is-on { width: 40px; background: #fff; }
@media (max-width: 860px) { .pr-carousel .pr-news li { flex-basis: 100%; } }
/* 17/10 (her comment): 4 news at a time on desktop, smaller tiles */
.pr-carousel .pr-news { gap: 20px; }
.pr-carousel .pr-news li { flex: 0 0 calc((100% - 60px) / 4); }
.pr-news__img em { font-size: 16px; }
.pr-news__title { font-size: 14px; }
@media (max-width: 860px) { .pr-carousel .pr-news li { flex-basis: 100%; } }
/* 17/10 (her comment): no divider line between the boilerplate and the right column */
.pr-side { border-left: 0; }
/* 17/10 (her comments): the brand kit shows the white and the black logo side by side
   (each with its own download), and 5 colours */
.pr-kit__logos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.pr-kit__logos .pr-kit__logo { margin-bottom: 0; height: 76px; }
.pr-kit__logo--light { background: radial-gradient(90% 120% at 50% 0%, rgba(80, 234, 154, .28), rgba(80, 234, 154, 0) 70%), #EEF4F1; border-color: rgba(255, 255, 255, .5); }
.pr-kit__logos img { height: 26px; }
.pr-kit__colors { grid-template-columns: repeat(5, 1fr); gap: 6px; }
.pr-swatch b { padding: 0 7px; font-size: 10.5px; }
.pr-swatch span { padding: 0 7px; font-size: 10.5px; }
.pr-kit__dl { display: flex; gap: 20px; }
/* 17/10 (her comment: a better place for the press contact): under the boilerplate, in the left column (which had empty room); the right column keeps only the brand kit */
.pr-contact { margin: 34px 0 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .08); display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.pr-contact .pr-mail { margin-top: 0; }
/* 17/10 (her comment): brand kit and boilerplate half and half */
.pr-top { grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .pr-top { grid-template-columns: 1fr; } }
/* 17/10 (her comment): brand manual download link (file still to come: href='#') */
.pr-kit__dl { flex-wrap: wrap; row-gap: 6px; }
.pr-manual em { font-style: normal; font-weight: 400; font-size: 11px; color: #8a8a8a; margin-left: 8px; }
/* 17/10 (her comment: contact together with the boilerplate, to save room): the press contact sits on the same row as 'Copiar texto' */
.pr-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.pr-actions .pr-contact { margin: 0; padding: 0; border: 0; }
/* 17/10 (her comment): no underline under the press e-mail */
.pr-mail { border-bottom: 0; padding-bottom: 0; }
/* 17/10 (her comment): 'Copiar texto' smaller (was 14px with 1.95px tracking) */
.pr .js-copy span { font-size: 12px; letter-spacing: 1.4px; padding: 7px 14px; }
/* 17/10 (her request): the press buttons at 10px, and the logo / manual downloads in the
   same style as "Copiar texto" (site button shape, still green border, no glow animation) */
.pr .pr-btn .gradient::before { animation: none; background: var(--button-border-dim); }
.pr .pr-btn span::before { display: none; }
.pr .pr-btn:hover .gradient::before { background: rgba(80, 234, 154, .7); }
.pr .pr-btn span { font-size: 10px; letter-spacing: 1.2px; padding: 7px 13px; }
.pr-kit__dl { gap: 10px; }
/* 17/10 (her comment): the brand kit a bit wider than the boilerplate and with more air
   between its parts; both columns stretch to the same height and keep their button rows at
   the bottom, so "Copiar texto" and the download buttons line up */
.pr-top { grid-template-columns: 0.85fr 1.15fr; align-items: stretch; }
.pr .pr-about { padding-right: 56px; display: flex; flex-direction: column; }
.pr .pr-side { padding-left: 0; }
.pr-side > .pr-block { flex: 1; display: flex; flex-direction: column; }
.pr .pr-actions { margin-top: auto; padding-top: 22px; }
.pr .press-boiler { margin-bottom: 0; }
.pr-kit { margin: 16px 0 0; }
.pr-kit__logos { gap: 14px; margin-bottom: 14px; }
.pr-kit__colors { gap: 10px; }
.pr-kit__dl { margin-top: auto; padding-top: 22px; gap: 12px; }
@media (max-width: 860px) { .pr-top { grid-template-columns: 1fr; } .pr .pr-about { padding-right: 0; } }
.pr-top { grid-template-columns: 0.92fr 1.08fr; }
.pr .pr-about { padding-right: 48px; }
.pr .pr-actions { gap: 18px; flex-wrap: nowrap; }
.pr-actions .pr-contact { gap: 12px; flex-wrap: nowrap; white-space: nowrap; }
@media (max-width: 1100px) { .pr .pr-actions, .pr-actions .pr-contact { flex-wrap: wrap; white-space: normal; } }
/* 17/10 (her comment): more room between the Hub de Imprensa title and the content (32 -> 52px) */
.press .section-title { margin-bottom: 52px; }
/* 17/10 (her comment): more room between the news and the carousel dots (14 -> 30px) */
.pr-dots { margin-top: 30px; }
/* 17/10: news with a photo (images she sent): photo fills the tile, the outlet name is hidden */
.pr-news__img.has-img { background-size: cover; background-position: center; border-style: solid; border-color: rgba(255, 255, 255, .08); }
.pr-news__img.has-img em { display: none; }
/* 17/10 (her comment: step 1 has to fit its screen, with no extra scrolling once the
   enrichment result shows): tighter spacing, the result in a 3-column grid (label over
   value) and its height reserved from the start, so the card never grows on click */
html.fp-on #passo-1 .exp-num { margin-bottom: 20px; }
#passo-1 .exp-sub { margin-top: 14px; }
#passo-1 .exp-card { margin-top: 30px; padding: 26px 32px; }
#passo-1 .exp-raw { margin-top: 16px; }
#passo-1 .exp-btn { margin-top: 16px; }
#passo-1 .exp-result { margin-top: 18px; min-height: 186px; position: relative; }
#passo-1 .exp-result.is-on { margin-top: 18px; }
#passo-1 .exp-result:empty::before {
  content: 'O resultado do enriquecimento aparece aqui.'; position: absolute; inset: 0;
  display: grid; place-items: center; border: 1px dashed rgba(255, 255, 255, .1); border-radius: 3px;
  font-size: 13px; color: #6f7a74;
}
#passo-1 .exp-fields { grid-template-columns: repeat(3, 1fr); gap: 4px 24px; }
#passo-1 .exp-field { flex-direction: column; justify-content: flex-start; gap: 2px; padding: 8px 0; }
#passo-1 .exp-field dt { font-size: 12px; }
#passo-1 .exp-field dd { font-size: 14px; text-align: left; line-height: 1.35; }
#passo-1 .exp-status { margin: 0; padding-top: 70px; text-align: center; color: #9aa59f; font-size: 14px; }
@media (max-width: 860px) {
  #passo-1 .exp-fields { grid-template-columns: 1fr 1fr; }
  #passo-1 .exp-result { min-height: 0; }
  #passo-1 .exp-result:empty::before { display: none; }
}
#passo-1 .exp-sub { max-width: 860px; }
#passo-1 .exp-chips { gap: 8px; flex-wrap: nowrap; }
#passo-1 .exp-chip { height: 30px; padding: 0 11px; font-size: 12px; white-space: nowrap; }
#passo-1 .exp-label { margin-bottom: 10px; }
html.fp-on #passo-1 { padding-top: calc(var(--header-h) + 12px); padding-bottom: 24px; }
html.fp-on #passo-1 .exp-num { width: 72px; height: 72px; font-size: 44px; margin-bottom: 16px; }
@media (max-width: 1100px) { #passo-1 .exp-chips { flex-wrap: wrap; } }
/* 17/10 (her comment: step 2 has to fit its screen, no scrolling): same tightening as
   step 1; a shorter statement table; once the analysis is done the table gives way to the
   insights, laid out compactly: KPIs on top, then chart, categories and signals side by side */
html.fp-on #passo-2 { padding-top: calc(var(--header-h) + 12px); padding-bottom: 24px; }
html.fp-on #passo-2 .exp-num { width: 72px; height: 72px; font-size: 44px; margin-bottom: 16px; }
#passo-2 .exp-sub { margin-top: 14px; max-width: 860px; }
#passo-2 .exp-card { margin-top: 30px; padding: 24px 30px; }
#passo-2 .exp-table { max-height: 330px; }
#passo-2 .exp-btn { margin-top: 16px; }
#passo-2 .exp-card:has(.exp-insights.is-on) .exp-table,
#passo-2 .exp-card:has(.exp-insights.is-on) .exp-table__head,
#passo-2 .exp-card:has(.exp-insights.is-on) #expAnalyze { display: none; }
#passo-2 .exp-insights { margin-top: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
#passo-2 .exp-kpis { grid-column: 1 / -1; gap: 10px; }
#passo-2 .exp-kpi { padding: 12px 14px; }
#passo-2 .exp-kpi strong { font-size: 22px; }
#passo-2 .exp-kpi span { font-size: 13px; }
#passo-2 .exp-kpi small { font-size: 11px; }
#passo-2 .exp-panels { display: contents; }
#passo-2 .exp-panel { margin-top: 0; padding: 14px 16px; }
#passo-2 .exp-panel h3 { margin-bottom: 10px; font-size: 12px; }
#passo-2 .exp-chart { height: 150px; gap: 8px; }
#passo-2 .exp-bar span { width: 8px; }
#passo-2 .exp-cats li { grid-template-columns: 1fr 70px 36px; gap: 8px; padding: 4px 0; font-size: 12px; }
#passo-2 .exp-signals { gap: 6px; }
#passo-2 .exp-signals li { padding: 8px 10px 8px 30px; font-size: 12px; line-height: 1.4; }
#passo-2 .exp-signals li::before { left: 11px; top: 8px; }
@media (max-width: 860px) {
  #passo-2 .exp-insights { grid-template-columns: 1fr; }
  #passo-2 .exp-kpis { grid-template-columns: 1fr 1fr; }
}
/* 17/10: "Sobra de caixa por mês" (net per month) bars, value on top, last month highlighted */
.exp-bar--net { flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.exp-bar--net b { font-size: 10.5px; font-weight: 700; color: #9aa59f; white-space: nowrap; }
.exp-bar--net span.in { width: 60%; max-width: 34px; background: rgba(80, 234, 154, .45); border-radius: 3px 3px 0 0; height: calc(var(--h) * .7); }
.exp-bar--net.is-last span.in { background: #50ea9a; box-shadow: 0 0 12px rgba(80, 234, 154, .45); }
.exp-bar--net.is-last b { color: #50ea9a; }
.exp-chart-sum { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: #cfd6d2; }
.exp-chart-sum strong { color: #fff; }
#passo-2 .exp-bar--net span.in { width: 60%; }
/* 17/10 (her rule: anything "negative" in Rebel Red #F9465C, the brand red) */
.exp-kpi.is-neg strong { color: #F9465C; }
.exp-raw__v.is-out, .exp-table td.num.is-out, .exp-attrs li.is-neg em, .exp-gauge__band.is-high { color: #F9465C; }
.exp-attrs li.is-neg b::after { background: #F9465C; }

/* 19/10: richer enrichment loading on step 1 (js/experimente.js) */
#passo-1 .exp-chips.is-locked { pointer-events: none; opacity: .55; transition: opacity .3s; }
#passo-1 .exp-raw__v { position: relative; }
#passo-1 .exp-raw__v.is-scanning::after {
  content: ''; position: absolute; top: -6px; bottom: -6px; left: 0; width: 60px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(80,234,154,.28), transparent);
  border-right: 1px solid rgba(80,234,154,.8); box-shadow: 6px 0 18px -6px rgba(80,234,154,.7);
  animation: expScan 1.1s cubic-bezier(.45,0,.55,1) infinite alternate;
}
@keyframes expScan { from { left: -20px; } to { left: calc(100% - 40px); } }
#passo-1 .exp-scan { padding-top: 34px; max-width: 460px; margin: 0 auto; text-align: center; transition: opacity .25s, transform .25s; }
#passo-1 .exp-scan.is-out { opacity: 0; transform: translateY(-6px); }
#passo-1 .exp-scan .exp-status { padding-top: 0; color: #50ea9a; font-size: 14px; }
#passo-1 .exp-scan__bar { margin-top: 12px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
#passo-1 .exp-scan__bar span { display: block; width: 0; height: 100%; background: #50ea9a; box-shadow: 0 0 12px rgba(80,234,154,.8); transition: width .65s cubic-bezier(.4,0,.2,1); }
#passo-1 .exp-scan__steps { list-style: none; margin: 14px 0 0; padding: 0; display: flex; justify-content: space-between; gap: 8px; }
#passo-1 .exp-scan__steps li { flex: 1; font-size: 11px; line-height: 1.3; color: #6f7a74; transition: color .3s; }
#passo-1 .exp-scan__steps li::before { content: ''; display: block; width: 7px; height: 7px; margin: 0 auto 6px; border-radius: 50%; background: rgba(255,255,255,.15); transition: background .3s, box-shadow .3s; }
#passo-1 .exp-scan__steps li.is-now { color: #fff; }
#passo-1 .exp-scan__steps li.is-now::before { background: #50ea9a; box-shadow: 0 0 10px rgba(80,234,154,.9); animation: expDot .7s ease-in-out infinite alternate; }
#passo-1 .exp-scan__steps li.is-done { color: #9aa59f; }
#passo-1 .exp-scan__steps li.is-done::before { background: #50ea9a; }
@keyframes expDot { to { transform: scale(1.5); } }
#passo-1 .exp-field.is-loading dd { position: relative; color: transparent; }
#passo-1 .exp-field.is-loading dd::after {
  content: ''; position: absolute; left: 0; top: 50%; width: 70%; height: 10px; margin-top: -5px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(255,255,255,.06) 0%, rgba(80,234,154,.22) 50%, rgba(255,255,255,.06) 100%);
  background-size: 200% 100%; animation: expShimmer 1s linear infinite;
}
@keyframes expShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
#passo-1 .exp-field.is-decoding dd { color: #50ea9a; text-shadow: 0 0 10px rgba(80,234,154,.5); }
#passo-1 .exp-field dd { transition: color .4s, text-shadow .4s; }
#passo-1 .exp-field.is-set { border-bottom-color: rgba(80,234,154,.22); }
#passo-1 .exp-field.is-conf.is-set dd { color: #50ea9a; text-shadow: 0 0 14px rgba(80,234,154,.6); }
@media (prefers-reduced-motion: reduce) {
  #passo-1 .exp-raw__v.is-scanning::after, #passo-1 .exp-field.is-loading dd::after, #passo-1 .exp-scan__steps li.is-now::before { animation: none; }
}

/* 19/10: step 2 fits the screen. The insights block was hidden but still took its
   space (display:grid beat [hidden]), pushing the card past the bottom; the table
   and, after the analysis, the insights are fitted to the visible height
   (js/experimente.js, fitStep2) */
#passo-2 .exp-insights[hidden] { display: none; }
/* 19/10: the "do step 2 first" note sits in the middle of the score card */
#expScore { position: relative; }
#expScore .exp-locked:not([hidden]) { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 40px; }

/* 18/10 (her comment: too much empty space in the results): the three panels share the
   row's height and fill it: the chart grows to the bottom of its panel (summary under it),
   the categories spread over the full height */
#passo-2 .exp-insights { align-items: stretch; }
#passo-2 .exp-panel { display: flex; flex-direction: column; }
#passo-2 .exp-chart { flex: 1; height: auto; min-height: 150px; }
#passo-2 .exp-chart-sum { margin-top: 10px; }
#passo-2 .exp-cats { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
#passo-2 .exp-cats li { padding: 0; }
/* 18/10 (her comments, step 2): the table's scrollbar in the card's style (thin, green
   thumb on a clear track), the row being enriched lit while the table follows it
   (js/experimente.js), and the signal icons coloured by kind: alert/negative in yellow */
.exp-table { scrollbar-width: thin; scrollbar-color: rgba(80,234,154,.4) rgba(255,255,255,.04); }
.exp-table::-webkit-scrollbar { width: 6px; height: 6px; }
.exp-table::-webkit-scrollbar-track { background: rgba(255,255,255,.04); }
.exp-table::-webkit-scrollbar-thumb { background: rgba(80,234,154,.4); border-radius: 3px; }
.exp-table::-webkit-scrollbar-thumb:hover { background: rgba(80,234,154,.65); }
.exp-table::-webkit-scrollbar-corner { background: transparent; }
.exp-table tr.is-now td { background: rgba(80,234,154,.1); transition: background .25s; }
.exp-signals li.is-warn::before { content: "!"; color: #ffd21f; }
/* 18/10 (her comment): each category in "Para onde vai o dinheiro" has its own colour,
   on a small marker before the name and on the bar (--c set in js/experimente.js) */
.exp-cats li span { display: flex; align-items: center; gap: 8px; }
.exp-cats li span::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--c, #50ea9a); }
.exp-cats b::after { background: var(--c, #50ea9a); }
/* 18/10: the "Neutro" band of the step 3 score (bands as in the Score hero) */
.exp-gauge__band.is-neutral { color: #9aa59f; }
/* 19/10 (her comment): the light at the tip of the timeline looked cut in half — it lived
   inside the line, whose clip (the reveal) cut it at its centre and trimmed its glow.
   It is now a round dot, a little bigger, with a soft glow, drawn outside the line's clip:
   it travels along the line with the same timing, the line ending under its centre */
.inst-tl__head { display: none; }
.inst-tl::after {
  content: ''; position: absolute; z-index: 2; pointer-events: none;
  left: calc(50% - 50vw); top: calc(var(--tl-line) + .5px);
  width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff 0 45%, #dffbec 70%, #bdf5d6 100%);
  box-shadow: 0 0 6px 2px rgba(255, 255, 255, .75), 0 0 16px 5px rgba(98, 236, 164, .55), 0 0 34px 10px rgba(98, 236, 164, .25);
  opacity: 0;
}
.inst-tl.is-play::after { left: calc(50% + 50vw); opacity: 1; transition: left var(--tl-dur) linear .3s, opacity .3s ease .3s; }
.inst-tl.is-done::after { left: calc(50% + 50vw); opacity: 0; transition: opacity .6s ease; }
@media (max-width: 860px), (prefers-reduced-motion: reduce) { .inst-tl::after { display: none; } }

/* 19/10 (her comment): hovering a milestone's year or its text grows both by 30%, and they
   go back when the cursor leaves, on a smooth Bézier curve. Uses the separate "scale"
   property, so it doesn't fight the entrance (which animates "transform"). The year grows
   from its foot on the line (centred: its own translate(-50%) is why the origin is 0 100%),
   the text from its top-right corner, next to the icon. Pointer devices on desktop only */
@media (hover: hover) and (min-width: 861px) {
  .inst-tl__year { transform-origin: 0 100%; }
  .inst-tl__text { transform-origin: 100% 0; }
  .inst-tl.is-play .inst-tl__year {
    transition: opacity .5s ease var(--t, 0s), transform .6s cubic-bezier(.2, .8, .2, 1) var(--t, 0s), scale .55s cubic-bezier(.22, 1, .36, 1);
  }
  .inst-tl.is-play .inst-tl__text {
    transition: opacity .6s ease calc(var(--t, 0s) + .32s), transform .7s cubic-bezier(.2, .8, .2, 1) calc(var(--t, 0s) + .32s), scale .55s cubic-bezier(.22, 1, .36, 1), translate .55s cubic-bezier(.22, 1, .36, 1);
  }
  .inst-tl.is-play .inst-tl__item:has(> .inst-tl__year:hover, > .inst-tl__text:hover) { z-index: 3; }
  .inst-tl.is-play .inst-tl__item:has(> .inst-tl__year:hover, > .inst-tl__text:hover) > .inst-tl__year,
  .inst-tl.is-play .inst-tl__item:has(> .inst-tl__year:hover, > .inst-tl__text:hover) > .inst-tl__text { scale: 1.105; }
  /* 19/10 (her comment): the round icon grows with them too (from its centre, on the line's
     stem), and hovering the icon itself also counts */
  .inst-tl.is-play .inst-tl__icon {
    transition: opacity .25s ease calc(var(--t, 0s) + .22s), transform .45s cubic-bezier(.3, 1.5, .5, 1) calc(var(--t, 0s) + .22s), scale .55s cubic-bezier(.22, 1, .36, 1);
  }
  .inst-tl.is-play .inst-tl__item:has(> .inst-tl__icon:hover) { z-index: 3; }
  .inst-tl.is-play .inst-tl__item:has(> .inst-tl__year:hover, > .inst-tl__text:hover, > .inst-tl__icon:hover) > .inst-tl__icon,
  .inst-tl.is-play .inst-tl__item:has(> .inst-tl__icon:hover) > .inst-tl__year,
  .inst-tl.is-play .inst-tl__item:has(> .inst-tl__icon:hover) > .inst-tl__text { scale: 1.105; }
  /* 19/10 (her comment): grown, the text and the icon came too close — the text also moves
     12px to the left while it grows (the icon gains ~5px on each side), on the same curve */
  .inst-tl.is-play .inst-tl__item:has(> .inst-tl__year:hover, > .inst-tl__text:hover, > .inst-tl__icon:hover) > .inst-tl__text { translate: -6px 0; }
  /* 19/10 (her comment): the grown size 15% smaller (1.3 -> 1.105); the text's shift to the
     left scaled down with it (12px -> 6px), the icon now only gains ~2px on each side */
}

/* 19/10 (her request): the "Celero na mídia" carousel can be dragged with the mouse (and
   swiped on touch): grab cursor, no text selection while dragging, vertical swipes still
   scroll (institucional.html) */
.pr-carousel.is-draggable { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.pr-carousel.is-draggable a, .pr-carousel.is-draggable img { -webkit-user-drag: none; }
.pr-carousel.is-dragging { cursor: grabbing; }
.pr-carousel.is-dragging .pr-news a { pointer-events: none; }

/* 20/10 (her comment: video controls showing up on the laptop now and then): the screen
   video is decorative, so the browsers' own controls / big play button (shown when autoplay
   is refused, e.g. Safari or iPhone in Low Power Mode) are hidden for good (js/ins-laptop.js) */
.ins-laptop__screen::-webkit-media-controls,
.ins-laptop__screen::-webkit-media-controls-enclosure,
.ins-laptop__screen::-webkit-media-controls-panel,
.ins-laptop__screen::-webkit-media-controls-overlay-enclosure,
.ins-laptop__screen::-webkit-media-controls-overlay-play-button,
.ins-laptop__screen::-webkit-media-controls-start-playback-button,
.ins-laptop__screen::-webkit-media-controls-play-button {
  display: none !important; -webkit-appearance: none; appearance: none; opacity: 0 !important;
}

/* 20/10 (her request): steps 1-3 side by side - number, title and text in one
   column, the card in the other (the left group centred on the card's height).
   The neon line that ran behind the number is gone (js/exp-line.js no longer
   loaded); the number keeps its glowing green ring, which breathes on its own.
   Selectors carry the step ids so they win over the per-step rules above.
   Small screens stay stacked as before. */
.exp-num::before { animation: expNumBreath 5.5s ease-in-out infinite; }
@keyframes expNumBreath { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .exp-num::before { animation: none; } }
@media (min-width: 861px) {
  html body .exp-step:is(#passo-1, #passo-2, #passo-3) > .exp-wrap {
    max-width: 1168px;
    display: grid;
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas: ". card" "num card" "title card" "sub card" ". card";
    column-gap: 72px;
    text-align: left;
  }
  html body .exp-step:is(#passo-1, #passo-2, #passo-3) > .exp-wrap > .exp-num { grid-area: num; justify-self: start; margin: 0 0 28px; }
  html body .exp-step:is(#passo-1, #passo-2, #passo-3) > .exp-wrap > .exp-title { grid-area: title; margin: 0; text-align: left; }
  html body .exp-step:is(#passo-1, #passo-2, #passo-3) > .exp-wrap > .exp-sub { grid-area: sub; margin: 20px 0 0; max-width: none; text-align: left; }
  html body .exp-step:is(#passo-1, #passo-2, #passo-3) > .exp-wrap > .exp-card { grid-area: card; align-self: center; margin-top: 0; }
  /* 20/10 (her request): a bit larger title and text */
  html body .exp-step:is(#passo-1, #passo-2, #passo-3) > .exp-wrap > .exp-title { font-size: 48px; line-height: 1.2; }
  html body .exp-step:is(#passo-1, #passo-2, #passo-3) > .exp-wrap > .exp-sub { font-size: 18px; line-height: 1.6; }
  /* 20/10 (her request): sides alternate step to step - text left on 1, right on 2, left on 3 */
  html body .exp-step#passo-2 > .exp-wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    grid-template-areas: "card ." "card num" "card title" "card sub" "card .";
  }
  /* 20/10 (her request): the number always on the side nearest the card - steps 1 and 3
     (card on the right) put it at the right edge of the text column, as step 2 mirrors */
  html body .exp-step:is(#passo-1, #passo-3) > .exp-wrap > .exp-num { justify-self: end; }
  /* the score card is narrower beside the text: smaller gauge, more room for the factors */
  html body #passo-3 .exp-score__body { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 28px; }
  /* the card is narrower now: the example chips wrap, the statement's description wraps if needed */
  html body #passo-1 .exp-chips { flex-wrap: wrap; }
  html body #passo-2 .exp-table td:nth-child(2) { white-space: normal; }
}
/* 20/10 (her request): Score "Aprove mais" cards 10% bigger (box, icon and text) and a
   bit closer to the title (was 140px); the S line now runs behind them (js/score-vector.js) */
@media (min-width: 861px) {
  .sc-score .sc-cards { width: min(949px, calc(100vw - 48px)); gap: 28px; margin-top: 96px; }
  .sc-score .sc-card { min-height: 226px; padding: 44px 20px 31px; }
  .sc-score .sc-card .ins-pillar__art { width: 188px; height: 165px; margin: -20px auto 9px; }
  .sc-score .sc-card h3 { max-width: 187px; min-height: 44px; font-size: 16.5px; line-height: 22px; }
  .sc-score .sc-card p { max-width: 187px; margin-top: 20px; font-size: 16.5px; line-height: 26.4px; }
}
/* 20/10 (her requests): the Score "Aprove mais" cards slightly see-through, about 95%
   opaque (was 90%), so the S line shows faintly behind them. Only the card's glass is
   lighter (base and the darkening toward the bottom-right); the icon and the text stay
   solid. What passes behind a card is out of focus and darker, with the same values as
   the home's number cards (js/bn-wave.js: blur 2.2px, brightness 0.49); being the card's
   own backdrop, it moves with the card during its entrance */
.sc-score .sc-card.glass.glass {
  /* 20/10 (her follow-up): a touch more see-through (.93 -> .85), and the glass melts
     into full black at the bottom-right corner: a gradient from the card's own colour at
     the top to solid black there */
  --glass-base: rgba(5, 6, 6, .73);   /* 20/10: more see-through again (.85 -> .8 -> .73) */
  /* 20/10 (her follow-up): 50% more blur on what passes behind (2.2px -> 3.3px) */
  -webkit-backdrop-filter: blur(3.3px) brightness(.49);
          backdrop-filter: blur(3.3px) brightness(.49);
  background:
    linear-gradient(to bottom right, rgba(0,0,0,0) 18%, rgba(0,0,0,.35) 50%, rgba(0,0,0,.8) 78%, #000 100%),
    radial-gradient(260px 150px at 0 0, rgba(255,255,255,.055), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.038) 0%, rgba(255,255,255,.008) 38%, rgba(255,255,255,0) 60%),
    linear-gradient(135deg, rgba(255,255,255,.02), rgba(255,255,255,0) 55%),
    var(--glass-base);
}
/* 20/10 (her request): the Score "Aprove mais" cards a little shorter - less room between
   the borders and the icon/text (the icon's canvas keeps its size, so the icons don't
   shrink; its empty top and bottom are pulled in instead) */
@media (min-width: 861px) {
  .sc-score .sc-card { min-height: 0; padding: 34px 20px 24px; }
  .sc-score .sc-card .ins-pillar__art { margin: -30px auto -8px; }
}
/* 20/10 (her request): the Score hero's line fades to black at both sides of the screen:
   eased (smoothstep) fade over 12% of the width per side, like the home section 2 lines — no visible start line */
.sc-hero .sc-line {
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.000) 0.00%, rgba(0,0,0,0.020) 1.00%, rgba(0,0,0,0.074) 2.00%, rgba(0,0,0,0.156) 3.00%, rgba(0,0,0,0.259) 4.00%, rgba(0,0,0,0.376) 5.00%, rgba(0,0,0,0.500) 6.00%, rgba(0,0,0,0.624) 7.00%, rgba(0,0,0,0.741) 8.00%, rgba(0,0,0,0.844) 9.00%, rgba(0,0,0,0.926) 10.00%, rgba(0,0,0,0.980) 11.00%, rgba(0,0,0,1.000) 12.00%, rgba(0,0,0,1.000) 88.00%, rgba(0,0,0,0.980) 89.00%, rgba(0,0,0,0.926) 90.00%, rgba(0,0,0,0.844) 91.00%, rgba(0,0,0,0.741) 92.00%, rgba(0,0,0,0.624) 93.00%, rgba(0,0,0,0.500) 94.00%, rgba(0,0,0,0.376) 95.00%, rgba(0,0,0,0.259) 96.00%, rgba(0,0,0,0.156) 97.00%, rgba(0,0,0,0.074) 98.00%, rgba(0,0,0,0.020) 99.00%, rgba(0,0,0,0.000) 100.00%);
          mask-image: linear-gradient(to right, rgba(0,0,0,0.000) 0.00%, rgba(0,0,0,0.020) 1.00%, rgba(0,0,0,0.074) 2.00%, rgba(0,0,0,0.156) 3.00%, rgba(0,0,0,0.259) 4.00%, rgba(0,0,0,0.376) 5.00%, rgba(0,0,0,0.500) 6.00%, rgba(0,0,0,0.624) 7.00%, rgba(0,0,0,0.741) 8.00%, rgba(0,0,0,0.844) 9.00%, rgba(0,0,0,0.926) 10.00%, rgba(0,0,0,0.980) 11.00%, rgba(0,0,0,1.000) 12.00%, rgba(0,0,0,1.000) 88.00%, rgba(0,0,0,0.980) 89.00%, rgba(0,0,0,0.926) 90.00%, rgba(0,0,0,0.844) 91.00%, rgba(0,0,0,0.741) 92.00%, rgba(0,0,0,0.624) 93.00%, rgba(0,0,0,0.500) 94.00%, rgba(0,0,0,0.376) 95.00%, rgba(0,0,0,0.259) 96.00%, rgba(0,0,0,0.156) 97.00%, rgba(0,0,0,0.074) 98.00%, rgba(0,0,0,0.020) 99.00%, rgba(0,0,0,0.000) 100.00%);
}

/* 20/10 (comentário dela): os cards dos pilares da Insights tinham muito respiro no topo
   (os ícones ficaram menores e sobrou área vazia em cima). O topo encolhe ~30 px para
   ficar mais parecido com a base; o ícone mantém o tamanho (só sobe dentro do card) */
.ins-pillars .ins-pillar { padding-top: 22px; min-height: 0; }
.ins-pillars .ins-pillar__art { margin-top: -30px; }


/* 20/10 (comentário dela): a seção "Experiência" da BFM virou a seção do problema, no
   mesmo layout das outras páginas de produto (blocos .ins-pain*, como na Score): título e
   texto centralizados em cima; embaixo a palavra BFM na vertical, o celular (menor que o
   antigo) sobre o brilho verde e os 4 dados com as fontes à direita */
.bfm-pain2 .ins-pain__stage { height: 420px; }
.bfm-pain2 .ins-pain__word { left: 10px; top: 48px; width: 110px; height: 323px; }
.bfm-pain2 .ins-pain__glow { left: 165px; top: 50px; width: 300px; height: 300px; }
.bfm-pain2 .ins-pain__laptop { left: 180px; top: 6px; width: 272px; height: auto; }
.bfm-pain2 .ins-pain__facts { left: 550px; top: 0; height: 420px; width: 300px; }
.bfm-pain2 .ins-pain__list { gap: 26px; }
@media (max-width: 860px) {
  .bfm-pain2 .ins-pain__laptop { width: min(240px, 70%); margin: 0 auto; }
}

/* 20/10 (comentários dela): título e texto da seção do problema da BFM em uma linha só no
   desktop (no tablet e no celular quebram normalmente) */
@media (min-width: 861px) { .bfm-pain2 .bfm-pain2__sub { white-space: nowrap; } }
@media (min-width: 861px) { .bfm-pain2 .ins-wrap > .ins-title, .bfm-pain2 .ins-wrap > .ins-sub { margin-left: -220px; margin-right: -220px; max-width: none; } }

/* 20/10 (her request): Score hero on phones (≤ 600 px, js/score-line.js .is-phone): the
   line's hump is centred on the screen and the readout sits centred under the line, a
   gap proportional to the screen below it (--sc-gap, js); the digits are what is centred
   ("de 1000" + band hang to their right), so the count-up never shifts them */
@media (max-width: 600px) {
  .sc-hero .sc-line.is-phone .sc-line__right { left: 50%; top: calc(var(--peak, 55%) + var(--sc-gap, 26px)); transform: translateX(-50%); }
  .sc-hero .sc-line.is-phone .sc-line__above { display: block; position: relative; }
  .sc-hero .sc-line.is-phone .sc-line__score { min-width: 3ch; text-align: center; }
  /* the band makes the hero taller than its 640 px: room under the button for the scroll cue */
  .sc-hero.ins-hero { padding-bottom: 96px; }
  .sc-hero .sc-line.is-phone .sc-line__aside { position: absolute; left: calc(100% + .8rem); bottom: calc(var(--sl-num) * .06); transform: none; }
}

/* 20/10 (comentário dela): o número de cada passo alinhado à esquerda, junto com o título
   e o texto, nos três passos (antes, nos passos 1 e 3, ele ia para a borda direita) */
@media (min-width: 861px) {
  html body .exp-step:is(#passo-1, #passo-2, #passo-3) > .exp-wrap > .exp-num { justify-self: start; }
}

/* ===== 21/10 (her request) Teste Agora: bigger cards, one font size for every piece of
   information inside them, the step-1 text scanner and the step-2 swap
   (js/experimente.js). Only the highlight numbers (KPIs, score) stay larger. ===== */
.exp { --exp-fs: 14px; }
@media (min-width: 861px) {
  /* wider cards: the page column grows and the text column beside the card narrows a little */
  html body .exp-step:is(#passo-1, #passo-2, #passo-3) > .exp-wrap { max-width: 1280px; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); column-gap: 64px; }
  /* side margins that keep clear of the screen indicator on the left */
  html.fp-on body .exp-step:is(#passo-1, #passo-2, #passo-3) > .exp-wrap { width: calc(100% - 160px); }
  html body .exp-step#passo-2 > .exp-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
}
html body #passo-1 .exp-card { padding: 34px 40px; }
html body #passo-2 .exp-card { padding: 32px 38px; }
html body #passo-3 .exp-card { padding: 44px 44px; min-height: 360px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 860px) { html body :is(#passo-1, #passo-2, #passo-3) .exp-card { padding: 22px; min-height: 0; } }

/* the same size everywhere inside the cards */
html body :is(#passo-1, #passo-2, #passo-3) .exp-card :is(
  .exp-label, .exp-chip, .exp-raw__k, .exp-raw__v, .exp-status, .exp-scan__steps li,
  .exp-field dt, .exp-field dd, .exp-table__head, .exp-table table, .exp-table th, .exp-pill,
  .exp-kpi span, .exp-kpi small, .exp-panel h3, .exp-bar em, .exp-bar--net b, .exp-chart-sum,
  .exp-cats li, .exp-signals li, .exp-locked, .exp-gauge__of, .exp-gauge__band, .exp-attrs h3, .exp-attrs li
) { font-size: var(--exp-fs); }
html body #passo-1 .exp-result:empty::before { font-size: var(--exp-fs); }
html body :is(#passo-1, #passo-2, #passo-3) .exp-card :is(.exp-field dd, .exp-signals li, .exp-chart-sum, .exp-table td) { line-height: 1.45; }

/* step 1 */
html body #passo-1 .exp-chip { height: 36px; padding: 0 14px; }
html body #passo-1 .exp-result { min-height: 214px; }
html body #passo-1 .exp-field { padding: 9px 0; gap: 3px; }
html body #passo-1 .exp-scan__steps li { line-height: 1.35; }

/* step 2: KPIs on top, the chart (wider) beside the categories, the signals in two columns */
html body #passo-2 .exp-table { max-height: 380px; }
html body #passo-2 .exp-table th, html body #passo-2 .exp-table td { padding: 10px 14px; }
html body #passo-2 .exp-insights {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-areas: "kpis kpis" "chart cats" "sig sig";
}
html body #passo-2 .exp-kpis { grid-area: kpis; }
html body #passo-2 .exp-panels > .exp-panel:nth-child(1) { grid-area: chart; }
html body #passo-2 .exp-panels > .exp-panel:nth-child(2) { grid-area: cats; }
html body #passo-2 .exp-insights > .exp-panel { grid-area: sig; }
html body #passo-2 .exp-kpi { padding: 14px 16px; }
html body #passo-2 .exp-kpi strong { font-size: 26px; }
html body #passo-2 .exp-panel { padding: 16px 18px; }
html body #passo-2 .exp-panel h3 { margin-bottom: 12px; }
html body #passo-2 .exp-chart { min-height: 160px; gap: 10px; }
html body #passo-2 .exp-cats li { grid-template-columns: minmax(0, 1fr) 90px 40px; gap: 10px; }
html body #passo-2 .exp-cats { gap: 6px; }
html body #passo-2 .exp-signals { grid-template-columns: 1fr 1fr; gap: 8px; }
html body #passo-2 .exp-signals li { padding: 10px 12px 10px 34px; }
html body #passo-2 .exp-signals li::before { left: 13px; top: 10px; }
@media (max-width: 860px) {
  html body #passo-2 .exp-insights { grid-template-columns: 1fr; grid-template-areas: "kpis" "chart" "cats" "sig"; }
  html body #passo-2 .exp-signals { grid-template-columns: 1fr; }
}
/* the bars and category lines grow once the new card has landed (.is-grow), not while it drops */
html body #passo-2 .exp-insights.is-instant { transition: none; }
html body #passo-2 .exp-insights:not(.is-grow) .exp-bar span { transform: scaleY(0); }
html body #passo-2 .exp-insights:not(.is-grow) .exp-cats b::after { transform: scaleX(0); }

/* step 2 swap: the table card shrinks and fades, then the insights card drops in */
html body #passo-2 .exp-card { transform-origin: 50% 50%; }
html body #passo-2 .exp-card.is-swap-out {
  transform: scale(.9); opacity: 0; filter: blur(3px);
  transition: transform .48s cubic-bezier(.55, 0, .75, .3), opacity .42s cubic-bezier(.4, 0, 1, 1), filter .42s ease-in;
}
html body #passo-2 .exp-card.is-swap-in { box-sizing: border-box; will-change: transform, opacity; }

/* step 3: a larger gauge beside the factors */
@media (min-width: 861px) {
  html body #passo-3 .exp-score__body { grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: 40px; }
}
html body #passo-3 .exp-attrs li { grid-template-columns: minmax(0, 1fr) 120px 44px; padding: 8px 0; }
html body #passo-3 .exp-attrs h3 { margin-bottom: 14px; }

/* ---------- step 1: the scanner ---------- */
html body #passo-1 .exp-raw__field:not(.exp-raw__field--amt) { position: relative; overflow: hidden; padding-bottom: 32px; transition: border-color .4s, box-shadow .6s; }
html body #passo-1 .exp-raw__field > .exp-raw__k, html body #passo-1 .exp-raw__field > .exp-raw__v { position: relative; z-index: 1; }
#passo-1 .exp-raw__v .w { display: inline-block; white-space: nowrap; }
#passo-1 .exp-raw__v .c { display: inline-block; min-width: .2em; transition: color .3s, opacity .3s, text-shadow .4s; }
#passo-1 .exp-raw__field.is-scanning .exp-raw__v .c { opacity: .34; }
#passo-1 .exp-raw__v .c.is-hit { opacity: 1 !important; color: #fff; text-shadow: 0 0 4px #fff, 0 0 12px #50ea9a, 0 0 24px rgba(80,234,154,.7); transition: none; }
#passo-1 .exp-raw__v .c.is-read { opacity: 1 !important; color: #50ea9a; text-shadow: 0 0 10px rgba(80,234,154,.35); }
#passo-1 .exp-raw__v .w.is-tagged .c { color: #fff; text-shadow: 0 0 10px rgba(80,234,154,.75); }
#passo-1 .exp-raw__v .c.is-flash { color: #fff; text-shadow: 0 0 6px #fff, 0 0 16px rgba(255,255,255,.7); transition: none; }
/* layers: dotted grid lit around the beam, moving scanlines, the green wake, the beam */
#passo-1 .exp-scanfx { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .35s; }
#passo-1 .exp-raw__field.is-scanning .exp-scanfx, #passo-1 .exp-raw__field.is-confirm .exp-scanfx { opacity: 1; }
#passo-1 .exp-scanfx > i { position: absolute; inset: 0; display: block; }
#passo-1 .exp-scanfx__grid {
  background-image: radial-gradient(circle, rgba(80,234,154,.55) .9px, transparent 1.3px); background-size: 9px 9px;
  -webkit-mask-image: radial-gradient(110px 80px at var(--bx, -200px) 50%, #000, transparent 72%);
          mask-image: radial-gradient(110px 80px at var(--bx, -200px) 50%, #000, transparent 72%);
  opacity: .55;
}
#passo-1 .exp-scanfx__lines {
  background-image: repeating-linear-gradient(0deg, rgba(80,234,154,.13) 0 1px, transparent 1px 3px);
  -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--bx, -200px) - 180px), #000 calc(var(--bx, -200px) - 6px), transparent calc(var(--bx, -200px) + 26px));
          mask-image: linear-gradient(90deg, transparent calc(var(--bx, -200px) - 180px), #000 calc(var(--bx, -200px) - 6px), transparent calc(var(--bx, -200px) + 26px));
  animation: expScanLines .5s linear infinite;
}
@keyframes expScanLines { to { background-position: 0 3px; } }
#passo-1 .exp-scanfx__wake {
  background: linear-gradient(90deg, transparent calc(var(--bx, -200px) - 200px), rgba(80,234,154,.07) calc(var(--bx, -200px) - 90px), rgba(80,234,154,.2) calc(var(--bx, -200px) - 2px), transparent var(--bx, -200px));
}
#passo-1 .exp-scanfx > i.exp-scanfx__beam {
  inset: -12px auto -12px 0; width: 2px; transform: translateX(var(--bx, -200px));
  background: linear-gradient(180deg, transparent, #c9ffe3 18%, #fff 50%, #c9ffe3 82%, transparent);
  box-shadow: 0 0 4px #fff, 0 0 12px #50ea9a, 0 0 30px rgba(80,234,154,.75), 0 0 60px rgba(80,234,154,.35);
}
#passo-1 .exp-scanfx__beam b {
  position: absolute; top: 8%; bottom: 8%; left: -70px; width: 140px;
  background: radial-gradient(closest-side, rgba(80,234,154,.32), rgba(80,234,154,.08) 60%, transparent);
  filter: blur(4px);
}
#passo-1 .exp-scanfx__p {
  position: absolute; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: 50%;
  background: #d8ffe9; box-shadow: 0 0 6px #50ea9a, 0 0 12px rgba(80,234,154,.6);
  animation: expScanP .75s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes expScanP { from { transform: translate(0, 0) scale(var(--s, 1)); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; } }
/* the confirmation pass: a thin white beam back from right to left, then one glow on the field */
#passo-1 .exp-raw__field.is-confirm .exp-scanfx__grid,
#passo-1 .exp-raw__field.is-confirm .exp-scanfx__wake,
#passo-1 .exp-raw__field.is-confirm .exp-scanfx__beam b { opacity: 0; }
#passo-1 .exp-raw__field.is-confirm .exp-scanfx > i.exp-scanfx__beam { width: 1px; background: #fff; box-shadow: 0 0 6px #fff, 0 0 18px rgba(255,255,255,.55); }
html body #passo-1 .exp-raw__field.is-verified { border-color: rgba(80,234,154,.55); box-shadow: 0 0 0 1px rgba(80,234,154,.25), 0 0 26px rgba(80,234,154,.18), inset 0 0 22px rgba(80,234,154,.08); }
/* the recognised pieces: underline with end ticks, and a label */
#passo-1 .exp-tags { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
#passo-1 .exp-tag { position: absolute; height: 20px; }
#passo-1 .exp-tag i {
  position: relative; display: block; height: 2px; border-radius: 1px; background: #50ea9a;
  box-shadow: 0 0 8px rgba(80,234,154,.8); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .45s cubic-bezier(.65, 0, .35, 1);
}
#passo-1 .exp-tag i::before, #passo-1 .exp-tag i::after { content: ''; position: absolute; top: -4px; width: 2px; height: 6px; border-radius: 1px; background: inherit; }
#passo-1 .exp-tag i::before { left: 0; }
#passo-1 .exp-tag i::after { right: 0; }
#passo-1 .exp-tag em {
  position: absolute; left: 0; top: 6px; font-style: normal; font-size: 11px; font-weight: 700; line-height: 1.2;
  letter-spacing: .08em; text-transform: uppercase; color: #50ea9a; white-space: nowrap;
  opacity: 0; transform: translateY(-5px); filter: blur(2px);
  transition: opacity .3s .22s, transform .45s .22s cubic-bezier(.16, 1, .3, 1), filter .3s .22s;
}
#passo-1 .exp-tag.is-on i { transform: none; }
#passo-1 .exp-tag.is-on em { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  #passo-1 .exp-scanfx__lines, #passo-1 .exp-scanfx__p { animation: none; }
  #passo-1 .exp-tag i, #passo-1 .exp-tag em { transition: none; }
}

/* 21/10 (her request): step 3 gauge, the readout a little further below the arc */
html body #passo-3 .exp-gauge { padding-bottom: 18px; }
html body #passo-3 .exp-gauge__read { bottom: -2px; }

/* 21/10 (her request): the Score "Próximo passo" glass plates fade to black at both sides
   of the screen, with the same eased fade as the hero's line (12% of the width per side,
   no visible start line). Kept together with the left-to-right entrance mask (intersect) */
.sc-cta .sc-cta__glass {
  -webkit-mask-image: linear-gradient(to right, #000 calc(var(--sc-glass) - 14%), transparent var(--sc-glass)), linear-gradient(to right, rgba(0,0,0,0.000) 0.00%, rgba(0,0,0,0.020) 1.00%, rgba(0,0,0,0.074) 2.00%, rgba(0,0,0,0.156) 3.00%, rgba(0,0,0,0.259) 4.00%, rgba(0,0,0,0.376) 5.00%, rgba(0,0,0,0.500) 6.00%, rgba(0,0,0,0.624) 7.00%, rgba(0,0,0,0.741) 8.00%, rgba(0,0,0,0.844) 9.00%, rgba(0,0,0,0.926) 10.00%, rgba(0,0,0,0.980) 11.00%, rgba(0,0,0,1.000) 12.00%, rgba(0,0,0,1.000) 88.00%, rgba(0,0,0,0.980) 89.00%, rgba(0,0,0,0.926) 90.00%, rgba(0,0,0,0.844) 91.00%, rgba(0,0,0,0.741) 92.00%, rgba(0,0,0,0.624) 93.00%, rgba(0,0,0,0.500) 94.00%, rgba(0,0,0,0.376) 95.00%, rgba(0,0,0,0.259) 96.00%, rgba(0,0,0,0.156) 97.00%, rgba(0,0,0,0.074) 98.00%, rgba(0,0,0,0.020) 99.00%, rgba(0,0,0,0.000) 100.00%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, #000 calc(var(--sc-glass) - 14%), transparent var(--sc-glass)), linear-gradient(to right, rgba(0,0,0,0.000) 0.00%, rgba(0,0,0,0.020) 1.00%, rgba(0,0,0,0.074) 2.00%, rgba(0,0,0,0.156) 3.00%, rgba(0,0,0,0.259) 4.00%, rgba(0,0,0,0.376) 5.00%, rgba(0,0,0,0.500) 6.00%, rgba(0,0,0,0.624) 7.00%, rgba(0,0,0,0.741) 8.00%, rgba(0,0,0,0.844) 9.00%, rgba(0,0,0,0.926) 10.00%, rgba(0,0,0,0.980) 11.00%, rgba(0,0,0,1.000) 12.00%, rgba(0,0,0,1.000) 88.00%, rgba(0,0,0,0.980) 89.00%, rgba(0,0,0,0.926) 90.00%, rgba(0,0,0,0.844) 91.00%, rgba(0,0,0,0.741) 92.00%, rgba(0,0,0,0.624) 93.00%, rgba(0,0,0,0.500) 94.00%, rgba(0,0,0,0.376) 95.00%, rgba(0,0,0,0.259) 96.00%, rgba(0,0,0,0.156) 97.00%, rgba(0,0,0,0.074) 98.00%, rgba(0,0,0,0.020) 99.00%, rgba(0,0,0,0.000) 100.00%);
          mask-composite: intersect;
}

/* 21/10 (her request): the Score "Encontre oportunidades" line fades to black at both sides
   of the screen, the same eased fade as the hero line and the closing glass plates (12% of
   the width per side). The line's box is at least 1440px wide and centred, so on narrower
   screens it runs past the edges: the mask is one screen wide (100vw) and centred, which
   puts the fade on the screen's edges, not the box's */
.sc-score .sc-vec {
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.000) 0.00%, rgba(0,0,0,0.020) 1.00%, rgba(0,0,0,0.074) 2.00%, rgba(0,0,0,0.156) 3.00%, rgba(0,0,0,0.259) 4.00%, rgba(0,0,0,0.376) 5.00%, rgba(0,0,0,0.500) 6.00%, rgba(0,0,0,0.624) 7.00%, rgba(0,0,0,0.741) 8.00%, rgba(0,0,0,0.844) 9.00%, rgba(0,0,0,0.926) 10.00%, rgba(0,0,0,0.980) 11.00%, rgba(0,0,0,1.000) 12.00%, rgba(0,0,0,1.000) 88.00%, rgba(0,0,0,0.980) 89.00%, rgba(0,0,0,0.926) 90.00%, rgba(0,0,0,0.844) 91.00%, rgba(0,0,0,0.741) 92.00%, rgba(0,0,0,0.624) 93.00%, rgba(0,0,0,0.500) 94.00%, rgba(0,0,0,0.376) 95.00%, rgba(0,0,0,0.259) 96.00%, rgba(0,0,0,0.156) 97.00%, rgba(0,0,0,0.074) 98.00%, rgba(0,0,0,0.020) 99.00%, rgba(0,0,0,0.000) 100.00%);
          mask-image: linear-gradient(to right, rgba(0,0,0,0.000) 0.00%, rgba(0,0,0,0.020) 1.00%, rgba(0,0,0,0.074) 2.00%, rgba(0,0,0,0.156) 3.00%, rgba(0,0,0,0.259) 4.00%, rgba(0,0,0,0.376) 5.00%, rgba(0,0,0,0.500) 6.00%, rgba(0,0,0,0.624) 7.00%, rgba(0,0,0,0.741) 8.00%, rgba(0,0,0,0.844) 9.00%, rgba(0,0,0,0.926) 10.00%, rgba(0,0,0,0.980) 11.00%, rgba(0,0,0,1.000) 12.00%, rgba(0,0,0,1.000) 88.00%, rgba(0,0,0,0.980) 89.00%, rgba(0,0,0,0.926) 90.00%, rgba(0,0,0,0.844) 91.00%, rgba(0,0,0,0.741) 92.00%, rgba(0,0,0,0.624) 93.00%, rgba(0,0,0,0.500) 94.00%, rgba(0,0,0,0.376) 95.00%, rgba(0,0,0,0.259) 96.00%, rgba(0,0,0,0.156) 97.00%, rgba(0,0,0,0.074) 98.00%, rgba(0,0,0,0.020) 99.00%, rgba(0,0,0,0.000) 100.00%);
  -webkit-mask-size: 100vw 100%; mask-size: 100vw 100%;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* 21/10 (her request): the Insights hero animation fades to black on the left side only,
   where the single line comes in, eased (smoothstep). 21/10 (her comment): a slightly wider
   fade that starts darkening further in (17% of the width, was 12%) and is fully black a bit
   before the edge (the last 2.5%, was only at the edge itself) */
.ins-hero__bg:has(> #data-enrichment) {
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.000) 0%, rgba(0,0,0,0.000) 2.50%, rgba(0,0,0,0.015) 3.54%, rgba(0,0,0,0.055) 4.57%, rgba(0,0,0,0.118) 5.61%, rgba(0,0,0,0.198) 6.64%, rgba(0,0,0,0.292) 7.68%, rgba(0,0,0,0.394) 8.71%, rgba(0,0,0,0.500) 9.75%, rgba(0,0,0,0.606) 10.79%, rgba(0,0,0,0.708) 11.82%, rgba(0,0,0,0.802) 12.86%, rgba(0,0,0,0.882) 13.89%, rgba(0,0,0,0.945) 14.93%, rgba(0,0,0,0.985) 15.96%, rgba(0,0,0,1.000) 17.00%, #000 100%);
          mask-image: linear-gradient(to right, rgba(0,0,0,0.000) 0%, rgba(0,0,0,0.000) 2.50%, rgba(0,0,0,0.015) 3.54%, rgba(0,0,0,0.055) 4.57%, rgba(0,0,0,0.118) 5.61%, rgba(0,0,0,0.198) 6.64%, rgba(0,0,0,0.292) 7.68%, rgba(0,0,0,0.394) 8.71%, rgba(0,0,0,0.500) 9.75%, rgba(0,0,0,0.606) 10.79%, rgba(0,0,0,0.708) 11.82%, rgba(0,0,0,0.802) 12.86%, rgba(0,0,0,0.882) 13.89%, rgba(0,0,0,0.945) 14.93%, rgba(0,0,0,0.985) 15.96%, rgba(0,0,0,1.000) 17.00%, #000 100%);
}

/* 21/10 (her request): the Insights "Como funciona" neon line fades to black at both sides
   of the screen, the same eased fade as the other lines (12% of the width per side). Not a
   mask on the line: two page-black gradients laid OVER every layer of the line (the neon, its
   glow, the travelling pulse and its flare), under the numbers and texts, so whatever runs
   along the line is simply hidden at the edges (a mask had darkened the pulse's glow) */
.ins-steps__track::before, .ins-steps__track::after {
  content: ''; position: absolute; z-index: 1; top: calc(40.5px - 70px); height: 142px; width: 12%;
  pointer-events: none; background: linear-gradient(to right, rgba(0,0,0,1.000) 0.00%, rgba(0,0,0,0.980) 8.33%, rgba(0,0,0,0.926) 16.67%, rgba(0,0,0,0.844) 25.00%, rgba(0,0,0,0.741) 33.33%, rgba(0,0,0,0.624) 41.67%, rgba(0,0,0,0.500) 50.00%, rgba(0,0,0,0.376) 58.33%, rgba(0,0,0,0.259) 66.67%, rgba(0,0,0,0.156) 75.00%, rgba(0,0,0,0.074) 83.33%, rgba(0,0,0,0.020) 91.67%, rgba(0,0,0,0.000) 100.00%);
}
.ins-steps__track::before { left: 0; }
.ins-steps__track::after { right: 0; transform: scaleX(-1); }
.ins-steps__track .ins-steps__list { position: relative; z-index: 2; }
@media (max-width: 860px) { .ins-steps__track::before, .ins-steps__track::after { display: none; } }
/* 29/10: with two rows of steps (tablet/phone), one pair of these fades per line, made by
   js/insights.js and placed at each line's height; same gradient, same 12% width */
.ins-steps__fade {
  position: absolute; z-index: 1; height: 142px; width: 12%; pointer-events: none;
  background: linear-gradient(to right, rgba(0,0,0,1.000) 0.00%, rgba(0,0,0,0.980) 8.33%, rgba(0,0,0,0.926) 16.67%, rgba(0,0,0,0.844) 25.00%, rgba(0,0,0,0.741) 33.33%, rgba(0,0,0,0.624) 41.67%, rgba(0,0,0,0.500) 50.00%, rgba(0,0,0,0.376) 58.33%, rgba(0,0,0,0.259) 66.67%, rgba(0,0,0,0.156) 75.00%, rgba(0,0,0,0.074) 83.33%, rgba(0,0,0,0.020) 91.67%, rgba(0,0,0,0.000) 100.00%);
}
.ins-steps__fade--l { left: 0; }
.ins-steps__fade--r { right: 0; transform: scaleX(-1); }

/* 21/10 (performance): the laptop screen of the Insights is built from images instead of a
   video (js/ins-laptop.js): the sidebar, the Hub page that scrolls behind it, and the notch
   and rounded corners on top, in the 800 x 500 box the video had */
.ins-laptop__screen.ins-hub { overflow: hidden; background: #fff; }
.ins-hub > img, .ins-hub__view { position: absolute; display: block; }
.ins-hub__side { left: 0; top: 0; width: 150px; height: 500px; z-index: 1; }
.ins-hub__view { left: 150px; top: 0; width: 650px; height: 500px; overflow: hidden; }
.ins-hub__tall { display: block; width: 650px; height: auto; max-width: none; will-change: transform; }
.ins-hub__mask { left: 0; top: 0; width: 800px; height: 500px; z-index: 2; }

/* 21/10 (her request): the Insights closing animation fades to black at both sides of the
   screen, the same eased fade as the other lines (12% of the width per side). A page-black
   layer laid OVER the animation and its vignette/grain layers, under the copy and the button */
.ins-cta:has(> #data-convergence)::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(to right, rgba(0,0,0,1.000) 0.00%, rgba(0,0,0,0.980) 8.33%, rgba(0,0,0,0.926) 16.67%, rgba(0,0,0,0.844) 25.00%, rgba(0,0,0,0.741) 33.33%, rgba(0,0,0,0.624) 41.67%, rgba(0,0,0,0.500) 50.00%, rgba(0,0,0,0.376) 58.33%, rgba(0,0,0,0.259) 66.67%, rgba(0,0,0,0.156) 75.00%, rgba(0,0,0,0.074) 83.33%, rgba(0,0,0,0.020) 91.67%, rgba(0,0,0,0.000) 100.00%) left top / 12% 100% no-repeat,
    linear-gradient(to right, rgba(0,0,0,0.000) 0.00%, rgba(0,0,0,0.020) 8.33%, rgba(0,0,0,0.074) 16.67%, rgba(0,0,0,0.156) 25.00%, rgba(0,0,0,0.259) 33.33%, rgba(0,0,0,0.376) 41.67%, rgba(0,0,0,0.500) 50.00%, rgba(0,0,0,0.624) 58.33%, rgba(0,0,0,0.741) 66.67%, rgba(0,0,0,0.844) 75.00%, rgba(0,0,0,0.926) 83.33%, rgba(0,0,0,0.980) 91.67%, rgba(0,0,0,1.000) 100.00%) right top / 12% 100% no-repeat;
}
/* 21/10 (her follow-up): the icon back beside the text; icon and text move up together
   10px inside the card (10px off the top padding, 10px onto the bottom, so the card keeps
   its size), centring the block in the card */
@media (min-width: 861px) {
  .sc-score .sc-card { padding-top: 24px; padding-bottom: 34px; }
}
/* 21/10 (her request): the timeline's dashed line fades to black at both sides of the
   screen, eased (smoothstep). 21/10 (her follow-up): a wider fade for this section only,
   18% of the width per side (was 12%, like the other sections), so it darkens sooner
   (the line is 100vw wide, so the percentages are of the window) */
.inst-tl__line {
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.000) 0.00%, rgba(0,0,0,0.009) 1.00%, rgba(0,0,0,0.034) 2.00%, rgba(0,0,0,0.074) 3.00%, rgba(0,0,0,0.126) 4.00%, rgba(0,0,0,0.189) 5.00%, rgba(0,0,0,0.259) 6.00%, rgba(0,0,0,0.336) 7.00%, rgba(0,0,0,0.417) 8.00%, rgba(0,0,0,0.500) 9.00%, rgba(0,0,0,0.583) 10.00%, rgba(0,0,0,0.664) 11.00%, rgba(0,0,0,0.741) 12.00%, rgba(0,0,0,0.811) 13.00%, rgba(0,0,0,0.874) 14.00%, rgba(0,0,0,0.926) 15.00%, rgba(0,0,0,0.966) 16.00%, rgba(0,0,0,0.991) 17.00%, rgba(0,0,0,1.000) 18.00%, rgba(0,0,0,1.000) 82.00%, rgba(0,0,0,0.991) 83.00%, rgba(0,0,0,0.966) 84.00%, rgba(0,0,0,0.926) 85.00%, rgba(0,0,0,0.874) 86.00%, rgba(0,0,0,0.811) 87.00%, rgba(0,0,0,0.741) 88.00%, rgba(0,0,0,0.664) 89.00%, rgba(0,0,0,0.583) 90.00%, rgba(0,0,0,0.500) 91.00%, rgba(0,0,0,0.417) 92.00%, rgba(0,0,0,0.336) 93.00%, rgba(0,0,0,0.259) 94.00%, rgba(0,0,0,0.189) 95.00%, rgba(0,0,0,0.126) 96.00%, rgba(0,0,0,0.074) 97.00%, rgba(0,0,0,0.034) 98.00%, rgba(0,0,0,0.009) 99.00%, rgba(0,0,0,0.000) 100.00%);
          mask-image: linear-gradient(to right, rgba(0,0,0,0.000) 0.00%, rgba(0,0,0,0.009) 1.00%, rgba(0,0,0,0.034) 2.00%, rgba(0,0,0,0.074) 3.00%, rgba(0,0,0,0.126) 4.00%, rgba(0,0,0,0.189) 5.00%, rgba(0,0,0,0.259) 6.00%, rgba(0,0,0,0.336) 7.00%, rgba(0,0,0,0.417) 8.00%, rgba(0,0,0,0.500) 9.00%, rgba(0,0,0,0.583) 10.00%, rgba(0,0,0,0.664) 11.00%, rgba(0,0,0,0.741) 12.00%, rgba(0,0,0,0.811) 13.00%, rgba(0,0,0,0.874) 14.00%, rgba(0,0,0,0.926) 15.00%, rgba(0,0,0,0.966) 16.00%, rgba(0,0,0,0.991) 17.00%, rgba(0,0,0,1.000) 18.00%, rgba(0,0,0,1.000) 82.00%, rgba(0,0,0,0.991) 83.00%, rgba(0,0,0,0.966) 84.00%, rgba(0,0,0,0.926) 85.00%, rgba(0,0,0,0.874) 86.00%, rgba(0,0,0,0.811) 87.00%, rgba(0,0,0,0.741) 88.00%, rgba(0,0,0,0.664) 89.00%, rgba(0,0,0,0.583) 90.00%, rgba(0,0,0,0.500) 91.00%, rgba(0,0,0,0.417) 92.00%, rgba(0,0,0,0.336) 93.00%, rgba(0,0,0,0.259) 94.00%, rgba(0,0,0,0.189) 95.00%, rgba(0,0,0,0.126) 96.00%, rgba(0,0,0,0.074) 97.00%, rgba(0,0,0,0.034) 98.00%, rgba(0,0,0,0.009) 99.00%, rgba(0,0,0,0.000) 100.00%);
}

/* 21/10 (her request): the BFM benefit cards' icons are now the site's green 3D scanline
   icons (js/icons3d.js), one canvas per card; it overflows the 92px icon row evenly
   above and below, so the titles and texts stay where they were */
.bfm-card__art { display: block; flex-shrink: 0; width: 210px; height: 150px; will-change: transform; transform: translateZ(0); }
.bfm-card__art.is-fallback { width: 56px; height: 56px; border-radius: 50%; border: 1px dashed rgba(98, 236, 164, .45); background: radial-gradient(circle, rgba(98, 236, 164, .14), transparent 70%); }

/* 22/10 (comentário dela): como nas outras páginas de produto, a palavra BFM fica levemente
   por trás do mockup (o celular cobre a beirada direita dela); celular e brilho chegaram um
   pouco para a esquerda para a composição continuar centrada */
@media (min-width: 861px) {
  .bfm-pain2 .ins-pain__word { left: 52px; }
  .bfm-pain2 .ins-pain__glow { left: 125px; }
  .bfm-pain2 .ins-pain__laptop { left: 140px; }
}

/* 22/10 (comentário dela): os 4 cards do topo dos insights mais baixos, para o box inteiro
   encolher um pouco: menos respiro interno e entrelinhas mais justas (o texto não muda) */
html body #passo-2 .exp-kpis { gap: 10px; }
html body #passo-2 .exp-kpi { padding: 11px 14px 12px; }
html body #passo-2 .exp-kpi strong { font-size: 24px; line-height: 1.1; }
html body #passo-2 .exp-kpi span { margin-top: 5px; line-height: 1.3; }
html body #passo-2 .exp-kpi small { margin-top: 3px; line-height: 1.3; }

/* 22/10 (comentário dela): convite na frente da névoa interativa. Fica no centro da área da
   névoa (mesmo recorte de .exp-fog), não pega o mouse e some enquanto o cursor está sobre a
   névoa (.is-fog-on, js/hero-fog.js); volta quando ele sai */
.exp-fog-hint {
  position: absolute; z-index: 1; pointer-events: none;
  top: calc(var(--header-h) + 24px); bottom: 16px;
  left: calc(max(24px, calc(26.5vw - 293px)) + 400px); right: 12px;
  display: grid; place-items: center;
  transition: opacity .5s ease, transform .5s ease;
}
.exp-fog-hint__box { animation: fadeUp .8s var(--ease) .6s both; }
.exp-hero.is-fog-on .exp-fog-hint { opacity: 0; transform: scale(.96); }
.exp-fog-hint__box {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px; border-radius: 3px;
  background: rgba(0, 0, 0, .55); border: 1px solid rgba(80, 234, 154, .35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 0 28px rgba(80, 234, 154, .12);
}
.exp-fog-hint__mouse { flex: none; fill: none; stroke: #50ea9a; stroke-width: 1.8; }
.exp-fog-hint__wheel { stroke-linecap: round; stroke-width: 2.4; animation: expFogWheel 1.6s ease-in-out infinite; }
@keyframes expFogWheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(6px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
.exp-fog-hint p { margin: 0; font-size: 14px; line-height: 1.4; color: #cfd6d2; max-width: 260px; }
.exp-fog-hint strong { display: block; color: #fff; font-size: 15px; font-weight: 700; }
@media (max-width: 860px) { .exp-fog-hint { display: none; } }
@media (hover: none), (pointer: coarse) { .exp-fog-hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .exp-fog-hint__box, .exp-fog-hint__wheel { animation: none; } }

/* 22/10 (her request): better line breaks in the timeline milestones. The text column ran
   only from the column's left edge to the icon (~137px), so titles broke in two and the texts
   took 5-6 short lines. It now starts further left, up to 14px from the previous milestone's
   icon (that icon's right edge is 28% - 17px into the previous column, + the 24px gap), and
   both title and text are balanced */
@media (min-width: 861px) {
  .inst-tl__text { left: calc(7px - 28%); }
  .inst-tl__text h3 { white-space: nowrap; }
  .inst-tl__text p { text-wrap: balance; }
}

/* 22/10 (her request): 404 page (404.html). One full screen, centred: the "404" drawn as a
   green neon outline on the site's dashed timeline line (it stops at the digits and fades to
   black at both sides like the other lines), then the title, a short text and the button
   home (22/10: the product links came out, her comment). Fade-up entrance; still with reduced motion */
.e404__stage {
  position: relative; min-height: 100vh; min-height: 100svh; box-sizing: border-box;
  padding: calc(var(--header-h) + 48px) 24px 72px; overflow-x: clip;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.e404__code {
  position: relative; display: inline-block; margin: 0; font-size: clamp(120px, 22vw, 280px); line-height: .9; font-weight: 700;
  letter-spacing: .02em; color: transparent; -webkit-text-stroke: 1.5px #62ECA4;
  text-shadow: 0 0 18px rgba(98, 236, 164, .35), 0 0 60px rgba(98, 236, 164, .15);
  padding: 0 .12em;
}
/* the dashed line, in two halves that stop at the digits (mid-height of the number) */
.e404__code::before, .e404__code::after {
  content: ""; position: absolute; top: 52%; width: 50vw; height: 1px; pointer-events: none;
  background: repeating-linear-gradient(to right, #6f6f6f 0 5px, transparent 5px 10px);
}
.e404__code::before { right: 100%; -webkit-mask-image: linear-gradient(to right, transparent, #000 40%); mask-image: linear-gradient(to right, transparent, #000 40%); }
.e404__code::after { left: 100%; -webkit-mask-image: linear-gradient(to left, transparent, #000 40%); mask-image: linear-gradient(to left, transparent, #000 40%); }
.e404__title { margin: 36px 0 0; font-size: 40px; line-height: 1.2; font-weight: 700; }
.e404__lead { margin: 16px 0 0; max-width: 520px; font-size: 16px; line-height: 1.6; color: #bdbdbd; text-wrap: balance; }
.e404 .glow-button { margin-top: 36px; }
@keyframes e404In { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.e404__mark, .e404__title, .e404__lead, .e404 .glow-button { animation: e404In .9s cubic-bezier(.2, .8, .2, 1) both; }
.e404__title { animation-delay: .12s; }
.e404__lead { animation-delay: .2s; }
.e404 .glow-button { animation-delay: .28s; }
@media (prefers-reduced-motion: reduce) { .e404__mark, .e404__title, .e404__lead, .e404 .glow-button { animation: none; } }
@media (max-width: 600px) { .e404__title { font-size: 30px; } }
/* 22/10 (her comment): the "404" is now a 3D model in the icons' animated style (js/icons3d.js,
   model "e404": scanlines, CRT, turns with the mouse, entrance turn on load) in a 2:1 canvas.
   The outlined text stays only as the no-WebGL fallback. The dashed line now hangs off the
   canvas box and stops where the digits start (they fill ~70% of its width) */
.e404__mark { position: relative; width: min(640px, 86vw); aspect-ratio: 2 / 1; }
.e404__art { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; }
.e404__mark .e404__code { display: none; }
.e404__mark:has(.e404__art.is-fallback) .e404__code { display: block; position: absolute; inset: 0; margin: auto; height: max-content; }
.e404__mark:has(.e404__art.is-fallback) .e404__code::before, .e404__mark:has(.e404__art.is-fallback) .e404__code::after { display: none; }
.e404__mark::before, .e404__mark::after {
  content: ""; position: absolute; top: 50%; width: 50vw; height: 1px; pointer-events: none;
  background: repeating-linear-gradient(to right, #6f6f6f 0 5px, transparent 5px 10px);
}
.e404__mark::before { right: 85%; -webkit-mask-image: linear-gradient(to right, transparent, #000 40%); mask-image: linear-gradient(to right, transparent, #000 40%); }
.e404__mark::after { left: 85%; -webkit-mask-image: linear-gradient(to left, transparent, #000 40%); mask-image: linear-gradient(to left, transparent, #000 40%); }
.e404__title { margin-top: 4px; }

/* 22/10 (comentário dela): as respostas do FAQ ocupam toda a largura do card. O
   text-wrap: balance geral dos parágrafos (styles.css) encolhia cada linha para deixar
   todas do mesmo tamanho; aqui elas vão até o fim e só evitam palavra sozinha no fim */
.faq-item p { text-wrap: pretty; }

/* 23/10 (her comment: the press hub was too busy): the brand kit is just its three download
   buttons now (the logo plates and the colour swatches came out). The boilerplate gets more
   room; the buttons stack in their column, the last one level with "Copiar texto". */
.pr-top { grid-template-columns: 1.45fr 1fr; }
.pr-kit__dl { flex-direction: column; align-items: flex-start; gap: 12px; }
@media (max-width: 860px) { .pr-top { grid-template-columns: 1fr; } }
/* 23/10 (her comment): the brand kit's three buttons sit next to "Copiar texto" and its
   column (and the "Kit de marca" title) is gone; the boilerplate takes the whole width,
   the contact goes to the end of the button row, and the news carousel gets more room
   (taller pictures, slightly bigger titles, closer to the text above). */
.pr-top { grid-template-columns: 1fr; }
.pr .pr-about { padding-right: 0; }
.pr .pr-actions { gap: 12px; flex-wrap: wrap; }
.pr-actions .pr-contact { margin-left: auto; }
.pr-media { margin-top: 30px; padding-top: 22px; }
.pr-news__img { aspect-ratio: 16 / 8.5; }
.pr-news__title { font-size: 15px; }
@media (max-width: 860px) { .pr-actions .pr-contact { margin-left: 0; } }
/* 23/10 (her comment: a thin broken line at the side of the news pictures): the picture was
   a repeating background under a 1px border, so with fractional card widths a hairline of
   its opposite edge (and the border) showed at the side. Now the picture is drawn by a
   layer slightly larger than the tile, never repeats, and the tile has no border. */
.pr-news__img.has-img { position: relative; overflow: hidden; border: 0; background-size: 0 0; background-repeat: no-repeat; }
.pr-news__img.has-img::before {
  content: ''; position: absolute; inset: -2px;
  background-image: inherit; background-size: cover; background-repeat: no-repeat; background-position: center;
}
/* 26/10 (her comment: the text didn't fill the card): the line breaks were balanced, so the
   lines came out short and left an empty band on the right. Now the title is a little bigger,
   the sentence wraps normally under it (2 lines as wide as the title) and the padding is even */
.exp-fog-hint__box { gap: 14px; padding: 14px 18px 14px 16px; }
.exp-fog-hint p { width: min-content; max-width: none; font-size: 14px; line-height: 1.45; text-wrap: pretty; }   /* as wide as the title (nowrap) */
.exp-fog-hint strong { font-size: 16.5px; line-height: 1.3; margin-bottom: 3px; white-space: nowrap; }
/* 27/10 (her request): a button to the page's FAQ on each product page, where the doubts the
   FAQ answers come up (Insights: after the four steps; Score: after the cards of "O Score";
   BFM: after the carousel for the institution). The site's small secondary button, centred;
   the link (#faq) is taken to the FAQ screen by js/fullpage.js */
.faq-jump { position: relative; z-index: 2; display: flex; justify-content: center; margin-top: 40px; }
.ins-steps .faq-jump { margin-top: 80px; }   /* 27/10 (her print): further from the steps (was 48) */