/* ============================================================
   UPTEC ELEVADORES - theme.css
   Direction: "Engineered Light" - clean premium light-dominant,
   warm gold accents + opaque navy drama sections.
   Body fonts: Montserrat. Display: Montserrat. Mono: DM Mono.
   ============================================================ */

/* === inlined Tailwind utilities === */
/* Replaces Tailwind Play CDN. Map: max-w-shell=1240px, font-body=Montserrat,
   font-display=Montserrat, font-mono=DM Mono.
   Colors are CSS vars already defined below in :root.               */

/* Layout / spacing */
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-shell { max-width: 1240px; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.w-full { width: 100%; }
.w-auto { width: auto; }

/* Flexbox helpers */
.inline-flex { display: inline-flex; }
.justify-center { justify-content: center; }
.items-center { align-items: center; }

/* Height utilities */
.h-8  { height: 2rem; }
.h-10 { height: 2.5rem; }
.h-auto { height: auto; }

/* Typography */
.font-body    { font-family: "Montserrat", system-ui, sans-serif; }
.font-display { font-family: "Montserrat", system-ui, sans-serif; }
.font-mono    { font-family: "DM Mono", ui-monospace, monospace; }
.antialiased  { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Responsive: lg: prefix (min-width 1024px) */
@media (min-width: 1024px) {
  .lg\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
}
/* === end inlined Tailwind utilities === */

:root {
  --c-bg: #f6f2e9;
  --c-surface: var(--c-white);
  --c-surface-2: #f0ece2;
  --c-line: rgba(22, 22, 22, 0.10);
  --c-line-strong: rgba(22, 22, 22, 0.16);
  --c-gold: #d8b15a;
  --c-gold-soft: #e7cd92;
  --c-gold-deep: #b8923f;
  --c-orange: #f97316;
  --c-glow: #2554c7;
  --c-white: #ffffff;
  --c-text: rgba(22, 22, 22, 0.68);
  --c-text-dim: rgba(22, 22, 22, 0.52);

  /* warm light break surfaces + near-black ink */
  --c-cream: #edeae0;
  --c-cream-2: #f9f6ef;
  --c-ink: #161616;
  --c-ink-dim: #4a463e;
  --c-ink-faint: #6b665b;
  --c-light-line: rgba(22, 22, 22, 0.12);
  --c-light-line-strong: rgba(22, 22, 22, 0.18);

  /* navy tokens for drama sections + gold-ink for legibility on light */
  --c-navy: #070b18;
  --c-navy-surface: #0b1226;
  --c-navy-surface-2: #111a31;
  --c-gold-ink: #8a6a1e;

  --shell: 1240px;
  --nav-h: 86px;

  /* Sombras consolidadas (era: 43 box-shadow distintos sem escala) */
  --shadow-card:       0 4px 24px -8px rgba(22, 22, 22, 0.10), 0 1px 4px rgba(22, 22, 22, 0.06);
  --shadow-card-hover: 0 22px 50px -22px rgba(0, 0, 0, 0.55), 0 0 38px -10px rgba(216, 177, 90, 0.30);
  --shadow-modal:      0 50px 120px -30px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.03);

  /* Alphas douradas consolidadas (era: 33 valores de rgba(216,177,90,X) sem escala) */
  --gold-a-fill:         0.10;
  --gold-a-border:       0.30;
  --gold-a-border-hover: 0.35;
  --gold-a-glow:         0.15;
}

/* ---------------------------------------------------------------
   BASE
   --------------------------------------------------------------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-size: 87.5%; }
/* prefers-reduced-motion: scroll-behavior is the only safe concession (not an animation) */

html, body { margin: 0; padding: 0; }

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.modal-open,
body.drawer-open { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: "Montserrat", system-ui, sans-serif;
  color: var(--c-ink);
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.03em;
  line-height: 1.04;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

::selection { background: rgba(184, 146, 63, 0.25); color: var(--c-ink); }

.skip-to-content {
  position: fixed; top: -100px; left: 16px; z-index: 1000;
  background: var(--c-gold); color: #1a1205; padding: 10px 18px;
  border-radius: var(--radius); font-weight: 700; transition: top var(--dur-base) var(--ease-out);
}
.skip-to-content:focus { top: 16px; }

:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------------
   SPA PAGES (multi-page routing)
   Only the active page is shown. JS toggles .is-active; CSS keeps a
   sane default so the home page shows even before JS runs.
   --------------------------------------------------------------- */
.page { display: none; }
.page.is-active { display: block; }
/* No-JS / pre-JS fallback: show the first page (home) */
.no-js #page-home,
html:not(.js-ready) #page-home { display: block; }

/* ---------------------------------------------------------------
   PANEL SYSTEM - alternating dark <-> light color breaks
   Dark panels let the fixed cinematic bg show; light panels cover it
   with warm cream and flip text to near-black ink.
   --------------------------------------------------------------- */
.panel { position: relative; }
.panel--dark { background: var(--c-navy); color: rgba(255, 255, 255, 0.70); }

.panel--dark h1, .panel--dark h2, .panel--dark h3, .panel--dark h4,
.panel--dark .section-title { color: var(--c-white); }
.panel--dark .section-head__note { color: rgba(255, 255, 255, 0.70); }

/* Drama sections keep texture via ::before mesh (::after is the seam) */
.panel--dark::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 78% 8%, rgba(37, 84, 199, 0.16), transparent 60%),
    radial-gradient(55% 45% at 12% 22%, rgba(216, 177, 90, 0.07), transparent 55%),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: auto, auto, 64px 64px, 64px 64px;
}
.panel--dark > * { position: relative; z-index: 1; }

.panel--light {
  background: var(--c-cream);
  color: var(--c-ink);
  isolation: isolate;
  --shadow-card-hover: 0 16px 40px -16px rgba(22, 22, 22, 0.15), 0 0 20px -6px rgba(184, 146, 63, 0.20);
}
/* subtle warm gradient + faint blueprint grid so light is not flat */
.panel--light::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% -10%, var(--c-cream-2) 0%, var(--c-cream) 55%),
    linear-gradient(rgba(22, 22, 22, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 22, 22, 0.022) 1px, transparent 1px);
  background-size: auto, 64px 64px, 64px 64px;
}
.panel--light > * { position: relative; z-index: 1; }

/* clean, intentional gold seam between adjacent dark/light panels
   (uses ::after so it never clashes with the light grid ::before) -
   replaces the old glitchy hairlines */
.panel--light + .panel--dark::after,
.panel--dark + .panel--light::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(216, 177, 90, 0.55), transparent);
  pointer-events: none;
}

/* ---- text + primitives flipped on light panels ---- */
.panel--light h1, .panel--light h2, .panel--light h3, .panel--light h4 { color: var(--c-ink); }
.panel--light .section-title { color: var(--c-ink); }
.panel--light .section-head__note { color: var(--c-ink-dim); }
.panel--light .kicker { color: var(--c-gold-deep); }
.panel--light .kicker-tick { background: var(--c-gold-deep); box-shadow: none; }
.panel--light .kicker-sep { color: rgba(184, 146, 63, 0.55); }
.panel--light .hero__gold { background: linear-gradient(100deg, var(--c-gold-deep), #caa24e); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* ---------------------------------------------------------------
   REVEAL ON SCROLL (default-hidden, .in-view plays it)
   Failsafe: if JS never adds .js-ready, content stays fully visible.
   --------------------------------------------------------------- */
html.js-ready [data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}
html.js-ready [data-reveal].in-view {
  opacity: 1;
  transform: none;
}
/* ALWAYS-ON: reduced-motion no longer bypasses reveals (removed override) */

/* ---------------------------------------------------------------
   LOAD ENTRANCE ANIMATION
   html.js-loading hides the nav pill and hero elements while GSAP
   sets up the entrance timeline. Removed by JS once the animation
   starts (or after 1.5s failsafe). No transition here: GSAP controls
   everything via gsap.set + gsap.to.
   Failsafe: prefers-reduced-motion => class never applied.
   --------------------------------------------------------------- */
html.js-loading .site-nav__pill { opacity: 0; }
html.js-loading .hero__kicker,
html.js-loading .hero__title,
html.js-loading .hero__lead,
html.js-loading .hero__actions,
html.js-loading .hero__facts  { opacity: 0; }

/* ---------------------------------------------------------------
   LAYERED CINEMATIC BACKGROUND
   radial mesh + blueprint grid + grain so dark is never flat
   --------------------------------------------------------------- */
.site-bg {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: var(--c-bg);
}
.site-bg__mesh {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 78% 8%, rgba(216, 177, 90, 0.06), transparent 60%),
    radial-gradient(55% 45% at 12% 22%, rgba(184, 146, 63, 0.04), transparent 55%),
    radial-gradient(70% 60% at 50% 110%, rgba(216, 177, 90, 0.04), transparent 60%);
}
.site-bg__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(22, 22, 22, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 22, 22, 0.022) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 88%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 88%);
}
.site-bg__grain {
  position: absolute; inset: 0; opacity: 0.05; mix-blend-mode: multiply;
  filter: url(#grainFilter);
  /* fallback noise via data-uri so grain shows even without filter */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------
   SCROLL PROGRESS BAR (gold)
   --------------------------------------------------------------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 120;
  background: rgba(22, 22, 22, 0.08);
}
.scroll-progress span {
  display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--c-gold), var(--c-gold-soft));
  box-shadow: 0 0 12px rgba(216, 177, 90, 0.6);
}

/* ---------------------------------------------------------------
   SHARED PRIMITIVES
   --------------------------------------------------------------- */
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--c-gold-deep); font-weight: 500;
}
.panel--dark .kicker { color: var(--c-gold); }
.kicker-tick {
  width: 26px; height: 1px; background: var(--c-gold); display: inline-block;
  box-shadow: 0 0 8px rgba(216, 177, 90, 0.5);
}
.kicker-sep { color: rgba(216, 177, 90, 0.45); }

.section {
  position: relative;
  padding: clamp(2.75rem, 5.5vw, 5rem) 0;
}
.section-head { max-width: 760px; margin-bottom: clamp(1.75rem, 3.5vw, 2.8rem); }
.section-title {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.55rem, 3vw, 2.5rem);
  margin-top: 0.85rem;
  letter-spacing: -0.03em;
  line-height: 1.0;
}
.section-head--split {
  display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 2.5rem;
  align-items: end; max-width: none;
}
.section-head__note {
  color: var(--c-text); font-size: 1.0625rem; max-width: 46ch;
  padding-bottom: 0.4rem; line-height: 1.7;
}
.section-head__note--full { margin-top: 1.5rem; max-width: 70ch; }

/* ---------------------------------------------------------------
   BUTTONS
   --------------------------------------------------------------- */
.btn-gold, .btn-ghost, .btn-emergency {
  position: relative; display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: "Montserrat", system-ui, sans-serif; font-weight: 500;
  font-size: 0.9rem; line-height: 1; cursor: pointer;
  padding: 0.7rem 1.2rem; border-radius: var(--radius);
  border: 1px solid transparent;
  transition: color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out);
  white-space: nowrap; text-align: center;
}
.btn-gold svg, .btn-ghost svg, .btn-emergency svg { width: 1.05em; height: 1.05em; }
.btn-gold svg [stroke], .btn-ghost svg [stroke] { stroke: currentColor; }

/* one standout primary per section keeps the slightly larger size */
.btn-lg { padding: 0.95rem 1.6rem; font-size: 0.98rem; }
.btn-sm { padding: 0.55rem 0.95rem; font-size: 0.82rem; }

/* GOLD - primary */
.btn-gold {
  color: #1a1205;
  background: linear-gradient(180deg, var(--c-gold-soft), var(--c-gold));
  border-color: rgba(216, 177, 90, 0.5);
  box-shadow: 0 8px 24px -10px rgba(216, 177, 90, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.btn-gold:hover {
  box-shadow: 0 14px 38px -12px rgba(216, 177, 90, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transform: translateY(-1px);
  filter: brightness(1.04);
}
.btn-gold:active { transform: translateY(0); }

/* GHOST - outline (adapts to dark/light) */
.btn-ghost {
  color: var(--c-white); background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.22);
}
.btn-ghost:hover {
  border-color: rgba(216, 177, 90, 0.6); color: var(--c-gold-soft);
  background: rgba(216, 177, 90, 0.06);
}
.panel--light .btn-ghost { color: var(--c-ink); background: rgba(22, 22, 22, 0.015); border-color: rgba(22, 22, 22, 0.22); }
.panel--light .btn-ghost:hover { color: var(--c-gold-deep); border-color: var(--c-gold-deep); background: rgba(184, 146, 63, 0.07); }

/* EMERGENCY - DISCREET: thin orange outline + tiny pulsing dot
   (intentionally NOT a big filled flashy orange block) */
.btn-emergency {
  color: var(--c-orange);
  background: rgba(249, 115, 22, 0.05);
  border-color: rgba(249, 115, 22, 0.55);
  border-width: 1px;
  box-shadow: none;
  font-weight: 600;
}
.btn-emergency:hover {
  background: rgba(249, 115, 22, 0.12);
  border-color: var(--c-orange);
  color: #fb8a3c;
  transform: translateY(-1px);
}
.panel--light .btn-emergency { color: #d8600a; background: rgba(249, 115, 22, 0.06); border-color: rgba(249, 115, 22, 0.5); }
.emergency-dot {
  width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--c-orange);
  box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.7);
  animation: pulse-orange 2s infinite; flex-shrink: 0;
}
@keyframes pulse-orange {
  0% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.6); }
  70% { box-shadow: 0 0 0 6px rgba(249, 115, 22, 0); }
  100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
}
@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
  70% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: "DM Mono", ui-monospace, monospace; font-size: 0.8rem; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--c-gold-deep); font-weight: 500;
  background: none; border: none; padding: 0; cursor: pointer;
  transition: gap var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.link-arrow svg { width: 14px; height: 14px; }
.link-arrow svg [stroke] { stroke: currentColor; }
.link-arrow:hover { gap: 0.85rem; color: var(--c-gold-soft); }
.panel--dark .link-arrow { color: var(--c-gold); }
.link-arrow--orange { color: #fb8a3c; }
.link-arrow--orange:hover { color: var(--c-orange); }

/* ---------------------------------------------------------------
   NAV - technological floating translucent pill
   Centered, backdrop blur, shrinks + solidifies on scroll, with a
   pulsing gold "Plantao 24h" micro-label.
   --------------------------------------------------------------- */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: center;
  padding: 1.1rem 1rem 0;
  transition: padding var(--dur-slow) var(--ease-out);
  pointer-events: none;
}
.site-nav__pill {
  pointer-events: auto;
  display: flex; align-items: center; gap: 1.25rem;
  width: 100%; max-width: var(--shell);
  padding: 0.55rem 0.7rem 0.55rem 1rem;
  border-radius: var(--radius-md);
  background: rgba(9, 14, 28, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 12px 40px -18px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: background var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out), padding var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.site-nav.is-solid { padding-top: 0.72rem; }
.site-nav.is-solid .site-nav__pill {
  background: rgba(9, 14, 28, 0.60); backdrop-filter: blur(16px) saturate(1.18); -webkit-backdrop-filter: blur(16px) saturate(1.18);
  border-color: rgba(216, 177, 90, 0.22);
  box-shadow: 0 10px 34px -16px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  padding-top: 0.5rem; padding-bottom: 0.5rem;
}

/* brand: logo image + UPTEC wordmark */
.site-nav__brand { display: flex; align-items: center; gap: 0.65rem; flex-shrink: 0; }
.site-nav__logo {
  height: 40px; width: auto; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
  transition: height var(--dur-slow) var(--ease-out);
}
.site-nav.is-solid .site-nav__logo { height: 38px; }
.site-nav__wordmark { display: flex; flex-direction: column; line-height: 1; }
.site-nav__name {
  font-family: "Montserrat", system-ui, sans-serif; font-weight: 700; color: var(--c-white);
  font-size: 1.12rem; letter-spacing: 0.02em;
}
.site-nav__tagline {
  font-family: "DM Mono", ui-monospace, monospace; font-size: 0.56rem; letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--c-gold); margin-top: 2px;
}

.site-nav__links {
  display: flex; align-items: center; gap: 0.2rem;
  margin: 0 auto;
}
.nav-link {
  font-family: "Montserrat", system-ui, sans-serif; font-size: 0.88rem; font-weight: 400;
  color: rgba(255, 255, 255, 0.66);
  padding: 0.45rem 0.85rem; border-radius: var(--radius-sm);
  transition: color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
  position: relative; cursor: pointer;
}
.nav-link:hover { color: var(--c-white); background: rgba(255, 255, 255, 0.06); }
.nav-link.is-active { color: var(--c-gold-soft); background: rgba(216, 177, 90, var(--gold-a-fill)); }

.site-nav__actions { display: flex; align-items: center; gap: 0.55rem; flex-shrink: 0; }

/* pulsing gold dot + Plantao 24h micro-label */
.nav-plantao {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: "DM Mono", ui-monospace, monospace; font-size: 0.62rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.62);
  padding-right: 0.3rem;
}
.nav-plantao__dot {
  width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--c-gold);
  box-shadow: 0 0 0 0 rgba(216, 177, 90, 0.7); animation: pulse-gold 2.2s infinite;
}
@keyframes pulse-gold {
  0% { box-shadow: 0 0 0 0 rgba(216, 177, 90, 0.6); }
  70% { box-shadow: 0 0 0 7px rgba(216, 177, 90, 0); }
  100% { box-shadow: 0 0 0 0 rgba(216, 177, 90, 0); }
}

.nav-burger {
  display: none; flex-direction: column; gap: 5px; width: 40px; height: 40px;
  align-items: center; justify-content: center; border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--c-line); cursor: pointer;
}
.nav-burger span {
  width: 17px; height: 1.5px; background: var(--c-white); border-radius: var(--radius-sm);
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }

/* mobile drawer */
.mobile-drawer {
  position: fixed; inset: 0 0 0 auto; width: min(86vw, 360px); z-index: 200;
  background: rgba(8, 13, 26, 0.97);
  backdrop-filter: blur(24px) saturate(1.2); -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border-left: 1px solid var(--c-line-strong);
  padding: 0 2rem 2rem; transform: translateX(105%);
  transition: transform var(--dur-slow) var(--ease-out); display: flex; flex-direction: column; gap: 0;
  box-shadow: -20px 0 60px -20px rgba(0,0,0,0.7);
}
.mobile-drawer.is-open { transform: translateX(0); }

/* Drawer header: brand + close button */
.mobile-drawer__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 0 1.1rem;
  border-bottom: 1px solid var(--c-line);
  flex-shrink: 0;
}
.mobile-drawer__brand {
  display: flex; align-items: center; gap: 0.6rem;
}
.mobile-drawer__brand img { height: 34px; width: auto; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.4)); }
.mobile-drawer__brand-text { display: flex; flex-direction: column; line-height: 1; }
.mobile-drawer__brand-name {
  font-family: "Montserrat", system-ui, sans-serif; font-weight: 700; color: var(--c-white);
  font-size: 1.05rem; letter-spacing: 0.02em;
}
.mobile-drawer__brand-tag {
  font-family: "DM Mono", ui-monospace, monospace; font-size: 0.52rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--c-gold); margin-top: 2px;
}
.mobile-drawer__close {
  width: 40px; height: 40px; border-radius: var(--radius-full); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05); border: 1px solid var(--c-line);
  color: rgba(255,255,255,0.7); cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.mobile-drawer__close:hover {
  background: rgba(216,177,90,var(--gold-a-fill)); border-color: rgba(216,177,90,var(--gold-a-border-hover));
  color: var(--c-gold); transform: rotate(90deg);
}
.mobile-drawer__close svg { width: 18px; height: 18px; }

/* Nav links */
.mobile-drawer__links {
  display: flex; flex-direction: column; gap: 0; flex: 1;
  padding-top: 0.5rem;
  overflow-y: auto;
}
.mobile-drawer__links a {
  font-family: "Montserrat", system-ui, sans-serif; font-size: 1.55rem; font-weight: 600;
  color: rgba(255,255,255,0.82); letter-spacing: -0.01em;
  padding: 0.85rem 0; border-bottom: 1px solid var(--c-line);
  display: flex; align-items: center; justify-content: space-between;
  transition: color var(--dur-base) var(--ease-out), padding-left var(--dur-base) var(--ease-out);
}
.mobile-drawer__links a::after {
  content: "";
  display: block; width: 20px; height: 1px;
  background: var(--c-gold); opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out);
}
.mobile-drawer__links a:hover { color: var(--c-gold-soft); padding-left: 0.5rem; }
.mobile-drawer__links a:hover::after { opacity: 1; }
.mobile-drawer__links a.is-active { color: var(--c-gold); }

/* Drawer status dot */
.mobile-drawer__status {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.2rem;
  font-family: "DM Mono", ui-monospace, monospace; font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: #6fcf97;
}
.mobile-drawer__status-dot {
  width: 7px; height: 7px; border-radius: var(--radius-full); background: #6fcf97; flex-shrink: 0;
  animation: pulse-dot-green 2.2s infinite;
}

/* CTA buttons at bottom */
.mobile-drawer__cta {
  display: flex; flex-direction: column; gap: 0.75rem;
  padding-top: 1.4rem; margin-top: auto; flex-shrink: 0;
  border-top: 1px solid var(--c-line);
}

/* ---------------------------------------------------------------
   DRAWER BACKDROP (tap-to-close overlay behind the drawer panel)
   --------------------------------------------------------------- */
.mobile-drawer-backdrop {
  position: fixed; inset: 0; z-index: 199;
  background: rgba(4, 7, 16, 0.60);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out);
}
body.drawer-open .mobile-drawer-backdrop {
  opacity: 1; pointer-events: auto;
}

/* ---------------------------------------------------------------
   NAVBAR HIDDEN WHILE DRAWER IS OPEN
   The drawer sits at z-index:200; the nav is at z-index:100.
   Fade the nav out so it does not overlap the drawer visually.
   --------------------------------------------------------------- */
body.drawer-open #site-nav {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

/* ---------------------------------------------------------------
   HERO
   --------------------------------------------------------------- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  padding: 90px 0 60px; overflow: hidden;
}
.hero__inner { position: relative; z-index: 3; width: 100%; }
.hero__kicker { margin-bottom: 1.4rem; }

.hero__title {
  font-family: "Montserrat", system-ui, sans-serif; font-weight: 800;
  font-size: clamp(2.2rem, 5.5vw, 5.5rem);
  line-height: 1.05; letter-spacing: -0.04em; color: var(--c-white);
  max-width: 16ch; margin: 0 0 1.4rem;
}
.hero__title .word { display: inline-block; overflow: hidden; padding-bottom: 0.06em; }
.hero__gold {
  background: linear-gradient(100deg, var(--c-gold) 0%, var(--c-gold-soft) 60%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent;
}
.hero__lead {
  max-width: 56ch; color: var(--c-text); font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.7; margin-bottom: 1.8rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem; }

.hero__facts {
  display: flex; flex-wrap: wrap; gap: clamp(1.2rem, 3vw, 2.5rem); margin: 0;
  border-top: 1px solid var(--c-line); padding-top: 1.4rem; max-width: 640px;
}
.hero__facts dt {
  font-family: "DM Mono", ui-monospace, monospace; font-size: 0.68rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--c-gold); margin-bottom: 0.4rem;
}
.hero__facts dd {
  margin: 0; font-family: "Montserrat", system-ui, sans-serif; font-weight: 800;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem); color: var(--c-white); line-height: 1;
  letter-spacing: -0.04em;
}
.hero__facts dd span {
  font-family: "Montserrat", system-ui, sans-serif; font-weight: 400; font-size: 0.85rem;
  color: var(--c-text-dim); letter-spacing: 0;
}

/* HERO SHAFT MOTIF - single clean illustration panel on the right.
   No loose gold hairlines (those read as a render glitch). The one
   intentional vertical gold rule lives as a thin border accent. */
.hero__shaft {
  position: absolute; top: 0; right: 0; bottom: 0; width: 44%; z-index: 1;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: clamp(1rem, 4vw, 4rem); pointer-events: none;
}
.hero__shaft .illus-panel {
  width: min(400px, 86%);
  border-left: 2px solid rgba(216, 177, 90, 0.45);
}

.hero__scroll {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  color: var(--c-text-dim);
}
.hero__scroll-line {
  width: 1px; height: 48px; background: linear-gradient(180deg, var(--c-gold), transparent);
  position: relative; overflow: hidden;
}
.hero__scroll-line::after {
  content: ""; position: absolute; top: -50%; left: 0; width: 100%; height: 50%;
  background: var(--c-gold-soft); animation: scrollCue 2s ease-in-out infinite;
}
@keyframes scrollCue { 0% { top: -50%; } 60%,100% { top: 110%; } }
.hero__scroll-text {
  font-family: "DM Mono", ui-monospace, monospace; font-size: 0.62rem; letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------
   MARQUEE
   --------------------------------------------------------------- */
.marquee-band {
  background: var(--c-cream);
  border-top: 1px solid var(--c-light-line); border-bottom: 1px solid var(--c-light-line);
  padding: 1.3rem 0;
  position: relative; z-index: 2;
}
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; align-items: center; gap: 2.5rem; width: max-content; will-change: transform; }
.marquee__item {
  font-family: "Montserrat", system-ui, sans-serif; font-weight: 600;
  font-size: clamp(1.1rem, 2.2vw, 1.8rem); color: rgba(22, 22, 22, 0.28);
  letter-spacing: -0.01em; text-transform: uppercase; transition: color var(--dur-base) var(--ease-out);
}
.marquee__item.is-gold { color: var(--c-gold-deep); }
.marquee__dot { width: 7px; height: 7px; border-radius: var(--radius-full); background: rgba(184, 146, 63, 0.45); flex-shrink: 0; }
/* CSS fallback marquee animation - always on (no prefers-reduced-motion gate) */
.marquee__track { animation: marqueeSlide 26s linear infinite; }
@keyframes marqueeSlide { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------
   DIFERENCIAIS - asymmetric grid, ghost numbers
   --------------------------------------------------------------- */
.ghost-num {
  position: absolute; top: -0.4rem; right: 0.6rem;
  font-family: "Montserrat", system-ui, sans-serif; font-weight: 800;
  font-size: clamp(4rem, 8vw, 7rem); line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.04); pointer-events: none; user-select: none;
}
.panel--light .ghost-num { color: rgba(22, 22, 22, 0.04); }
.diff-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  grid-template-areas:
    "lead a b"
    "lead wide wide";
}
.diff-card {
  position: relative; overflow: hidden;
  background: linear-gradient(165deg, rgba(17, 26, 49, 0.9), rgba(11, 18, 38, 0.7));
  border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  padding: 2rem; transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.diff-card:hover {
  border-color: rgba(216, 177, 90, var(--gold-a-border-hover)); transform: translateY(-4px);
  background: linear-gradient(165deg, rgba(20, 30, 56, 0.95), rgba(13, 21, 44, 0.8));
}
.diff-card::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold) 32%, transparent 80%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.diff-card:hover::before { opacity: 1; }
.diff-card--lead { grid-area: lead; display: flex; flex-direction: column; padding: 2.5rem; }
.diff-card--wide { grid-area: wide; }
.diff-card:nth-of-type(2) { grid-area: a; }
.diff-card:nth-of-type(3) { grid-area: b; }
.diff-icon { color: var(--c-gold); margin-bottom: 1.4rem; }
.diff-icon [stroke] { stroke: currentColor; }
.diff-card h3 {
  font-family: "Montserrat", system-ui, sans-serif; font-weight: 600;
  font-size: clamp(1.2rem, 1.6vw, 1.5rem); color: var(--c-white); margin-bottom: 0.75rem; line-height: 1.15;
}
.diff-card p { color: var(--c-text); font-size: 0.95rem; line-height: 1.65; }
.diff-card--lead h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); }
.diff-card--lead p { font-size: 1.0625rem; }
.diff-tag {
  margin-top: auto; align-self: flex-start; margin-top: 1.5rem;
  font-family: "DM Mono", ui-monospace, monospace; font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--c-gold);
  padding: 0.45rem 0.9rem; border: 1px solid rgba(216, 177, 90, var(--gold-a-border)); border-radius: var(--radius-sm);
}
.diff-pills { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.diff-pills li {
  font-family: "DM Mono", ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--c-text); padding: 0.4rem 0.8rem;
  border: 1px solid var(--c-line-strong); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.02);
}

/* ---------------------------------------------------------------
   SERVICOS - varied sizes
   --------------------------------------------------------------- */
.srv-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  grid-auto-rows: minmax(0, auto);
}
.srv-card {
  position: relative; overflow: hidden;
  background: rgba(11, 18, 38, 0.6); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); padding: 1.9rem 1.8rem 1.8rem;
  display: flex; flex-direction: column; gap: 0.75rem;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.srv-card:hover {
  border-color: rgba(216, 177, 90, var(--gold-a-border-hover)); transform: translateY(-4px);
  background: rgba(17, 26, 49, 0.85);
}
.srv-card__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 0.5rem; }
.srv-num {
  font-family: "DM Mono", ui-monospace, monospace; font-size: 0.78rem; letter-spacing: 0.1em;
  color: var(--c-gold); padding-top: 0.5rem;
}
.srv-icon { color: var(--c-white); opacity: 0.92; }
.srv-icon [stroke] { stroke: currentColor; }
.srv-card h3 { font-family: "Montserrat", system-ui, sans-serif; font-weight: 600; font-size: 1.3rem; color: var(--c-white); line-height: 1.15; }
.srv-card p { color: var(--c-text); font-size: 0.93rem; line-height: 1.6; }
.srv-card .link-arrow { margin-top: 0.6rem; }

.srv-card--tall { grid-row: span 2; justify-content: flex-start; }
.srv-card--tall .srv-icon { color: var(--c-gold); }
.srv-card--wide { grid-column: span 2; }
.srv-card--emergency { border-color: rgba(249, 115, 22, 0.25); }
.srv-card--emergency:hover { border-color: rgba(249, 115, 22, 0.5); }
.srv-card--emergency .srv-icon { color: #fb8a3c; }
.srv-card--emergency .srv-num { color: #fb8a3c; }

/* ---------------------------------------------------------------
   COUNTERS
   --------------------------------------------------------------- */
.counters {
  border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
}
.counters-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--c-line); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); overflow: hidden;
}
.counter {
  background: rgba(11, 18, 38, 0.7); padding: 1.8rem 1.4rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
/* Light context counters */
.panel--light .counter { background: var(--c-white); border: 1px solid rgba(22, 22, 22, 0.09); }
.panel--light .counters-grid { background: rgba(22, 22, 22, 0.08); border-color: rgba(22, 22, 22, 0.08); }
.panel--light .counter__num { color: var(--c-ink); }
.panel--light .counter__label { color: var(--c-ink-faint); }
.counter__num {
  font-family: "Montserrat", system-ui, sans-serif; font-weight: 800;
  font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1; color: var(--c-white);
  letter-spacing: -0.04em;
}
.counter:first-child .counter__num,
.counter:nth-child(3) .counter__num {
  background: linear-gradient(120deg, var(--c-gold), var(--c-gold-soft));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.counter__label {
  font-family: "DM Mono", ui-monospace, monospace; font-size: 0.78rem; letter-spacing: 0.08em;
  color: var(--c-text-dim); text-transform: uppercase;
}

/* ---------------------------------------------------------------
   QUEM SOMOS
   --------------------------------------------------------------- */
.about { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
.about__copy .section-title { max-width: 18ch; }
.about__p { color: var(--c-text); margin-top: 1.4rem; max-width: 52ch; line-height: 1.75; }
.about__copy .btn-gold { margin-top: 2.5rem; }

.mvv { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 0.25rem; }
.mvv__item {
  display: grid; grid-template-columns: 130px 1fr; gap: 1.5rem; align-items: baseline;
  padding: 1.2rem 0; border-top: 1px solid var(--c-line);
}
.mvv__k {
  font-family: "DM Mono", ui-monospace, monospace; font-size: 0.74rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--c-gold);
}
.mvv__item p { color: var(--c-text); font-size: 0.95rem; line-height: 1.6; }

.about__side { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: 100px; }

/* illustration panel: light card so navy line-art pops on dark */
.illus-panel {
  background: linear-gradient(160deg, #f2f5fc, #e1eaf8);
  border: 1px solid rgba(216, 177, 90, var(--gold-a-border));
  border-radius: var(--radius-lg); padding: 1.4rem; margin: 0;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6);
}
.illus-panel img { width: 100%; height: auto; border-radius: var(--radius-md); }
.illus-panel figcaption {
  text-align: center; font-family: "DM Mono", ui-monospace, monospace; font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: #5a6a86; margin-top: 0.9rem;
}
.illus-panel--soft { box-shadow: 0 24px 60px -32px rgba(0, 0, 0, 0.55); }

.founder-card {
  position: relative; background: linear-gradient(165deg, rgba(20, 30, 56, 0.9), rgba(11, 18, 38, 0.7));
  border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: 1.8rem;
}
.founder-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: var(--radius-full);
  background: linear-gradient(150deg, var(--c-gold), var(--c-gold-soft));
  color: #1a1205; font-family: "Montserrat", system-ui, sans-serif; font-weight: 700; font-size: 1rem;
  margin-bottom: 1.1rem;
}
.founder-quote { color: var(--c-white); font-family: "Montserrat", system-ui, sans-serif; font-weight: 600; font-size: 1.2rem; line-height: 1.35; margin-bottom: 1.2rem; }
.founder-meta strong { display: block; color: var(--c-white); font-size: 0.95rem; }
.founder-meta span { color: var(--c-text-dim); font-size: 0.82rem; font-family: "DM Mono", ui-monospace, monospace; }

.eng-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.eng-card {
  background: rgba(11, 18, 38, 0.6); border: 1px solid var(--c-line);
  border-radius: var(--radius-md); padding: 1.2rem; display: flex; flex-direction: column; gap: 0.4rem;
}
.eng-card__role { font-family: "DM Mono", ui-monospace, monospace; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-gold); }
.eng-card strong { color: var(--c-white); font-size: 0.92rem; line-height: 1.25; }
.eng-card__crea { font-family: "DM Mono", ui-monospace, monospace; font-size: 0.78rem; color: var(--c-text-dim); }

/* ---------------------------------------------------------------
   CASE
   --------------------------------------------------------------- */
.case__grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.illus-panel--wide { padding: 1.2rem; }
.case__visual { position: sticky; top: 100px; }
.case__lead { font-family: "Montserrat", system-ui, sans-serif; font-weight: 600; color: var(--c-white); font-size: 1.25rem; margin-bottom: 1.5rem; }
.case__list { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: 0.5rem; }
.case__list li {
  display: flex; align-items: flex-start; gap: 0.7rem;
  background: rgba(11, 18, 38, 0.5); border: 1px solid var(--c-line);
  border-radius: var(--radius-md); padding: 0.85rem 1rem; color: var(--c-text); font-size: 0.92rem; line-height: 1.4;
}
.case__list svg { color: var(--c-gold); flex-shrink: 0; margin-top: 1px; }
.case__list svg [stroke] { stroke: currentColor; }

.case__results { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.case__stat {
  flex: 1 1 180px; background: linear-gradient(165deg, rgba(20, 30, 56, 0.9), rgba(11, 18, 38, 0.6));
  border: 1px solid rgba(216, 177, 90, var(--gold-a-border)); border-radius: var(--radius-md); padding: 1.4rem;
}
.case__stat-num {
  display: block; font-family: "Montserrat", system-ui, sans-serif; font-weight: 800;
  font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; color: var(--c-gold);
  letter-spacing: -0.04em;
}
.case__stat-num span { font-size: 0.5em; }
.case__stat-num--ok { color: #6fcf97; font-size: clamp(1.8rem, 3vw, 2.6rem); }
.case__stat-label { font-family: "DM Mono", ui-monospace, monospace; font-size: 0.74rem; letter-spacing: 0.06em; color: var(--c-text-dim); text-transform: uppercase; margin-top: 0.6rem; display: block; }
.case__note { color: var(--c-text); font-size: 0.95rem; line-height: 1.7; border-left: 2px solid var(--c-gold); padding-left: 1.2rem; }

/* ---------------------------------------------------------------
   LICITACOES
   --------------------------------------------------------------- */
.licit__panel {
  position: relative; display: grid; grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 4vw, 4rem); align-items: center;
  background: linear-gradient(150deg, rgba(17, 26, 49, 0.7), rgba(8, 12, 24, 0.5));
  border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 3.5rem); overflow: hidden;
}
.licit__panel::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 80% at 8% 50%, rgba(216, 177, 90, 0.08), transparent 60%);
  pointer-events: none;
}
.licit__art { position: relative; z-index: 1; }
.licit__copy { position: relative; z-index: 1; }
.licit__copy .section-title { font-size: clamp(1.9rem, 3.6vw, 3rem); }
.licit__p { color: var(--c-text); margin-top: 1.4rem; max-width: 52ch; line-height: 1.7; }
.licit__pills { list-style: none; padding: 0; margin: 1.6rem 0 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.licit__pills li {
  font-family: "DM Mono", ui-monospace, monospace; font-size: 0.74rem; letter-spacing: 0.05em; color: var(--c-gold);
  padding: 0.5rem 0.9rem; border: 1px solid rgba(216, 177, 90, var(--gold-a-border)); border-radius: var(--radius-sm);
  background: rgba(216, 177, 90, 0.04);
}

/* ---------------------------------------------------------------
   CTA BAND
   --------------------------------------------------------------- */
.cta-band { padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
.cta-band__inner {
  position: relative; text-align: center; overflow: hidden;
  background: linear-gradient(160deg, rgba(20, 30, 56, 0.85), rgba(8, 12, 24, 0.7));
  border: 1px solid rgba(216, 177, 90, 0.22); border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.2rem, 3vw, 3rem);
}
.cta-band__shaft {
  position: absolute; inset: 0; pointer-events: none; opacity: 1;
  background-image:
    radial-gradient(60% 70% at 50% 0%, rgba(216, 177, 90, 0.12), transparent 65%),
    radial-gradient(55% 65% at 50% 100%, rgba(37, 84, 199, 0.16), transparent 72%),
    linear-gradient(rgba(216, 177, 90, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 177, 90, 0.045) 1px, transparent 1px);
  background-size: auto, auto, 42px 42px, 42px 42px;
}
.cta-band__inner .kicker { margin-bottom: 1.4rem; }
.cta-band__title { font-size: clamp(1.65rem, 3.5vw, 2.9rem); line-height: 1; letter-spacing: -0.03em; margin-bottom: 1rem; position: relative; }
.cta-band__sub { color: var(--c-text); max-width: 48ch; margin: 0 auto 2.5rem; font-size: 1.0625rem; position: relative; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; position: relative; }

/* ---------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: clamp(2.2rem, 4vw, 4rem) 0 0;
  position: relative; z-index: 2;
  background: var(--c-navy);
}

/* 4-column layout: Brand | Navegacao | Contato | Empresa */
.site-footer__top {
  display: grid;
  grid-template-columns: 1.55fr 0.9fr 1.15fr 1.1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  align-items: start;
}

/* Brand column */
.site-footer__brand {
  display: flex; flex-direction: column; gap: 1.1rem;
}
.site-footer__brandlink {
  display: inline-flex; align-items: center; gap: 0.65rem;
}
.site-footer__logo { height: 38px; width: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)); }
.site-footer__desc {
  color: var(--c-text); max-width: 38ch; line-height: 1.72;
  font-size: 0.915rem; margin: 0;
}
.site-footer__cta {
  display: flex; flex-direction: column; gap: 0.65rem; margin-top: 0.3rem;
}
.site-footer__cta .btn-gold,
.site-footer__cta .btn-emergency { display: inline-flex; }

/* Column shared */
.site-footer__col { display: flex; flex-direction: column; }
.site-footer__col-title {
  font-family: "DM Mono", ui-monospace, monospace; font-size: 0.68rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--c-gold); margin-bottom: 1.15rem;
  padding-bottom: 0.6rem; border-bottom: 1px solid rgba(216,177,90,var(--gold-a-glow));
}
.site-footer__col-title--mt { margin-top: 2rem; }

/* Nav links */
.site-footer__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.55rem;
}
.site-footer__list a {
  color: var(--c-text); font-size: 0.92rem;
  transition: color var(--dur-base) var(--ease-out), padding-left var(--dur-base) var(--ease-out);
  word-break: break-word; display: inline-block;
}
.site-footer__list a:hover { color: var(--c-gold-soft); padding-left: 0.35rem; }

/* Contact + address */
.site-footer__addr {
  font-style: normal; color: var(--c-text);
  font-size: 0.91rem; line-height: 1.75; margin-bottom: 0;
}
.site-footer__contact-item {
  display: flex; align-items: flex-start; gap: 0.6rem;
  color: var(--c-text); font-size: 0.91rem; line-height: 1.5; margin-bottom: 0.6rem;
}
.site-footer__contact-item svg {
  color: var(--c-gold); flex-shrink: 0; margin-top: 2px;
  width: 15px; height: 15px;
}
.site-footer__contact-item svg [stroke] { stroke: currentColor; }
.site-footer__contact-item a { color: var(--c-text); transition: color var(--dur-base) var(--ease-out); word-break: break-word; }
.site-footer__contact-item a:hover { color: var(--c-gold-soft); }

/* Empresa column: CNPJ / CREA / engenheiros */
.site-footer__data-row {
  display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 0.9rem;
}
.site-footer__data-label {
  font-family: "DM Mono", ui-monospace, monospace; font-size: 0.63rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--c-text-dim);
}
.site-footer__data-value {
  font-family: "DM Mono", ui-monospace, monospace; font-size: 0.84rem; color: var(--c-text);
  font-weight: 500; letter-spacing: 0.01em;
}
.site-footer__eng-card {
  background: rgba(11,18,38,0.55); border: 1px solid var(--c-line);
  border-radius: var(--radius-md); padding: 0.9rem 1rem; margin-bottom: 0.6rem;
}
.site-footer__eng-card:last-child { margin-bottom: 0; }
.site-footer__eng-role {
  font-family: "DM Mono", ui-monospace, monospace; font-size: 0.63rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--c-gold); margin-bottom: 0.3rem;
}
.site-footer__eng-name { color: var(--c-white); font-size: 0.88rem; font-weight: 600; line-height: 1.3; margin-bottom: 0.2rem; }
.site-footer__eng-crea { font-family: "DM Mono", ui-monospace, monospace; font-size: 0.78rem; color: var(--c-text-dim); }

.status-dot { display: inline-flex; align-items: center; gap: 0.6rem; font-family: "DM Mono", ui-monospace, monospace; font-size: 0.8rem; letter-spacing: 0.05em; color: #6fcf97; }
.status-dot__pulse { width: 9px; height: 9px; border-radius: var(--radius-full); background: #6fcf97; box-shadow: 0 0 0 0 rgba(111, 207, 151, 0.7); animation: pulse-dot-green 2.2s infinite; }
@keyframes pulse-dot-green {
  0% { box-shadow: 0 0 0 0 rgba(111, 207, 151, 0.6); }
  70% { box-shadow: 0 0 0 9px rgba(111, 207, 151, 0); }
  100% { box-shadow: 0 0 0 0 rgba(111, 207, 151, 0); }
}

.site-footer__legal {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 0.8rem;
  padding: 1.6rem 0 2.5rem;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.site-footer__data { font-family: "DM Mono", ui-monospace, monospace; font-size: 0.76rem; color: var(--c-text-dim); letter-spacing: 0.04em; }
.site-footer__data span { color: rgba(216, 177, 90, 0.45); margin: 0 0.25rem; }
.site-footer__copy { font-size: 0.78rem; color: var(--c-text-dim); }

/* ---------------------------------------------------------------
   QUOTE MODAL
   --------------------------------------------------------------- */
.quote-modal {
  position: fixed; inset: 0; z-index: 400; display: none;
  align-items: flex-start; justify-content: center; padding: 5vh 1rem;
  overflow-y: auto;
}
.quote-modal.is-open { display: flex; }
.quote-modal__backdrop {
  position: fixed; inset: 0;
  background: rgba(4, 7, 16, 0.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.quote-modal__dialog {
  position: relative; z-index: 1; width: min(680px, 100%); margin: auto;
  background: linear-gradient(165deg, #0d1428, #090f20);
  border: 1px solid rgba(216, 177, 90, var(--gold-a-border));
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-modal);
}
.quote-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.3rem 1.6rem; border-bottom: 1px solid var(--c-line);
  background: rgba(255, 255, 255, 0.02);
}
.quote-modal__brand { display: flex; align-items: center; gap: 0.9rem; }
.quote-modal__title { font-family: "Montserrat", system-ui, sans-serif; font-weight: 700; color: var(--c-white); font-size: 1.05rem; }
.quote-modal__close {
  width: 40px; height: 40px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--c-line); color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.quote-modal__close:hover { background: rgba(216, 177, 90, var(--gold-a-fill)); border-color: rgba(216, 177, 90, var(--gold-a-border-hover)); color: var(--c-gold); transform: rotate(90deg); }
.quote-modal__body { padding: 1.6rem; max-height: 76vh; overflow-y: auto; }
.quote-modal__noscript { color: var(--c-text); font-size: 0.9rem; margin-top: 1rem; }
.quote-modal__noscript a { color: var(--c-gold); }

/* ===============================================================
   LIGHT-PANEL COMPONENT VARIANTS + NEW MULTI-PAGE PIECES
   =============================================================== */

/* illustration panel: keep light card; add a pure-light variant that
   sits on cream panels (slightly warmer frame) */
.illus-panel--light {
  background: linear-gradient(160deg, var(--c-white), #f3eee2);
  border-color: rgba(184, 146, 63, 0.35);
  box-shadow: 0 28px 64px -34px rgba(60, 45, 15, 0.4);
}
.illus-panel--light figcaption { color: #8a7a52; }

/* founder card on a light panel */
.founder-card--light {
  background: linear-gradient(165deg, var(--c-white), #f6f1e6);
  border-color: var(--c-light-line);
  box-shadow: 0 20px 50px -32px rgba(60, 45, 15, 0.35);
}
.founder-card--light .founder-quote { color: var(--c-ink); }
.founder-card--light .founder-meta strong { color: var(--c-ink); }
.founder-card--light .founder-meta span { color: var(--c-ink-faint); }

/* engineer cards on a light panel */
.eng-card--light {
  background: var(--c-cream-2); border-color: var(--c-light-line);
}
.eng-card--light .eng-card__role { color: var(--c-gold-deep); }
.eng-card--light strong { color: var(--c-ink); }
.eng-card--light .eng-card__crea { color: var(--c-ink-faint); }
.eng-cards--lic { grid-template-columns: 1fr 1fr; gap: 1.25rem; max-width: 820px; }
.eng-cards--lic .eng-card { padding: 1.6rem; }
.eng-cards--lic .eng-card strong { font-size: 1.05rem; }

/* ---- TRUST STRIP on light ---- */
.trust-light { padding: 2.4rem 0; border-bottom: 1px solid var(--c-light-line); }
.trust-light__row {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1rem 2.2rem; justify-content: space-between;
}
.trust-light__row li {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: "DM Mono", ui-monospace, monospace; font-size: 0.8rem; letter-spacing: 0.02em;
  color: var(--c-ink-dim); text-transform: uppercase;
}
.trust-light__row svg { color: var(--c-gold-deep); flex-shrink: 0; }
.trust-light__row svg [stroke] { stroke: currentColor; }

/* ---- INNER HERO (sub-page headers, dark) ---- */
.inner-hero {
  position: relative; overflow: hidden;
  padding: calc(var(--nav-h) + clamp(1.5rem, 4vw, 3rem)) 0 clamp(1.5rem, 3.5vw, 2.8rem);
}
.inner-hero__shaft {
  position: absolute; top: 0; right: 0; bottom: 0; width: 40%; z-index: 0;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: clamp(1rem, 4vw, 3.5rem); pointer-events: none; opacity: 0.9;
}
.inner-hero__shaft .illus-panel { width: min(360px, 88%); border-left: 2px solid rgba(216, 177, 90, 0.45); }
.inner-hero > .max-w-shell, .inner-hero .mx-auto { position: relative; z-index: 1; }
.inner-hero__title {
  font-family: "Montserrat", system-ui, sans-serif; font-weight: 800; color: var(--c-white);
  font-size: clamp(1.7rem, 3.5vw, 2.8rem); line-height: 1.02; letter-spacing: -0.035em;
  margin: 0.85rem 0 1rem; max-width: 18ch;
}
.inner-hero__lead { color: var(--c-text); font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.7; max-width: 58ch; }
.inner-hero .licit__pills { margin-top: 1.6rem; }
.inner-hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }

/* breadcrumb */
.breadcrumb {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: "DM Mono", ui-monospace, monospace; font-size: 0.74rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--c-text-dim);
}
.breadcrumb a { color: var(--c-text-dim); transition: color var(--dur-base) var(--ease-out); }
.breadcrumb a:hover { color: var(--c-gold); }
.breadcrumb-sep { color: rgba(216, 177, 90, 0.5); }
.breadcrumb-current { color: var(--c-gold); }

/* stub pages */
.stub { min-height: 70vh; display: flex; align-items: center; }
.stub__note {
  color: var(--c-text); font-size: 1.05rem; margin: 0.5rem 0 0; max-width: 52ch;
  font-family: "DM Mono", ui-monospace, monospace; letter-spacing: 0.02em;
}

/* ---- LICITACOES: intro + identification grid (light) ---- */
.licit-intro { max-width: 70ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.licit-intro p { color: var(--c-ink-dim); margin-bottom: 1rem; line-height: 1.75; }

.ident-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--c-light-line); border: 1px solid var(--c-light-line);
  border-radius: var(--radius-lg); overflow: hidden;
}
.ident-cell { background: var(--c-cream-2); padding: 1.5rem 1.6rem; }
.ident-cell__k {
  font-family: "DM Mono", ui-monospace, monospace; font-size: 0.68rem; color: var(--c-ink-faint);
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.5rem;
}
.ident-cell__v {
  font-family: "Montserrat", system-ui, sans-serif; font-weight: 700; color: var(--c-ink);
  font-size: 1.02rem; line-height: 1.4;
}
.ident-cell__v--mono { font-family: "DM Mono", ui-monospace, monospace; font-weight: 500; letter-spacing: 0.01em; }

/* ---- DOCUMENTATION GROUPS (dark) ---- */
.doc-groups { display: flex; flex-direction: column; gap: clamp(2rem, 3.5vw, 3rem); }
.doc-group { }
.doc-group__title {
  display: flex; align-items: center; gap: 0.8rem;
  font-family: "Montserrat", system-ui, sans-serif; font-weight: 700;
  font-size: clamp(1.15rem, 2vw, 1.45rem); color: var(--c-white); margin-bottom: 1.1rem;
  padding-bottom: 0.9rem; border-bottom: 1px solid var(--c-line);
}
.doc-group__idx {
  font-family: "DM Mono", ui-monospace, monospace; font-size: 0.85rem; font-weight: 500;
  color: var(--c-gold); border: 1px solid rgba(216, 177, 90, var(--gold-a-border));
  border-radius: var(--radius); padding: 0.2rem 0.5rem; line-height: 1;
}
.doc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.doc-item {
  display: flex; align-items: center; gap: 0.9rem;
  background: rgba(11, 18, 38, 0.55); border: 1px solid var(--c-line);
  border-radius: var(--radius-md); padding: 0.85rem 1.1rem;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.doc-item:hover { border-color: rgba(216, 177, 90, var(--gold-a-border-hover)); background: rgba(17, 26, 49, 0.7); }
.doc-item__ic { color: var(--c-gold); flex-shrink: 0; }
.doc-item__ic [stroke] { stroke: currentColor; }
.doc-item__name { flex: 1; color: var(--c-text); font-size: 0.92rem; line-height: 1.4; }
/* Light context doc overrides */
.panel--light .doc-item { background: var(--c-white); }
.panel--light .doc-item__name { color: var(--c-ink-dim); }
.panel--light .doc-group__title { color: var(--c-ink); border-bottom-color: var(--c-light-line); }

/* status badges */
.badge {
  display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0;
  font-family: "DM Mono", ui-monospace, monospace; font-size: 0.68rem; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 0.35rem 0.7rem; border-radius: var(--radius-sm);
  border: 1px solid transparent; white-space: nowrap;
}
.badge-dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }
.badge-success { color: #6fcf97; background: rgba(111, 207, 151, 0.10); border-color: rgba(111, 207, 151, 0.3); }
.badge-brand { color: var(--c-gold-soft); background: rgba(216, 177, 90, var(--gold-a-fill)); border-color: rgba(216, 177, 90, var(--gold-a-border)); }

/* certification pills */
.cert-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cert-pills li {
  font-family: "DM Mono", ui-monospace, monospace; font-size: 0.8rem; letter-spacing: 0.04em;
  color: var(--c-gold-soft); padding: 0.5rem 1rem;
  border: 1px solid rgba(216, 177, 90, var(--gold-a-border)); border-radius: var(--radius-sm);
  background: rgba(216, 177, 90, 0.05);
}

/* ---- POR QUE grid (dark) ---- */
.porque-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.porque-item {
  display: flex; align-items: flex-start; gap: 0.9rem;
  background: linear-gradient(165deg, rgba(17, 26, 49, 0.7), rgba(11, 18, 38, 0.5));
  border: 1px solid var(--c-line); border-radius: var(--radius-md); padding: 1.2rem 1.4rem;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.porque-item:hover { border-color: rgba(216, 177, 90, var(--gold-a-border-hover)); transform: translateY(-3px); }
.porque-item svg { color: var(--c-gold); flex-shrink: 0; margin-top: 1px; }
.porque-item svg [stroke] { stroke: currentColor; }
.porque-item span { color: var(--c-text); font-size: 0.95rem; line-height: 1.5; }
/* Light context porque-item overrides */
.panel--light .porque-item { background: var(--c-white); }
.panel--light .porque-item span { color: var(--c-ink-dim); }

/* sticky mobile CTA reused? not needed; drawer handles mobile */

/* ---------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------- */
@media (max-width: 1100px) {
  .site-nav__links { display: none; }
  .nav-burger { display: flex; }
  .site-nav__actions .nav-plantao,
  .site-nav__actions .btn-emergency,
  .site-nav__actions > .btn-gold { display: none; }
  .site-nav__pill { gap: 0.75rem; }

  .section-head--split { grid-template-columns: 1fr; align-items: start; gap: 1.5rem; }
  .diff-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "lead lead" "a b" "wide wide"; }
  .srv-grid { grid-template-columns: 1fr 1fr; }
  .srv-card--tall { grid-row: span 1; }
  .srv-card--wide { grid-column: span 2; }
  .about { grid-template-columns: 1fr; }
  .about__side { position: static; }
  .case__grid { grid-template-columns: 1fr; }
  .case__visual { position: static; }
  .counters-grid { grid-template-columns: 1fr 1fr; }
  .hero__shaft { width: 40%; opacity: 0.55; }
  .inner-hero__shaft { width: 38%; opacity: 0.45; }
  .porque-grid { grid-template-columns: 1fr; }
  .eng-cards--lic { grid-template-columns: 1fr; }
  /* Footer: 4-col collapses to 2x2 at 1100px tablet */
  .site-footer__top { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .ident-grid { grid-template-columns: 1fr; }
  .trust-light__row { gap: 0.8rem 1.4rem; }
}

@media (max-width: 640px) {
  .hero { min-height: auto; padding: 90px 0 50px; }
  .hero__shaft { display: none; }
  .hero__title { font-size: clamp(2rem, 10vw, 3rem); max-width: none; }
  .hero__facts { gap: 1.5rem 2rem; }
  .hero__scroll { display: none; }
  .inner-hero__shaft { display: none; }

  .diff-grid { grid-template-columns: 1fr; grid-template-areas: "lead" "a" "b" "wide"; }
  .srv-grid { grid-template-columns: 1fr; }
  .srv-card--wide { grid-column: span 1; }
  .counters-grid { grid-template-columns: 1fr 1fr; }
  .mvv__item { grid-template-columns: 1fr; gap: 0.4rem; }
  .eng-cards { grid-template-columns: 1fr; }
  .site-footer__top { grid-template-columns: 1fr; }
  .site-footer__brand { grid-column: auto; }
  .site-footer__legal { flex-direction: column; }
  .section-title { font-size: clamp(1.35rem, 6vw, 1.9rem); }
  .doc-item { flex-wrap: wrap; }
  .doc-item__name { flex-basis: 100%; order: 2; }
  .site-nav { padding: 0.7rem 0.7rem 0; }
  .site-nav__pill { padding: 0.5rem 0.55rem 0.5rem 0.8rem; }
  .site-nav__name { font-size: 1rem; }
}

/* REDUCED MOTION: client has chosen always-on animations.
   Keeping only scroll-behavior (not an animation) — all animation/transition
   blocks that were here have been intentionally removed. */

/* Photo illustration panels (real generated images) */
.illus-panel--photo{padding:0 !important;background:none !important;border:1px solid rgba(216,177,90,var(--gold-a-border));border-radius: var(--radius-md);overflow:hidden;box-shadow:0 26px 60px -26px rgba(0,0,0,0.6);}
.illus-panel--photo img{display:block;width:100%;height:auto;border-radius: 0;}
.illus-panel--photo figcaption{padding:0.55rem 0.9rem 0.7rem;}

/* ===============================================================
   PAGE-SPECIFIC PIECES (servicos / condominios / elevadores / contato)
   New selectors only - appended, no existing rule modified.
   =============================================================== */

/* ---- checklist (two-column ticked list). Dark by default,
   crisp white card on .panel--light ---- */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.check-list li {
  display: flex; align-items: flex-start; gap: 0.7rem;
  background: rgba(11, 18, 38, 0.5); border: 1px solid var(--c-line);
  border-radius: var(--radius-md); padding: 0.85rem 1rem; color: var(--c-text);
  font-size: 0.92rem; line-height: 1.45;
}
.check-list svg { color: var(--c-gold); flex-shrink: 0; margin-top: 2px; width: 18px; height: 18px; }
.check-list svg [stroke] { stroke: currentColor; }
.panel--light .check-list li { background: var(--c-cream-2); border-color: var(--c-light-line); color: var(--c-ink-dim); }
.panel--light .check-list svg { color: var(--c-gold-deep); }
@media (max-width: 640px) { .check-list { grid-template-columns: 1fr; } }

/* ---- a framed sub-card inside a section (the "O que esta incluido"
   box). Light + dark variants ---- */
.feature-box {
  background: rgba(11, 18, 38, 0.55); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); padding: clamp(1.6rem, 3vw, 2.2rem);
}
.panel--light .feature-box { background: var(--c-cream-2); border-color: var(--c-light-line); }
.feature-box__title { font-size: 1.25rem; color: var(--c-white); margin-bottom: 1.2rem; }
.panel--light .feature-box__title { color: var(--c-ink); }

/* gold accent bar (left-rule callout) ---- */
.accent-note {
  border-left: 2px solid var(--c-gold); padding: 0.4rem 0 0.4rem 1.2rem;
  color: var(--c-text); line-height: 1.7; max-width: 64ch;
}
.panel--light .accent-note { color: var(--c-ink-dim); border-left-color: var(--c-gold-deep); }
.accent-note strong { color: var(--c-white); font-family: "Montserrat", system-ui, sans-serif; font-weight: 700; }
.panel--light .accent-note strong { color: var(--c-ink); }

/* ---- service block (per-service heading + icon chip) ---- */
.srv-block { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.srv-block:last-child { margin-bottom: 0; }
.srv-block__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.srv-chip {
  width: 52px; height: 52px; border-radius: var(--radius-md); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, rgba(216, 177, 90, 0.16), rgba(216, 177, 90, 0.05));
  border: 1px solid rgba(216, 177, 90, var(--gold-a-border)); color: var(--c-gold);
}
.panel--light .srv-chip { background: linear-gradient(150deg, rgba(184, 146, 63, 0.12), rgba(184, 146, 63, 0.04)); border-color: rgba(184, 146, 63, 0.4); color: var(--c-gold-deep); }
.srv-chip svg { width: 24px; height: 24px; }
.srv-chip svg [stroke] { stroke: currentColor; }
.srv-chip--emergency { background: linear-gradient(150deg, rgba(249, 115, 22, 0.16), rgba(249, 115, 22, 0.05)); border-color: rgba(249, 115, 22, 0.4); color: #fb8a3c; }
.panel--light .srv-chip--emergency { color: #d8600a; }
.srv-block__title { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.1; }
.srv-block__lead { color: var(--c-text); margin-bottom: 1.5rem; max-width: 62ch; line-height: 1.7; }
.panel--light .srv-block__lead { color: var(--c-ink-dim); }
.srv-block .btn-gold, .srv-block .btn-ghost, .srv-block .btn-emergency { margin-top: 1.6rem; }
.srv-block__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; }
.srv-block__actions .btn-gold, .srv-block__actions .btn-ghost, .srv-block__actions .btn-emergency { margin-top: 0; }

/* two small stat tiles (resp time / availability) ---- */
.stat-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.6rem; }
.stat-tile {
  background: linear-gradient(165deg, rgba(20, 30, 56, 0.85), rgba(11, 18, 38, 0.6));
  border: 1px solid rgba(216, 177, 90, var(--gold-a-border)); border-radius: var(--radius-md); padding: 1.4rem;
}
.panel--light .stat-tile { background: var(--c-cream-2); border-color: var(--c-light-line); }
.stat-tile__k { font-family: "DM Mono", ui-monospace, monospace; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-gold); margin-bottom: 0.5rem; }
.panel--light .stat-tile__k { color: var(--c-gold-deep); }
.stat-tile__v { font-family: "Montserrat", system-ui, sans-serif; font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2.1rem); color: var(--c-white); line-height: 1; letter-spacing: -0.04em; }
.panel--light .stat-tile__v { color: var(--c-ink); }
@media (max-width: 480px) { .stat-tiles { grid-template-columns: 1fr; } }

/* ---- normas / brand pill set (gold pills on dark or light) ---- */
.pill-set { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pill-set li {
  font-family: "DM Mono", ui-monospace, monospace; font-size: 0.78rem; letter-spacing: 0.04em;
  color: var(--c-gold-soft); padding: 0.5rem 1rem;
  border: 1px solid rgba(216, 177, 90, var(--gold-a-border)); border-radius: var(--radius-sm); background: rgba(216, 177, 90, 0.05);
}
.panel--light .pill-set li { color: var(--c-gold-deep); border-color: rgba(184, 146, 63, 0.4); background: rgba(184, 146, 63, 0.06); }

/* ---- centered intro (a dor do sindico) ---- */
.intro-center { max-width: 820px; margin: 0 auto; text-align: center; }
.intro-center .kicker { justify-content: center; }
.intro-center .section-title { margin-left: auto; margin-right: auto; max-width: 22ch; }
.intro-center__p { color: var(--c-ink-dim); max-width: 62ch; margin: 1.6rem auto 0; line-height: 1.75; }
.panel--dark .intro-center__p { color: var(--c-text); }

/* ---- diff/feature cards reused for "o que recebe", "modalidades",
   "linha UPTEC": a simpler bordered card with ghost number ---- */
.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.tile-grid--2 { grid-template-columns: repeat(2, 1fr); }
.tile-card {
  position: relative; overflow: hidden;
  background: rgba(11, 18, 38, 0.6); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); padding: 1.8rem;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.tile-card:hover { border-color: rgba(216, 177, 90, var(--gold-a-border-hover)); transform: translateY(-4px); background: rgba(17, 26, 49, 0.85); }
.panel--light .tile-card { background: var(--c-cream-2); border-color: var(--c-light-line); }
.panel--light .tile-card:hover { border-color: rgba(184, 146, 63, 0.4); background: var(--c-white); }
.tile-card__ic { color: var(--c-gold); margin-bottom: 1.1rem; }
.panel--light .tile-card__ic { color: var(--c-gold-deep); }
.tile-card__ic svg { width: 26px; height: 26px; }
.tile-card__ic svg [stroke] { stroke: currentColor; }
.tile-card h3 { font-family: "Montserrat", system-ui, sans-serif; font-weight: 600; font-size: 1.2rem; color: var(--c-white); margin-bottom: 0.6rem; line-height: 1.2; }
.panel--light .tile-card h3 { color: var(--c-ink); }
.tile-card p { color: var(--c-text); font-size: 0.92rem; line-height: 1.6; }
.panel--light .tile-card p { color: var(--c-ink-dim); }
.tile-card__k { font-family: "DM Mono", ui-monospace, monospace; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-gold); margin-bottom: 0.4rem; display: block; }
.panel--light .tile-card__k { color: var(--c-gold-deep); }
/* featured (gold-edged) variant */
.tile-card--feature { border-color: rgba(216, 177, 90, 0.4); background: linear-gradient(165deg, rgba(30, 24, 10, 0.6), rgba(11, 18, 38, 0.7)); }
.panel--light .tile-card--feature { border-color: rgba(184, 146, 63, 0.5); background: linear-gradient(165deg, #fffaf0, #fbf4e4); }
@media (max-width: 1100px) { .tile-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .tile-grid, .tile-grid--2 { grid-template-columns: 1fr; } }

/* ---- split: copy + media/list, used on condominios + elevadores ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.split--top { align-items: start; }
.split__copy .section-title { max-width: 18ch; }
.split__copy p { color: var(--c-text); margin-top: 1.4rem; max-width: 52ch; line-height: 1.75; }
.panel--light .split__copy p { color: var(--c-ink-dim); }
@media (max-width: 980px) { .split { grid-template-columns: 1fr; gap: 2.5rem; } }

/* receive list (icon + title + desc rows) ---- */
.recv-list { display: flex; flex-direction: column; gap: 0.9rem; }
.recv-item {
  display: flex; gap: 1rem; padding: 1.2rem 1.3rem;
  background: rgba(11, 18, 38, 0.5); border: 1px solid var(--c-line); border-radius: var(--radius-md);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.recv-item:hover { border-color: rgba(216, 177, 90, var(--gold-a-border-hover)); transform: translateY(-2px); }
.panel--light .recv-item { background: var(--c-cream-2); border-color: var(--c-light-line); }
.recv-item__ic {
  width: 42px; height: 42px; border-radius: var(--radius); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(216, 177, 90, var(--gold-a-fill)); border: 1px solid rgba(216, 177, 90, var(--gold-a-border)); color: var(--c-gold);
}
.panel--light .recv-item__ic { color: var(--c-gold-deep); border-color: rgba(184, 146, 63, 0.35); background: rgba(184, 146, 63, 0.08); }
.recv-item__ic svg { width: 20px; height: 20px; }
.recv-item__ic svg [stroke] { stroke: currentColor; }
.recv-item strong { display: block; font-family: "Montserrat", system-ui, sans-serif; font-weight: 600; color: var(--c-white); font-size: 1rem; margin-bottom: 0.25rem; }
.panel--light .recv-item strong { color: var(--c-ink); }
.recv-item p { color: var(--c-text); font-size: 0.9rem; line-height: 1.55; margin: 0; max-width: none; }
.panel--light .recv-item p { color: var(--c-ink-dim); }

/* ---- contact: info card + data table (dark) ---- */
.contact-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 980px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-aside { display: flex; flex-direction: column; gap: 1.25rem; }
.info-card { background: linear-gradient(165deg, rgba(20, 30, 56, 0.85), rgba(11, 18, 38, 0.6)); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: 1.9rem; }
.info-card__title { font-size: 1.15rem; color: var(--c-white); margin-bottom: 1.3rem; }
.info-list { display: flex; flex-direction: column; gap: 1rem; }
.info-row { display: flex; align-items: flex-start; gap: 0.9rem; color: var(--c-text); font-size: 0.92rem; line-height: 1.5; }
.info-row svg { color: var(--c-gold); flex-shrink: 0; margin-top: 2px; width: 18px; height: 18px; }
.info-row svg [stroke] { stroke: currentColor; }
.info-row a { color: var(--c-text); transition: color var(--dur-base) var(--ease-out); word-break: break-word; }
.info-row a:hover { color: var(--c-gold); }
.data-card { background: rgba(11, 18, 38, 0.55); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: 1.9rem; }
.data-card__k { font-family: "DM Mono", ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-gold); margin-bottom: 1.2rem; }
.data-rows { display: flex; flex-direction: column; }
.data-row { display: flex; justify-content: space-between; gap: 1.2rem; padding: 0.7rem 0; border-top: 1px solid var(--c-line); font-size: 0.9rem; }
.data-row:first-child { border-top: none; padding-top: 0; }
.data-row__k { color: var(--c-text-dim); }
.data-row__v { color: var(--c-white); text-align: right; font-weight: 500; }
.data-row__v--mono { font-family: "DM Mono", ui-monospace, monospace; font-weight: 400; }

/* big quote opener button block on contato ---- */
.quote-cta {
  background: linear-gradient(160deg, rgba(30, 24, 10, 0.55), rgba(11, 18, 38, 0.7));
  border: 1px solid rgba(216, 177, 90, 0.3); border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 3vw, 2.6rem);
}
.quote-cta h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); color: var(--c-white); margin-bottom: 0.8rem; line-height: 1.1; }
.quote-cta p { color: var(--c-text); margin-bottom: 1.8rem; line-height: 1.7; max-width: 46ch; }
/* Light context quote-cta */
.panel--light .quote-cta { background: linear-gradient(160deg, rgba(245, 241, 232, 0.8), rgba(237, 234, 224, 0.7)); border-color: rgba(184, 146, 63, 0.30); }
.panel--light .quote-cta h3 { color: var(--c-ink); }
.panel--light .quote-cta p { color: var(--c-ink-dim); }
.quote-cta__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* ============================================================
   LIFE PASS - profundidade nas secoes light + vida nos cards
   ============================================================ */
/* Light: brilho dourado quente + grid dourado visivel (combina com as dark) */
.panel--light::before {
  background:
    radial-gradient(72% 46% at 50% 0%, rgba(216,177,90,0.13) 0%, transparent 62%),
    radial-gradient(120% 90% at 50% -10%, var(--c-cream-2) 0%, var(--c-cream) 58%),
    linear-gradient(rgba(184,146,63,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,146,63,0.06) 1px, transparent 1px) !important;
  background-size: auto, auto, 54px 54px, 54px 54px !important;
}
/* Glow dourado interativo nos cards (dark e light) */
.srv-card, .diff-card, .tile-card, .info-card, .data-card, .feature-box {
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.srv-card:hover, .diff-card:hover, .tile-card:hover, .feature-box:hover {
  box-shadow: var(--shadow-card-hover);
}
/* Linha dourada que cresce no topo do card no hover (detalhe de engenharia) */
.srv-card::after, .tile-card::after {
  content: ""; position: absolute; left: 1.6rem; right: 1.6rem; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--c-gold), transparent);
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-slow) var(--ease-out);
}
.srv-card:hover::after, .tile-card:hover::after { transform: scaleX(1); }
/* Reveal com um pouco mais de presenca */
html.js-ready [data-reveal].in-view { transition-duration: var(--dur-slow); }

/* ============================================================
   LIGHT-PANEL CARDS: white tiles, ink text, gold-deep icons
   ============================================================ */
.panel--light .srv-card,
.panel--light .diff-card,
.panel--light .tile-card {
  background: var(--c-white);
  border-color: rgba(22, 22, 22, 0.09);
  box-shadow: var(--shadow-card);
}
.panel--light .srv-card:hover,
.panel--light .diff-card:hover,
.panel--light .tile-card:hover {
  border-color: rgba(184, 146, 63, 0.40);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}
.panel--light .srv-card h3,
.panel--light .diff-card h3,
.panel--light .tile-card h3 { color: var(--c-ink); }
.panel--light .srv-card p,
.panel--light .diff-card p,
.panel--light .tile-card p { color: var(--c-ink-dim); }
.panel--light .srv-icon,
.panel--light .diff-icon,
.panel--light .srv-num { color: var(--c-gold-deep); }
/* Diff-card gold corner-frame uses --c-gold-deep in light context */
.panel--light .diff-card::before {
  background: linear-gradient(135deg, var(--c-gold-deep) 0%, var(--c-gold-deep) 32%, transparent 80%);
}
.panel--light .srv-card .link-arrow,
.panel--light .diff-card .link-arrow { color: var(--c-gold-deep); }
/* illus-panel photo shadow on light */
.panel--light .illus-panel--photo {
  box-shadow: 0 20px 48px -24px rgba(22, 22, 22, 0.28);
  border-color: rgba(22, 22, 22, 0.10);
}

/* ============================================================
   EFFECTS.JS — Additive ambient layer (appended; never edits above)
   Snippets: Magnetic Cursor · Strategic GlowCard · Executive Grid Ripple
   Palette: gold var(--c-gold) on deep navy var(--c-navy)
   ============================================================ */

/* ----------------------------------------------------------
   (1) MAGNETIC CURSOR FOLLOWER
   A gold ring that eases behind the native cursor on desktop.
   pointer-events:none ensures zero click/hover interference.
   ---------------------------------------------------------- */
#uptec-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  border: 1.5px solid rgba(216, 177, 90, 0.65);
  border-radius: var(--radius-full);
  pointer-events: none;
  z-index: 99998; /* below modal overlay (99999+) but above everything else */
  opacity: 0;
  will-change: transform;
  transition: opacity var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  /* GPU-composited; transform set via JS */
}

/* Expand + brighten when hovering interactive elements.
   JS sets transform: translate3d(x - 14, y - 14, 0).
   On expand (28→40px) the extra 12px is half-corrected here
   so the ring stays visually centred on the cursor. */
#uptec-cursor-ring.uptec-cursor-ring--hover {
  width: 40px;
  height: 40px;
  border-color: rgba(216, 177, 90, 0.90);
}

/* ----------------------------------------------------------
   (2) STRATEGIC GLOWCARD
   A gold radial glow that follows the mouse inside cards.

   .srv-card / .tile-card: glow via ::before pseudo-element
   (no existing ::before on these, so safe to use).

   .diff-card: its ::before is the existing 2px vertical gold
   accent line — we must NOT clobber it. Instead we layer the
   glow directly into the card's background-image stack via
   a CSS custom property gradient.

   All: only visible while .glow-active is present (added by
   JS on mousemove, removed on mouseleave). ::after top-line
   and the diff-card ::before accent line are untouched.
   ---------------------------------------------------------- */
.srv-card,
.diff-card,
.tile-card {
  --mx: 50%;
  --my: 50%;
  --glow-opacity: 0;
}

/* srv-card and tile-card: glow ::before (safe — no prior ::before) */
.srv-card::before,
.tile-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    260px circle at var(--mx) var(--my),
    rgba(216, 177, 90, 0.10) 0%,
    rgba(216, 177, 90, 0.04) 45%,
    transparent 72%
  );
  opacity: var(--glow-opacity);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
  z-index: 0;
}

.srv-card.glow-active::before,
.tile-card.glow-active::before {
  --glow-opacity: 1;
}

/* diff-card: ::before is the existing 2px vertical accent line —
   we must not clobber it. Instead, use a pseudo-mask approach:
   a CSS custom property drives the box-shadow inner glow so there
   is zero conflict with background or existing pseudo-elements. */
.diff-card {
  --glow-shadow-spread: 0px;
}
.diff-card.glow-active {
  --glow-shadow-spread: 80px;
  box-shadow:
    inset 0 0 var(--glow-shadow-spread) -20px rgba(216, 177, 90, 0.12),
    0 22px 50px -22px rgba(0,0,0,0.55),
    0 0 38px -10px rgba(216,177,90,0.30);
  transition: box-shadow var(--dur-base) var(--ease-out);
}

/* Ensure card direct children sit above the glow layer */
.srv-card > *,
.diff-card > *,
.tile-card > * {
  position: relative;
  z-index: 1;
}

/* ----------------------------------------------------------
   (3) EXECUTIVE GRID RIPPLE
   Gold-tinted diagonal ripple background in #diferenciais.
   The container fills the section behind all content.
   .diff-grid and siblings already have position:relative / z-index
   via Tailwind; the ripple sits at z-index:0.
   ---------------------------------------------------------- */
#diferenciais {
  position: relative; /* safe — already styled as .section .panel */
}

#uptec-grid-ripple {
  position: absolute;
  inset: 0;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Push actual section content above the ripple */
#diferenciais > *:not(#uptec-grid-ripple) {
  position: relative;
  z-index: 1;
}

.uptec-grid-cell {
  width: 52px;
  height: 52px;
  border: 0.5px solid rgba(216, 177, 90, 0.06);
  flex-shrink: 0;
  animation: uptec-ripple-wave 2.8s ease-in-out infinite;
}

@keyframes uptec-ripple-wave {
  0%   { background-color: transparent; }
  30%  { background-color: rgba(216, 177, 90, 0.055); }
  65%  { background-color: rgba(216, 177, 90, 0.022); }
  100% { background-color: transparent; }
}

/* Pause all cell animations when prefers-reduced-motion */
.uptec-grid-ripple--paused .uptec-grid-cell {
  animation-play-state: paused;
  background-color: transparent;
}

/* On mobile/touch: hide the ripple entirely (performance) */
@media (max-width: 767px) {
  #uptec-grid-ripple {
    display: none;
  }
}

/* ============================================================
   FIX: Quem somos / MVV - texto era branco (--c-text) no creme = invisivel
   ============================================================ */
.panel--light .about__p,
.panel--light .mvv__item p { color: var(--c-ink-dim); }
.panel--light .mvv__k { color: var(--c-gold-deep); }
.panel--light .mvv__item { border-top-color: var(--c-light-line-strong); }

/* ============================================================
   TASK 1 — CARD DENSITY: equalise height + reduce empty space
   ============================================================ */
/* Grid rows stretch cards to equal height by default (align-items: stretch).
   Confirm flex-direction: column + gap fills content naturally.
   Target: reduce excessive vertical padding on smaller cards so
   content fills the card instead of floating in white space. */

/* srv-card: tighten vertical padding slightly (was 1.9rem 1.8rem 1.8rem) */
.srv-card {
  padding: 1.6rem 1.65rem 1.55rem;
}
/* The --tall card can keep a touch more breathing room since it spans 2 rows */
.srv-card--tall {
  padding: 1.8rem 1.65rem 1.65rem;
}

/* diff-card: tighten base padding (was 2rem); --lead can stay at 2.5rem */
.diff-card {
  padding: 1.65rem;
}
.diff-card--lead {
  padding: 2.2rem 2rem;
}

/* tile-card: tighten padding (was 1.8rem); keeps balanced on 3-col grid */
.tile-card {
  padding: 1.5rem 1.6rem;
}

/* Reduce gap inside srv-card children so content is tighter (was 0.75rem) */
.srv-card {
  gap: 0.6rem;
}

/* ============================================================
   TASK 2 — SECTION TITLE REVEAL: subtle clip + translate on scroll
   ALWAYS-ON: no prefers-reduced-motion gate
   ============================================================ */
html.js-ready .section-title[data-reveal],
html.js-ready [data-reveal] .section-title {
  opacity: 0;
  transform: translateY(22px);
  clip-path: inset(0 0 18% 0);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out),
    clip-path var(--dur-slow) var(--ease-out);
}
html.js-ready .section-title[data-reveal].in-view,
html.js-ready [data-reveal].in-view .section-title {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0% 0);
}
/* Inner-hero h1 titles (page sub-headers) also benefit */
html.js-ready .inner-hero__title[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  clip-path: inset(0 0 14% 0);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out),
    clip-path var(--dur-slow) var(--ease-out);
}
html.js-ready .inner-hero__title[data-reveal].in-view {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0% 0);
}

/* ============================================================
   TASK 3 — SHINY GOLD BUTTON: CSS-only shine sweep on .btn-gold
   Adapted from Vibecodes "Shiny Button" (bd9b3aca). Recoloured
   to UPTEC gold palette (var(--c-gold) / #e7cd92) on navy.
   Uses ::before for the sweep (::after already taken by the
   glowcard top-line system on other cards - but .btn-gold is
   not a card; both pseudo-elements are free for the button).
   ==============================================================*/

/* Register the gradient-angle custom property so it can be
   transitioned smoothly (progressive enhancement - ignored in
   browsers that don't support @property) */
@property --btn-shine-angle {
  syntax: "<angle>";
  initial-value: 135deg;
  inherits: false;
}
@property --btn-shine-pos {
  syntax: "<percentage>";
  initial-value: -60%;
  inherits: false;
}

/* Ensure the button clips its pseudo-elements */
.btn-gold {
  overflow: hidden;
  isolation: isolate;
}

/* SWEEP pseudo-element: a diagonal light band that travels on hover */
.btn-gold::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* Diagonal shine band: transparent → soft gold highlight → transparent */
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 35%,
    rgba(255, 255, 255, 0.38) 48%,
    rgba(231, 205, 146, 0.22) 52%,
    transparent 65%,
    transparent 100%
  );
  /* Start fully off to the left */
  transform: translateX(-110%);
  transition: transform 0s;
  pointer-events: none;
  z-index: 1;
}
.btn-gold:hover::before {
  /* Sweep across on hover in 0.55s */
  transform: translateX(210%);
  transition: transform var(--dur-slow) cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* IDLE SHIMMER: always on (desktop only for performance). */
@media (min-width: 769px) {
  .btn-gold::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: conic-gradient(
      from var(--btn-shine-angle),
      transparent 0%,
      rgba(216, 177, 90, 0.0) 30%,
      rgba(231, 205, 146, 0.28) 45%,
      rgba(216, 177, 90, 0.0) 60%,
      transparent 100%
    );
    -webkit-mask:
      linear-gradient(var(--c-white) 0 0) content-box,
      linear-gradient(var(--c-white) 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1.5px;
    opacity: 0.7;
    pointer-events: none;
    z-index: 0;
    animation: btn-gold-idle-spin 5s linear infinite;
  }
  @keyframes btn-gold-idle-spin {
    to { --btn-shine-angle: 495deg; }
  }
}

/* Ensure button text/icon sits above the shine layers */
.btn-gold > * {
  position: relative;
  z-index: 2;
}
/* Also keep svg strokes on top */
.btn-gold svg {
  position: relative;
  z-index: 2;
}

/* ALWAYS-ON: btn-gold animation reduced-motion override removed */

/* ============================================================
   MOBILE-FIRST FIXES  (max-width: 768px / 640px)
   Additive only — zero desktop rules modified.
   ============================================================ */

/* --- overflow safety net ----------------------------------- */
body,
main { overflow-x: clip; }

h1, h2, h3, h4 { overflow-wrap: break-word; word-break: break-word; }

/* --- marquee: guarantee it never causes horizontal scroll -- */
.marquee-band { overflow: hidden; }
.marquee { overflow: hidden; }

/* --- badge / cert-pill white-space override on mobile ------ */
@media (max-width: 768px) {
  .badge,
  .cert-pills li,
  .licit__pills li,
  .diff-pills li,
  .pill-set li { white-space: normal; }
}

/* ============================================================
   NAVBAR — floating pill: breathing room on mobile
   ============================================================ */
@media (max-width: 768px) {
  /* Outer nav: generous side padding so pill floats visibly */
  .site-nav {
    padding: 12px 14px 0;
  }

  /* Pill itself: comfortable inner padding, all content fits */
  .site-nav__pill {
    padding: 0.45rem 0.55rem 0.45rem 0.75rem;
    gap: 0.6rem;
  }

  /* Logo: slightly smaller so wordmark and burger fit */
  .site-nav__logo {
    height: 32px;
  }
  .site-nav.is-solid .site-nav__logo {
    height: 28px;
  }

  /* UPTEC name */
  .site-nav__name {
    font-size: 0.95rem;
  }

  /* Tagline "Elevadores" stays small but readable */
  .site-nav__tagline {
    font-size: 0.5rem;
    letter-spacing: 0.22em;
  }

  /* Hamburger: keep 40x40 touch target, no flex-shrink */
  .nav-burger {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
  }

  /* Push burger to far right of pill when nav links are hidden */
  .site-nav__actions {
    gap: 0.4rem;
    margin-left: auto;
  }
}

/* Extra tight: below 400px reduce outer pad slightly */
@media (max-width: 400px) {
  .site-nav {
    padding: 10px 10px 0;
  }
  .site-nav__pill {
    padding: 0.4rem 0.45rem 0.4rem 0.65rem;
  }
  .site-nav__name { font-size: 0.88rem; }
}

/* ============================================================
   HERO — home: tighten padding, ensure nav clearance
   ============================================================ */
@media (max-width: 640px) {
  /* Reduce top from 90px to a nav-safe value.
     Nav at mobile is ~56px tall + 12px top pad = ~68px.
     Give it 78px top padding for comfortable clearance.     */
  .hero {
    padding-top: 78px;
    padding-bottom: 44px;
    min-height: auto;
  }

  /* Title: tighter on narrow screens */
  .hero__title {
    font-size: clamp(1.85rem, 9.5vw, 2.8rem);
    max-width: none;
    margin-bottom: 1.1rem;
  }

  /* Lead text: reduce bottom margin */
  .hero__lead {
    margin-bottom: 1.8rem;
  }

  /* Actions: stack and go full-width for easier tap targets */
  .hero__actions {
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
  }
  .hero__actions .btn-gold,
  .hero__actions .btn-ghost {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Facts strip: reduce gap */
  .hero__facts {
    gap: 1.2rem 1.8rem;
    padding-top: 1.6rem;
  }
}

/* ============================================================
   INNER HERO (sub-pages): clearance + tighter padding
   ============================================================ */
@media (max-width: 640px) {
  .inner-hero {
    /* calc() was adding var(--nav-h)=86px + clamp top — reduce on mobile */
    padding-top: calc(68px + clamp(1rem, 4vw, 1.8rem));
    padding-bottom: clamp(1.3rem, 4vw, 2.2rem);
  }

  .inner-hero__title {
    font-size: clamp(1.5rem, 7.5vw, 2.2rem);
    margin: 0.7rem 0 0.85rem;
  }

  /* Actions inside inner-hero: full-width on mobile */
  .inner-hero__actions {
    flex-direction: column;
    gap: 0.75rem;
  }
  .inner-hero__actions .btn-gold,
  .inner-hero__actions .btn-ghost,
  .inner-hero__actions .btn-emergency {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   SECTIONS: reduce vertical padding on mobile
   ============================================================ */
@media (max-width: 640px) {
  .section {
    padding-top: clamp(2rem, 5vw, 3.5rem);
    padding-bottom: clamp(2rem, 5vw, 3.5rem);
  }

  .cta-band {
    padding: clamp(1.6rem, 4.5vw, 2.8rem) 0;
  }

  .cta-band__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .cta-band__actions .btn-gold,
  .cta-band__actions .btn-emergency {
    width: 100%;
    justify-content: center;
  }

  /* section-head: tighten bottom margin */
  .section-head {
    margin-bottom: clamp(1.2rem, 3vw, 1.8rem);
  }
}

/* ============================================================
   GRIDS: collapse to 1-col at 640px where not already done
   ============================================================ */
@media (max-width: 640px) {
  /* Counters: 2-col is fine but reduce padding */
  .counter {
    padding: 1.3rem 1rem;
  }
  .counter__num {
    font-size: clamp(1.6rem, 7vw, 2.4rem);
  }

  /* About / quem somos: already 1-col, tighten */
  .about__p { margin-top: 1rem; }

  /* Case grid: image above copy (already 1-col via @1100px) */
  .case__grid { gap: 1.8rem; }

  /* Footer */
  .site-footer__top {
    gap: 2rem;
  }

  /* Contact grid */
  .contact-grid { gap: 1.6rem; }

  /* Licitacoes ident grid (already 1-col via @720px, tighten) */
  .ident-cell { padding: 1.1rem 1.2rem; }

  /* split layout */
  .split { gap: 2rem; }

  /* porque grid */
  .porque-grid { gap: 0.8rem; }
}

/* ============================================================
   BUTTONS: minimum tap target everywhere on mobile
   ============================================================ */
@media (max-width: 640px) {
  /* Solo CTA buttons in about / quote sections: full-width */
  .about__copy .btn-gold {
    width: 100%;
    justify-content: center;
    margin-top: 2rem;
  }

  .quote-cta__actions {
    flex-direction: column;
    gap: 0.75rem;
  }
  .quote-cta__actions .btn-gold,
  .quote-cta__actions .btn-emergency,
  .quote-cta__actions .btn-ghost {
    width: 100%;
    justify-content: center;
  }

  /* Ensure all btn variants have at least 44px tap height */
  .btn-gold, .btn-ghost, .btn-emergency {
    min-height: 44px;
  }

  /* Service block actions: full-width on mobile */
  .srv-block__actions {
    flex-direction: column;
    gap: 0.75rem;
  }
  .srv-block__actions .btn-gold,
  .srv-block__actions .btn-ghost,
  .srv-block__actions .btn-emergency {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   IMAGES: sensible sizing on mobile
   ============================================================ */
@media (max-width: 640px) {
  /* Illustration panels: don't let them overflow or be tiny */
  .illus-panel {
    border-radius: var(--radius-md);
    padding: 1rem;
  }

  /* About side: keep image from being too tall on phone */
  .about__side .illus-panel--photo {
    max-height: 320px;
    overflow: hidden;
  }
  .about__side .illus-panel--photo img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    border-radius: 0;
  }

  /* Licitacoes hero image inside inner-hero__shaft is already hidden at 640px */

  /* Case visual: constrain image height */
  .case__visual .illus-panel--photo {
    max-height: 280px;
    overflow: hidden;
  }
  .case__visual .illus-panel--photo img {
    object-fit: cover;
    height: 100%;
  }
}

/* ============================================================
   MOBILE DRAWER: ensure it does not cause horizontal scroll
   ============================================================ */
@media (max-width: 768px) {
  .mobile-drawer {
    width: min(82vw, 320px);
  }
}

/* ============================================================
   FOOTER CTAs: stack vertically on mobile
   ============================================================ */
@media (max-width: 640px) {
  .site-footer__cta {
    flex-direction: column;
    align-items: stretch;
  }
  .site-footer__cta .btn-gold,
  .site-footer__cta .btn-emergency {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
}

/* ============================================================
   DATA ROW: prevent long mono values overflowing on mobile
   ============================================================ */
@media (max-width: 640px) {
  .data-row {
    flex-direction: column;
    gap: 0.2rem;
  }
  .data-row__v {
    text-align: left;
  }

  /* Legal footer: tighten */
  .site-footer__legal {
    gap: 0.6rem;
  }
  .site-footer__data {
    font-size: 0.72rem;
  }
}

/* ============================================================
   LICIT PANEL: stack image above copy on mobile
   ============================================================ */
@media (max-width: 640px) {
  .licit__panel {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    border-radius: var(--radius-lg);
    padding: 1.6rem;
  }
  /* Show image on top */
  .licit__art { order: -1; }
  .licit__art .illus-panel { margin: 0 auto; max-width: 280px; }
}

/* ============================================================
   ENG CARDS in LICITACOES: already 1-col via @1100px but
   ensure comfortable layout on small phones
   ============================================================ */
@media (max-width: 640px) {
  .eng-cards--lic { gap: 0.8rem; }
  .eng-cards--lic .eng-card { padding: 1.1rem; }
}

/* ============================================================
   QUOTE CTA block (contato page): tighten on mobile
   ============================================================ */
@media (max-width: 640px) {
  .quote-cta {
    padding: 1.4rem;
    border-radius: var(--radius-lg);
  }
  .quote-cta h3 { font-size: clamp(1.2rem, 5vw, 1.5rem); }
}

/* ============================================================
   INTRO-CENTER text: comfortable padding on mobile
   ============================================================ */
@media (max-width: 640px) {
  .intro-center .section-title { max-width: none; }
  .intro-center__p { font-size: 0.95rem; }
}

/* ============================================================
   TRUST STRIP: wrap gracefully at very narrow widths
   ============================================================ */
@media (max-width: 480px) {
  .trust-light__row {
    gap: 0.6rem 1rem;
    justify-content: flex-start;
  }
  .trust-light__row li {
    font-size: 0.72rem;
  }
}

/* ============================================================
   FEATURE 1 — SEGMENTOS GRID
   4 columns desktop / 2 tablet / 1 mobile
   Uses .srv-card classes (already defined); only the grid needs
   to be declared here.
   ============================================================ */
.segmentos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

/* Card-level click: make the whole article navigate */
.segmentos-grid .srv-card:focus-visible {
  outline: 2px solid var(--c-gold-deep);
  outline-offset: 3px;
}

@media (max-width: 1100px) {
  .segmentos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .segmentos-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   FEATURE 2 — FAQ ACCORDION
   panel--light context: gold accent line, ink text, chevron
   rotates on open. Smooth max-height transition.
   ============================================================ */
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--c-light-line-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 860px;
}

.faq-item {
  border-bottom: 1px solid var(--c-light-line);
}
.faq-item:last-child {
  border-bottom: none;
}

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 1.6rem;
  background: var(--c-cream-2);
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--c-ink);
  line-height: 1.3;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.accordion-trigger:hover {
  background: var(--c-cream-2);
  color: var(--c-gold-deep);
}
.accordion-trigger[aria-expanded="true"] {
  background: var(--c-cream-2);
  color: var(--c-gold-deep);
  border-left: 3px solid var(--c-gold-deep);
}

.accordion-chevron {
  flex-shrink: 0;
  color: var(--c-gold-deep);
  transition: transform var(--dur-base) var(--ease-out);
}
.accordion-trigger[aria-expanded="true"] .accordion-chevron {
  transform: rotate(180deg);
}

/* Smooth open/close via grid-template-rows trick (no JS height calc needed) */
.accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out);
  background: var(--c-cream-2);
}
/* keep it as a grid even with the [hidden] attribute so the collapse animates */
.accordion-body[hidden] { display: grid; }
/* OPEN state driven by the trigger aria-expanded (reliable, set by site.js) */
.accordion-trigger[aria-expanded="true"] + .accordion-body {
  grid-template-rows: 1fr;
}
.accordion-body > p {
  overflow: hidden;
  min-height: 0; /* CRITICAL: lets the 0fr row actually collapse to 0 height */
  padding: 0 1.6rem;
  color: var(--c-ink-dim);
  font-size: 0.97rem;
  line-height: 1.75;
  margin: 0;
}
.accordion-trigger[aria-expanded="true"] + .accordion-body > p {
  padding: 0.2rem 1.6rem 1.35rem;
}

@media (max-width: 640px) {
  .faq-accordion {
    border-radius: var(--radius-md);
  }
  .accordion-trigger {
    padding: 1.1rem 1.2rem;
    font-size: 0.97rem;
  }
  /* o padding vertical so pode existir no estado ABERTO. Aplicado aqui
     em qualquer estado, o padding-bottom entrava na altura minima do
     paragrafo e impedia a linha 0fr de colapsar ate zero — a resposta
     vazava sob o titulo mesmo com o acordeao fechado. */
  .accordion-body > p {
    padding: 0 1.2rem;
  }
  .accordion-trigger[aria-expanded="true"] + .accordion-body > p {
    padding: 0.2rem 1.2rem 1.1rem;
  }
}

/* ============================================================
   FEATURE 3 — STICKY MOBILE CTA BAR
   z-index 200: below modal (400) and mobile drawer (99),
   above regular content. Only visible at max-width 768px.
   ============================================================ */
.mobile-cta-bar {
  display: none; /* hidden by default; shown only on mobile below */
}

@media (max-width: 768px) {
  .mobile-cta-bar {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90; /* below modal (400), below nav (100) and below mobile drawer (99) */
    padding: 0.75rem 1rem;
    /* iOS safe area: lift above home bar */
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    background: var(--c-navy);
    border-top: 1px solid var(--c-gold);
    box-shadow: 0 -8px 32px -8px rgba(0, 0, 0, 0.6);
  }

  .mobile-cta-bar .btn-gold {
    flex: 1;
    justify-content: center;
    min-height: 46px;
  }

  .mobile-cta-bar .btn-emergency {
    flex: 0 0 auto;
    min-height: 46px;
    white-space: nowrap;
  }

  /* Give body enough bottom padding so bar never covers content */
  body {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}

/* Hide bar when modal is open */
body.modal-open .mobile-cta-bar,
body.drawer-open .mobile-cta-bar {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}

/* On desktop, never show the bar and undo the body padding */
@media (min-width: 769px) {
  .mobile-cta-bar {
    display: none !important;
  }
  /* The body padding-bottom from the mobile rule won't apply at 769px+
     because the media query is scoped, so no override needed */
}

/* ---------------------------------------------------------------
   SCROLL-SPY INSTITUTIONAL SIDEBAR PANEL
   Desktop only (>=1200px): reserves its own column beside the content.
   The sidebar is position:fixed but anchored to 16px from the left
   edge of the viewport. On inner pages (class .page--inner), the
   .max-w-shell containers get padding-left: var(--spy-col) which
   pushes readable content to the right so the sidebar never overlaps.
   Panel backgrounds (on <section>) remain full-width as before.
   Below 1200px: sidebar hidden, padding removed, content full-width.
   --------------------------------------------------------------- */

/* Reserve column width: sidebar(160px) + gap(24px) from its left edge(16px).
   Content indent = 16px(left) + 160px(width) + 24px(gap) = 200px.
   We use a CSS custom property so it's easy to tune. */
:root {
  --spy-col: 200px; /* sidebar left(16px) + width(160px) + gap(24px) */
}

.spy-rail {
  display: none; /* hidden by default; shown only in the desktop MQ below */
}

@media (min-width: 1200px) {
  /* ---- Reserve space in inner-page content shells ---- */
  /* The panel <section> backgrounds span full-width (untouched).
     Only the centering wrapper that holds readable content gets the offset.
     We target both the direct shell and any nested shell inside inner pages. */
  .page--inner .max-w-shell {
    /* Push inner content right so sidebar never overlaps.
       Sidebar: left:16px, width:160px → right edge at 176px.
       --spy-col:200px = 16 + 160 + 24px gap.
       Right padding (from lg:px-10) is unchanged at 2.5rem.
       Panel <section> backgrounds still span full-width as before. */
    padding-left: var(--spy-col);
  }
}

@media (min-width: 1200px) {
  .spy-rail {
    display: flex;
    flex-direction: column;
    width: 160px;
    position: fixed;
    /* Sidebar fixed at 16px from the left viewport edge.
       Content on inner pages starts at 200px (16+160+24 gap) — reserved by
       .page--inner .max-w-shell padding-left: var(--spy-col) above.
       This means sidebar never overlaps content at any viewport width >= 1200px. */
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 90;
    max-height: calc(100vh - var(--nav-h) - 4rem);
    overflow: hidden;
    /* opacity controlled by JS: 0 when no items, 1 when active page */
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out);
    /* Panel appearance */
    background: rgba(10, 14, 28, 0.92);
    border: 1px solid rgba(216, 177, 90, 0.20);
    border-radius: var(--radius);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.50), inset 0 1px 0 rgba(216, 177, 90, 0.07);
  }

  .spy-rail.is-visible {
    opacity: 1;
    pointer-events: auto;
  }

  /* ---- PAGE NAME HEADER ---- */
  .spy-rail__header {
    padding: 0.85rem 1rem 0.7rem;
    border-bottom: 1px solid rgba(216, 177, 90, var(--gold-a-glow));
    flex-shrink: 0;
  }

  .spy-rail__page-name {
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 0.63rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--c-gold);
    display: block;
    line-height: 1;
  }

  /* ---- SECTION LIST BODY ---- */
  .spy-rail__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.4rem 0;
    scrollbar-width: none;
  }

  .spy-rail__body::-webkit-scrollbar { display: none; }

  /* Each item: text label with left accent bar */
  .spy-item {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.42rem 0.9rem 0.42rem 1rem;
    cursor: pointer;
    background: transparent;
    border: none;
    border-left: 2px solid transparent;
    text-align: left;
    transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  }

  /* Dot element: hidden (kept for JS compat) */
  .spy-item__dot {
    display: none;
  }

  /* The label text */
  .spy-item__label {
    font-family: "Montserrat", system-ui, sans-serif;
    font-size: 0.775rem;
    font-weight: 400;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.52);
    white-space: normal;
    transition: color var(--dur-base) var(--ease-out), font-weight var(--dur-fast) var(--ease-out);
  }

  /* Hover: inactive items brighten */
  .spy-item:not(.is-active):hover {
    background: rgba(255, 255, 255, 0.04);
  }

  .spy-item:not(.is-active):hover .spy-item__label {
    color: rgba(255, 255, 255, 0.82);
  }

  /* Active item: gold left bar + tinted bg + bold white text */
  .spy-item.is-active {
    background: rgba(216, 177, 90, var(--gold-a-fill));
    border-left-color: var(--c-gold);
  }

  .spy-item.is-active .spy-item__label {
    color: var(--c-white);
    font-weight: 700;
  }

  /* Focus ring */
  .spy-item:focus-visible {
    outline: 2px solid var(--c-gold);
    outline-offset: -2px;
    border-radius: var(--radius-sm);
  }

  /* ---- CTA CARD at the bottom of the panel ---- */
  .spy-rail__cta {
    flex-shrink: 0;
    padding: 0.85rem 1rem;
    border-top: 1px solid rgba(216, 177, 90, var(--gold-a-glow));
    background: rgba(216, 177, 90, 0.04);
  }

  .spy-rail__cta-title {
    font-family: "Montserrat", system-ui, sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--c-white);
    display: block;
    margin-bottom: 0.18rem;
    line-height: 1.3;
  }

  .spy-rail__cta-sub {
    font-family: "Montserrat", system-ui, sans-serif;
    font-size: 0.69rem;
    color: rgba(255, 255, 255, 0.50);
    display: block;
    margin-bottom: 0.7rem;
    line-height: 1.4;
  }

  .spy-rail__cta-btn {
    display: block;
    width: 100%;
    padding: 0.44rem 0.7rem;
    font-family: "Montserrat", system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-align: center;
    color: #0a0e1c;
    background: var(--c-gold);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
  }

  .spy-rail__cta-btn:hover {
    background: #e8c96b;
  }

  .spy-rail__cta-btn:active {
    opacity: 0.82;
  }
}

/* ============================================================
   TASK 1 — HOME-ONLY SCALE REDUCTION
   Scope everything to #page-home so inner pages are untouched.
   Reduces hero title, section titles, section padding, card and
   counter sizes by ~20-30%. Nothing touches global html/body or
   shared rules used by inner pages.
   ============================================================ */

/* Hero title: reduce from clamp(2.2rem,5.5vw,5.5rem) */
#page-home .hero__title {
  font-size: clamp(1.65rem, 4.2vw, 4rem);
  margin-bottom: 1.1rem;
}

/* Hero lead text: slightly tighter */
#page-home .hero__lead {
  font-size: clamp(0.93rem, 1.15vw, 1.07rem);
  margin-bottom: 1.4rem;
}

/* Hero facts dd (the big number) */
#page-home .hero__facts dd {
  font-size: clamp(1.3rem, 1.9vw, 1.75rem);
}

/* Hero actions: tighter gap */
#page-home .hero__actions {
  gap: 0.8rem;
  margin-bottom: 2rem;
}

/* Hero padding */
#page-home .hero {
  padding-top: 80px;
  padding-bottom: 48px;
}

/* Section padding (home only) */
#page-home .section {
  padding-top: clamp(2rem, 4vw, 3.8rem);
  padding-bottom: clamp(2rem, 4vw, 3.8rem);
}

/* Section titles (home only) */
#page-home .section-title {
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  margin-top: 0.7rem;
}

/* Section-head bottom margin */
#page-home .section-head {
  margin-bottom: clamp(1.4rem, 2.8vw, 2.2rem);
}

/* Diff-card padding + headings */
#page-home .diff-card {
  padding: 1.35rem 1.4rem;
}
#page-home .diff-card--lead {
  padding: 1.8rem 1.6rem;
}
#page-home .diff-card h3 {
  font-size: clamp(1rem, 1.35vw, 1.25rem);
}
#page-home .diff-card--lead h3 {
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
}
#page-home .diff-card p {
  font-size: 0.875rem;
}

/* Srv-card padding + headings */
#page-home .srv-card {
  padding: 1.25rem 1.35rem 1.2rem;
  gap: 0.5rem;
}
/* o override de padding do --tall foi removido: ele herda exatamente o
   mesmo padding dos cards irmaos, para o link "saiba mais" ficar na
   mesma distancia da base em todos. O extra existia porque o card
   ocupava 2 linhas da grade, span que nao existe mais. */
#page-home .srv-card h3 {
  font-size: 1.1rem;
}
#page-home .srv-card p {
  font-size: 0.875rem;
}

/* Counter numbers */
#page-home .counter__num {
  font-size: clamp(1.6rem, 2.7vw, 2.4rem);
}
#page-home .counter {
  padding: 1.4rem 1.1rem;
}

/* Segmentos grid cards (same as srv-card above, inherits) */
#page-home .segmentos-grid .srv-card h3 {
  font-size: 1.05rem;
}

/* CTA band */
#page-home .cta-band {
  padding: clamp(2rem, 4vw, 3.5rem) 0;
}
#page-home .cta-band__title {
  font-size: clamp(1.35rem, 2.8vw, 2.3rem);
}

/* Mobile: home title stays readable but still tighter than before */
@media (max-width: 640px) {
  #page-home .hero__title {
    font-size: clamp(1.65rem, 8.5vw, 2.4rem);
  }
  #page-home .section-title {
    font-size: clamp(1.15rem, 5.2vw, 1.65rem);
  }
  #page-home .counter__num {
    font-size: clamp(1.45rem, 6vw, 2rem);
  }
}

/* ============================================================
   TASK 2 — HOME HERO: FULL-BLEED BACKGROUND IMAGE
   Remove the right-side illus-panel (hero__shaft hidden via CSS).
   Apply background image with dark gradient overlay.
   Desktop: uptec-hero-bg.jpg (16:9 landscape)
   Mobile: uptec-hero-bg-mobile.jpg (9:16 portrait, switched at 640px)
   ============================================================ */

/* Hide the right-side shaft panel on home hero */
#page-home .hero__shaft {
  display: none;
}

/* Full-bleed background image + dark overlay */
#page-home .hero {
  background-image:
    linear-gradient(
      105deg,
      rgba(7, 11, 24, 0.88) 0%,
      rgba(7, 11, 24, 0.78) 38%,
      rgba(7, 11, 24, 0.55) 65%,
      rgba(7, 11, 24, 0.38) 100%
    ),
    url("images/uptec-hero-bg-opcao5.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* Prevent the fixed site-bg from showing through on the hero */
  isolation: isolate;
}

/* On mobile: switch to 9:16 portrait version */
@media (max-width: 640px) {
  #page-home .hero {
    background-image:
      linear-gradient(
        180deg,
        rgba(7, 11, 24, 0.92) 0%,
        rgba(7, 11, 24, 0.80) 45%,
        rgba(7, 11, 24, 0.72) 100%
      ),
      url("images/uptec-hero-bg-mobile-opcao5.jpg");
    background-position: center top;
    min-height: 100svh;
  }
}

/* Hero text: ensure white on dark bg — should already be, but reinforce */
#page-home .hero__title,
#page-home .hero__inner { color: var(--c-white); }

/* Facts strip border above on dark photo bg: keep visible */
#page-home .hero__facts {
  border-top-color: rgba(255, 255, 255, 0.18);
}

/* ============================================================
   TASK 3 — PAGE-CONDOMINIOS LAYOUT FIXES
   ============================================================ */

/* ---- Section: O que o condominio recebe (cond-recebe) ----
   The current .split uses two .split__copy cols which creates an
   unbalanced layout (the aside was using split__copy instead of
   split__media). We restructure this via CSS:
   Left: recv-list (copy) | Right: illus-panel + quote-cta
   The inner-hero sidebar reserve-space is already handled by
   .page--inner .max-w-shell — no additional fix needed there. */

/* Give the aside in cond-recebe a proper class hook via CSS attribute
   targeting is not ideal; instead we fix the layout geometry:
   The split__copy on the right side should not be constrained by
   section-title max-width on a non-copy col. */

#cond-recebe .split {
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

/* Right column (aside) stacks panel + quote-cta with consistent gap */
#cond-recebe .split > aside {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: sticky;
  top: 100px;
}

/* The photo panel: consistent sizing */
#cond-recebe .split > aside .illus-panel {
  margin-bottom: 0;
}

/* ---- Modalidades / plan cards grid (cond-modalidades) ----
   3 cards in tile-grid: already renders cleanly at desktop.
   Ensure equal-height stretch with the correct gap. */

#cond-modalidades .tile-grid {
  gap: 1.1rem;
}

/* Ensure the tile-cards stretch to equal height */
#cond-modalidades .tile-card {
  display: flex;
  flex-direction: column;
}

/* Put the Solicitar button spacing inside the card context */
#cond-modalidades .inner-hero__actions {
  justify-content: flex-start;
}

/* ---- Case section (cond-case): align image + body ---- */
#cond-case .case__grid {
  gap: clamp(2rem, 3.5vw, 3rem);
}
#cond-case .case__visual {
  position: sticky;
  top: 100px;
}

/* ---- Mobile: stack properly ---- */
@media (max-width: 980px) {
  #cond-recebe .split {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }
  #cond-recebe .split > aside {
    position: static;
  }
}

@media (max-width: 640px) {
  #cond-case .case__visual {
    position: static;
  }
  #cond-recebe .split > aside {
    gap: 1.2rem;
  }
}

/* Founder photo (substitui o monograma LC) */
.founder-photo{width:100px;height:100px;border-radius: var(--radius-full);object-fit:cover;border:3px solid var(--c-white);display:block;margin-bottom:1rem;box-shadow:0 12px 30px -8px rgba(22,22,22,0.45), 0 0 0 2px var(--c-gold), 0 0 26px -6px rgba(216,177,90,0.45);}
.panel--light .founder-photo{box-shadow:0 14px 32px -10px rgba(22,22,22,0.40), 0 0 0 2px var(--c-gold-deep), 0 0 24px -6px rgba(184,146,63,0.40);}

/* Fix: blocos centralizados centram no viewport (sem o offset da sidebar) */
@media (min-width:1200px){.page--inner .max-w-shell:has(.intro-center),.page--inner .max-w-shell:has(.cta-band__inner){padding-left:0;}}

/* ============================================================
   FEATURE 1 - PAGE TRANSITION OVERLAY (brand loading vignette)
   Full-screen overlay shown briefly during SPA page navigation.
   z-index 350: above all page content and sidebar (z-90), nav
   (z-100), mobile drawer (z-200), but below quote modal (z-400).
   ============================================================ */
#page-transition {
  position: fixed;
  inset: 0;
  z-index: 350;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  pointer-events: none;
  opacity: 0;
  /* deep navy with radial vignette darker at edges */
  background:
    radial-gradient(ellipse 80% 80% at 50% 50%, rgba(11, 18, 38, 0.88) 0%, rgba(4, 7, 16, 0.98) 100%);
  /* CSS-driven fade: class .is-entering fades in, .is-exiting fades out */
  transition: opacity var(--dur-base) var(--ease-out);
}

/* Shown (fade in) */
#page-transition.is-entering {
  opacity: 1;
  pointer-events: auto;
}

/* Fade out stays at opacity 0 - handled by removing is-entering */

/* Logo image */
#page-transition .pt-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(216, 177, 90, 0.55));
  animation: pt-pulse 1.4s ease-in-out infinite;
}

@keyframes pt-pulse {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(216, 177, 90, 0.45)); }
  50%       { filter: drop-shadow(0 0 28px rgba(216, 177, 90, 0.80)); }
}

/* Wordmark below logo */
#page-transition .pt-wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
#page-transition .pt-name {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  color: var(--c-white);
  line-height: 1;
}
#page-transition .pt-tag {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--c-gold);
  line-height: 1;
}

/* Gold progress bar */
#page-transition .pt-bar-track {
  width: 140px;
  height: 2px;
  background: rgba(216, 177, 90, 0.18);
  border-radius: var(--radius-bar);
  overflow: hidden;
  margin-top: 0.25rem;
}
#page-transition .pt-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--c-gold), var(--c-gold-soft));
  border-radius: var(--radius-bar);
  box-shadow: 0 0 8px rgba(216, 177, 90, 0.7);
  transition: width var(--dur-slow) var(--ease-out);
}

/* When overlay is active, fill the bar */
#page-transition.is-entering .pt-bar-fill {
  width: 100%;
}

/* ALWAYS-ON: page-transition reduced-motion overrides removed */

/* ============================================================
   FEATURE 2 - ADAPTIVE SIDEBAR (dark/light per section)
   .spy-rail.is-on-light = sidebar over a .panel--light section.
   Default (dark mode): current styling is kept exactly as-is.
   Light mode: cream surface, dark ink text, gold-deep accents.
   Only applied inside the 1200px+ breakpoint where the rail shows.
   ============================================================ */
@media (min-width: 1200px) {

  /* Shared transition for all color-sensitive properties */
  .spy-rail {
    transition:
      opacity var(--dur-base) var(--ease-out),
      background var(--dur-base) var(--ease-out),
      border-color var(--dur-base) var(--ease-out),
      box-shadow var(--dur-base) var(--ease-out);
  }

  /* ------ LIGHT MODE ------ */
  .spy-rail.is-on-light {
    background: rgba(248, 244, 235, 0.96);
    border-color: rgba(184, 146, 63, 0.30);
    box-shadow: 0 8px 32px rgba(60, 45, 15, 0.18), inset 0 1px 0 rgba(184, 146, 63, 0.15);
  }

  /* Header: gold-deep accent */
  .spy-rail.is-on-light .spy-rail__header {
    border-bottom-color: rgba(184, 146, 63, 0.22);
  }
  .spy-rail.is-on-light .spy-rail__page-name {
    color: var(--c-gold-deep);
    transition: color var(--dur-base) var(--ease-out);
  }

  /* Inactive items */
  .spy-rail.is-on-light .spy-item__label {
    color: rgba(22, 22, 22, 0.50);
    transition: color var(--dur-base) var(--ease-out);
  }
  .spy-rail.is-on-light .spy-item:not(.is-active):hover {
    background: rgba(22, 22, 22, 0.06);
  }
  .spy-rail.is-on-light .spy-item:not(.is-active):hover .spy-item__label {
    color: rgba(22, 22, 22, 0.82);
  }

  /* Active item: gold-deep left bar, warm tinted bg, near-black text */
  .spy-rail.is-on-light .spy-item.is-active {
    background: rgba(184, 146, 63, 0.12);
    border-left-color: var(--c-gold-deep);
  }
  .spy-rail.is-on-light .spy-item.is-active .spy-item__label {
    color: var(--c-ink);
    font-weight: 700;
  }

  /* CTA card */
  .spy-rail.is-on-light .spy-rail__cta {
    background: rgba(184, 146, 63, 0.08);
    border-top-color: rgba(184, 146, 63, 0.22);
  }
  .spy-rail.is-on-light .spy-rail__cta-title {
    color: var(--c-ink);
    transition: color var(--dur-base) var(--ease-out);
  }
  .spy-rail.is-on-light .spy-rail__cta-sub {
    color: var(--c-ink-dim);
    transition: color var(--dur-base) var(--ease-out);
  }
  .spy-rail.is-on-light .spy-rail__cta-btn {
    background: var(--c-gold-deep);
    color: var(--c-white);
  }
  .spy-rail.is-on-light .spy-rail__cta-btn:hover {
    background: var(--c-gold);
    color: #1a1205;
  }

  /* Focus ring adapts */
  .spy-rail.is-on-light .spy-item:focus-visible {
    outline-color: var(--c-gold-deep);
  }
}

/* Quote CTA como banner horizontal full-width (Condominios recebe) */
.quote-cta--banner{display:flex;align-items:center;justify-content:space-between;gap:2.5rem;margin-top:2.5rem;flex-wrap:wrap;}
.quote-cta--banner .quote-cta__text{flex:1 1 460px;}
.quote-cta--banner .quote-cta__text p{margin-bottom:0;}
.quote-cta--banner .pill-set{margin-top:1.1rem;}
.quote-cta--banner .quote-cta__actions{flex-shrink:0;margin:0;}
@media (max-width:760px){.quote-cta--banner{flex-direction:column;align-items:flex-start;gap:1.5rem;}}

/* Founder card: foto + nome/cargo lado a lado; citacao embaixo */
.founder-head{display:flex;align-items:center;gap:1.1rem;margin-bottom:1.3rem;}
.founder-head .founder-photo{margin-bottom:0;width:88px;height:88px;}
.founder-card .founder-quote{margin:0;}
/* FAQ centralizada */
.section:has(.faq-accordion) .section-head{text-align:center;margin-left:auto;margin-right:auto;}
.section:has(.faq-accordion) .section-head .kicker{justify-content:center;}
.faq-accordion{max-width:760px;margin-left:auto;margin-right:auto;}
@media (min-width:1200px){.page--inner .max-w-shell:has(.faq-accordion){padding-left:0;}}

/* ============================================================
   BRAND LOADER / VINHETA (cinematic entrance on first load)
   Full-screen overlay: UPTEC logo + wordmark + gold progress bar.
   Deep navy with glass-blur vignette. Exits on a scale+fade.
   z-index 500: above everything including quote modal (400).
   ============================================================ */
#brand-loader {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  /* deep-navy radial vignette */
  background:
    radial-gradient(ellipse 85% 85% at 50% 50%, rgba(9, 14, 28, 0.92) 0%, rgba(3, 5, 12, 0.99) 100%);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  opacity: 0;
  pointer-events: none;
  transform: scale(1);
  /* transitions: controlled per state below */
  transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
#brand-loader.is-visible {
  opacity: 1;
  pointer-events: auto;
  /* Failsafe puro-CSS: se o JS nao esconder o loader, ele some sozinho em ~3.5s (evita tela travada) */
  animation: bl-failsafe-hide 0.5s ease 3.5s forwards;
}
@keyframes bl-failsafe-hide {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}
#brand-loader.is-exiting {
  opacity: 0;
  transform: scale(1.06);
  pointer-events: none;
  transition: opacity 0.42s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Logo pulsing glow */
.bl-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(216, 177, 90, 0.60));
  animation: bl-logo-pulse 1.6s ease-in-out infinite;
}
@keyframes bl-logo-pulse {
  0%, 100% { filter: drop-shadow(0 0 16px rgba(216, 177, 90, 0.48)); transform: scale(1); }
  50%       { filter: drop-shadow(0 0 32px rgba(216, 177, 90, 0.82)); transform: scale(1.04); }
}

/* Wordmark */
.bl-wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28rem;
}
.bl-name {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.55rem;
  letter-spacing: 0.07em;
  color: var(--c-white);
  line-height: 1;
}
.bl-tag {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--c-gold);
  line-height: 1;
}

/* Progress bar */
.bl-bar-track {
  width: 160px;
  height: 2px;
  background: rgba(216, 177, 90, 0.18);
  border-radius: var(--radius-bar);
  overflow: hidden;
  margin-top: 0.4rem;
}
.bl-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--c-gold), var(--c-gold-soft));
  border-radius: var(--radius-bar);
  box-shadow: 0 0 10px rgba(216, 177, 90, 0.7);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   STAGGER REVEALS for grids
   Cards in .srv-grid, .diff-grid, .tile-grid, .segmentos-grid,
   .counters-grid get a subtle cascade via nth-child delay.
   The .in-view transition-delay is applied here; it does NOT
   prevent the card from revealing (delay only applies on entry,
   and the failsafe always forces in-view eventually).
   ============================================================ */
/* srv-grid stagger */
.srv-grid [data-reveal]:nth-child(1).in-view { transition-delay: 0s; }
.srv-grid [data-reveal]:nth-child(2).in-view { transition-delay: 0.06s; }
.srv-grid [data-reveal]:nth-child(3).in-view { transition-delay: 0.12s; }
.srv-grid [data-reveal]:nth-child(4).in-view { transition-delay: 0.18s; }
.srv-grid [data-reveal]:nth-child(5).in-view { transition-delay: 0.24s; }
.srv-grid [data-reveal]:nth-child(n+6).in-view { transition-delay: 0.30s; }

/* diff-grid stagger */
.diff-grid [data-reveal]:nth-child(1).in-view { transition-delay: 0s; }
.diff-grid [data-reveal]:nth-child(2).in-view { transition-delay: 0.06s; }
.diff-grid [data-reveal]:nth-child(3).in-view { transition-delay: 0.12s; }
.diff-grid [data-reveal]:nth-child(4).in-view { transition-delay: 0.18s; }

/* tile-grid stagger */
.tile-grid [data-reveal]:nth-child(1).in-view { transition-delay: 0s; }
.tile-grid [data-reveal]:nth-child(2).in-view { transition-delay: 0.06s; }
.tile-grid [data-reveal]:nth-child(3).in-view { transition-delay: 0.12s; }
.tile-grid [data-reveal]:nth-child(4).in-view { transition-delay: 0.18s; }
.tile-grid [data-reveal]:nth-child(5).in-view { transition-delay: 0.24s; }
.tile-grid [data-reveal]:nth-child(n+6).in-view { transition-delay: 0.30s; }

/* segmentos-grid stagger */
.segmentos-grid [data-reveal]:nth-child(1).in-view { transition-delay: 0s; }
.segmentos-grid [data-reveal]:nth-child(2).in-view { transition-delay: 0.07s; }
.segmentos-grid [data-reveal]:nth-child(3).in-view { transition-delay: 0.14s; }
.segmentos-grid [data-reveal]:nth-child(4).in-view { transition-delay: 0.21s; }

/* counters-grid stagger */
.counters-grid [data-reveal]:nth-child(1).in-view { transition-delay: 0s; }
.counters-grid [data-reveal]:nth-child(2).in-view { transition-delay: 0.06s; }
.counters-grid [data-reveal]:nth-child(3).in-view { transition-delay: 0.12s; }
.counters-grid [data-reveal]:nth-child(4).in-view { transition-delay: 0.18s; }

/* mobile-cta-bar (sticky) */
.mobile-cta-bar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  padding: 0.8rem 1rem;
  background: rgba(7, 11, 24, 0.96);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,0.08);
  gap: 0.75rem;
}
@media (max-width: 768px) {
  .mobile-cta-bar { display: flex; }
  .mobile-cta-bar .btn-gold,
  .mobile-cta-bar .btn-emergency { flex: 1; justify-content: center; min-height: 44px; }
}

/* ============================================================
   RESPONSIVE QA FIXES — 2026-06-20
   ALL rules below are max-width only. Zero base rules touched.
   ============================================================ */

/* ---- 1. SEGMENTOS-GRID: explicit 2-col tablet, 1-col phone ---- */
/* Already handled at 1100px (2-col) and 640px (1-col) above.
   Add 480px safety to ensure 1-col on very narrow phones.        */
@media (max-width: 480px) {
  .segmentos-grid { grid-template-columns: 1fr; }
}
/* Ensure cards never cause overflow on phone */
@media (max-width: 640px) {
  .segmentos-grid .srv-card { min-width: 0; }
}

/* ---- 2. SRV-GRID: fix srv-card--tall row-span on tablet ----
   At 768px-1100px the grid is 2-col. srv-card--tall spans 2 rows
   making the grid unbalanced. Collapse it to span 1 row.         */
@media (max-width: 1100px) {
  /* Tall card: already grid-row:span 1 via existing rule - confirm */
  /* Wide card: spans 2 cols (correct at 2-col grid) */
  .srv-grid { min-width: 0; }
  .srv-grid .srv-card { min-width: 0; }
}

/* ---- 3. SECTION-HEAD--SPLIT: collapse earlier (at 768px) ---- */
@media (max-width: 768px) {
  .section-head--split {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ---- 4. COUNTERS-GRID: stay 2-col on phone (fine), but
   reduce number font + padding at very narrow widths             */
@media (max-width: 390px) {
  .counters-grid { grid-template-columns: 1fr 1fr; }
  .counter { padding: 1.1rem 0.8rem; }
  .counter__num { font-size: clamp(1.4rem, 5.5vw, 1.8rem); }
}

/* ---- 5. DIFF-GRID: ensure ghost-num never bleeds out on phone -- */
@media (max-width: 640px) {
  .diff-card { overflow: hidden; }
  .ghost-num { font-size: clamp(2.5rem, 12vw, 4rem); }
  .diff-card--lead, .diff-card { padding: 1.2rem; }
}

/* ---- 6. TILE-GRID: already collapses at 640px. On 768px (iPad)
   ensure 2-col is not too cramped — already 1fr 1fr, OK.        */

/* ---- 7. CHECK-LIST: already 1-col at 640px. Ensure no overflow -- */
@media (max-width: 640px) {
  .check-list { min-width: 0; }
  .check-list li { min-width: 0; word-break: break-word; }
}

/* ---- 8. STAT-TILES: already 1-col at 480px. Confirm 2-col at
   tablet looks proportionate (stat-tile__v is clamp-sized OK).  */

/* ---- 9. FOOTER: ensure no overflow at all phone sizes ---------- */
@media (max-width: 640px) {
  .site-footer__top { gap: 1.5rem; }
  .site-footer__desc { max-width: none; }
  .site-footer__data-value { word-break: break-all; }
  .site-footer__col { min-width: 0; }
}
/* Footer 2-col to 1-col: already done at 640px above. iPad 768:
   stays 2-col but both brand-wide + 1 col is readable.          */

/* ---- 10. PILL SETS + BADGES: ensure wrapping on narrow phones -- */
@media (max-width: 390px) {
  .pill-set li, .licit__pills li, .cert-pills li, .diff-pills li {
    font-size: 0.72rem;
    padding: 0.4rem 0.7rem;
  }
}

/* ---- 11. MVV ITEM: at 768px-1100px, 130px label may be tight.
   Reduce label column on tablet.                                  */
@media (max-width: 900px) {
  .mvv__item { grid-template-columns: 100px 1fr; gap: 1rem; }
}

/* ---- 12. ENG-CARDS (quem somos): already 1-col at 640px.
   At 768px the 2-col is tight — collapse to 1-col.               */
@media (max-width: 768px) {
  .eng-cards { grid-template-columns: 1fr; }
  .eng-cards--lic { grid-template-columns: 1fr; }
}

/* ---- 13. ABOUT SIDE: sticky top can trap on mobile. Already
   static at 1100px. Ensure gap is comfortable at 768px.          */
@media (max-width: 900px) {
  .about__side { gap: 1rem; }
  .founder-photo { width: 72px; height: 72px; }
}

/* ---- 14. CASE GRID: already 1-col at 1100px. Confirm phone
   image is constrained in height.                                 */

/* ---- 15. INNER-HERO: at iPad (768px) the shaft is still at 38%
   opacity 0.45 — reduce opacity more for readability.             */
@media (max-width: 900px) {
  .inner-hero__shaft { width: 32%; opacity: 0.30; }
}
@media (max-width: 768px) {
  .inner-hero__shaft { opacity: 0.20; }
  .inner-hero__title { max-width: 90%; }
  .inner-hero__lead { max-width: 90%; }
}

/* ---- 16. HERO shaft: at 768px-900px reduce further before hiding at 640px */
@media (max-width: 900px) {
  .hero__shaft { width: 36%; opacity: 0.40; }
}

/* ---- 17. BREADCRUMB: prevent overflow on narrow phones ---------- */
@media (max-width: 480px) {
  .breadcrumb { flex-wrap: wrap; gap: 0.35rem; font-size: 0.68rem; }
}

/* ---- 18. DOC-ITEM: badge stays on its own line on narrow phone -- */
@media (max-width: 480px) {
  .doc-item { gap: 0.6rem; padding: 0.7rem 0.8rem; }
  .doc-item__name { font-size: 0.88rem; }
  .badge { font-size: 0.62rem; padding: 0.28rem 0.5rem; }
}

/* ---- 19. PORQUE-ITEM: already 1-col at 1100px. On iPad (768px)
   it is 1-col (correct). Ensure icon + text gap looks right.     */
@media (max-width: 768px) {
  .porque-item { padding: 1rem 1.1rem; }
}

/* ---- 20. QUOTE-CTA BANNER: stacks at 760px (existing rule OK).
   On phone reduce padding.                                        */

/* ---- 21. SRV-BLOCK actions on tablet: full-width at 768px ------- */
@media (max-width: 768px) {
  .srv-block__actions {
    flex-direction: column;
    gap: 0.75rem;
  }
  .srv-block__actions .btn-gold,
  .srv-block__actions .btn-ghost,
  .srv-block__actions .btn-emergency {
    width: 100%;
    justify-content: center;
  }
}

/* ---- 22. CONTACT-GRID aside: on phone tighten cards ------------- */
@media (max-width: 640px) {
  .info-card, .data-card { padding: 1.3rem; border-radius: var(--radius-md); }
  .contact-aside { gap: 1rem; }
}

/* ---- 23. RECV-LIST items on phone: icon stays small, text wraps -- */
@media (max-width: 480px) {
  .recv-item { padding: 1rem; gap: 0.75rem; }
  .recv-item__ic { width: 36px; height: 36px; flex-shrink: 0; }
}

/* ---- 24. CTA-BAND on iPad: button row may be cramped at 768px --- */
@media (max-width: 768px) {
  .cta-band__inner { border-radius: var(--radius-lg); }
  .cta-band__title { font-size: clamp(1.4rem, 4.5vw, 2rem); }
}

/* ---- 25. GLOBAL: ensure all flex/grid children have min-width:0
   to prevent text overflow inside grid/flex cells on phones.      */
@media (max-width: 640px) {
  .tile-card, .srv-card, .diff-card, .recv-item,
  .porque-item, .counter, .eng-card, .ident-cell,
  .doc-item, .info-card, .data-card, .quote-cta,
  .feature-box { min-width: 0; }
}

/* ===== FIX: secoes escuras precisam de tokens CLAROS (tokens globais agora sao do tema claro) ===== */
.panel--dark {
  --c-text: rgba(255,255,255,0.74);
  --c-text-dim: rgba(255,255,255,0.54);
  --c-ink: var(--c-white);
  --c-ink-dim: rgba(255,255,255,0.74);
  --c-ink-faint: rgba(255,255,255,0.56);
  --c-surface: var(--c-navy-surface);
  --c-surface-2: var(--c-navy-surface-2);
  --c-cream: var(--c-navy-surface);
  --c-cream-2: var(--c-navy-surface-2);
  --c-line: rgba(255,255,255,0.10);
  --c-line-strong: rgba(255,255,255,0.16);
  --c-light-line: rgba(255,255,255,0.10);
  --c-light-line-strong: rgba(255,255,255,0.16);
  --c-gold-deep: var(--c-gold);
  color: rgba(255,255,255,0.74);
}

/* ===== AUDIT FIXES (web-visual-audit) ===== */
/* hero + footer + quote-modal precisam dos tokens claros (nao sao .panel--dark) */
.hero, .site-footer, .quote-modal {
  --c-text: rgba(255,255,255,0.76);
  --c-text-dim: rgba(255,255,255,0.58);
  --c-ink: var(--c-white);
  --c-ink-dim: rgba(255,255,255,0.76);
  --c-ink-faint: rgba(255,255,255,0.58);
  --c-line: rgba(255,255,255,0.10);
  --c-gold-deep: var(--c-gold);
}
.panel--dark { --c-text-dim: rgba(255,255,255,0.60); }
.panel--dark .data-row__k, .panel--dark .data-card__k, .panel--dark .ident-cell__k { color: rgba(255,255,255,0.62); }
/* eng-card em secao clara: nomes estavam branco sobre creme */
.panel--light .eng-card { background: var(--c-cream-2); border-color: var(--c-light-line); }
.panel--light .eng-card strong { color: var(--c-ink); }
.panel--light .eng-card__role { color: var(--c-gold-deep); }
.panel--light .eng-card__crea { color: var(--c-ink-faint); }
/* marquee estava quase invisivel (0.28) */
.marquee__item { color: rgba(22,22,22,0.52); }
.marquee__item.is-gold { color: #9a7232; }
/* pills em secao escura: fundo mais visivel */
.panel--dark .pill-set li, .panel--dark .licit__pills li, .panel--dark .cert-pills li { background: rgba(216,177,90,var(--gold-a-fill)); }
/* textos claros que ficaram palidos */
.panel--light .porque-item span { color: var(--c-ink); }
.panel--light .check-list li strong { color: var(--c-ink); }
/* mobile: evitar quebra tipo Salva-dor */
.check-list li { word-break: normal; overflow-wrap: normal; }

/* ================================================================
   CAMADA EDITORIAL
   Objetivo: tirar a cara de template. O site repetia a mesma formula
   39x (kicker dourado -> titulo com uma palavra dourada -> grade de
   cards identicos). Aqui o dourado vira pontuacao rara, listas param
   de ser cards e a secao ganha marcacao de documento tecnico.
   ================================================================ */

/* --- 1. KICKER: de acento dourado a rotulo de documento ---------
   Eram 39 kickers dourados competindo com os CTAs. Neutralizados,
   o dourado volta a significar acao. */
.kicker {
  color: var(--c-ink-faint);
  letter-spacing: 0.18em;
  font-weight: 400;
}
.panel--dark .kicker, .hero .kicker, .site-footer .kicker { color: rgba(255, 255, 255, 0.48); }
.kicker-tick {
  width: 32px;
  background: currentColor;
  box-shadow: none;
  opacity: 0.55;
}
.kicker-sep { color: currentColor; opacity: 0.4; }

/* --- 2. NUMERACAO DE SECAO: marcacao de relatorio tecnico -------
   Numero em mono na margem, fora da coluna de texto. Da ritmo e
   referencia sem poluir o conteudo. So em telas largas. */
.page { counter-reset: sec; }
@media (min-width: 1180px) {
  .section-head { position: relative; }
  .section-head::before {
    counter-increment: sec;
    content: counter(sec, decimal-leading-zero);
    position: absolute;
    left: -3.6rem;
    top: 0.15rem;
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--c-ink-faint);
    opacity: 0.5;
  }
  .panel--dark .section-head::before { color: rgba(255, 255, 255, 0.34); }
}

/* --- 3. DE-CARD: listas voltam a ser listas ---------------------
   .doc-item (39x) e .porque-item (6x) sao itens de lista, nao
   cards. Moldura em cada linha e o que mais gerava ruido visual. */
.doc-item,
.porque-item {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--c-line);
  border-radius: 0;
  padding: 0.85rem 0.1rem;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.doc-item:hover,
.porque-item:hover {
  background: none;
  transform: none;
  border-bottom-color: rgba(216, 177, 90, var(--gold-a-border-hover));
}
.panel--light .doc-item,
.panel--light .porque-item { background: none; border-bottom-color: var(--c-light-line); }
.doc-list, .porque-grid { gap: 0 !important; }

/* --- 4. DOURADO COMO PONTUACAO, NAO DECORACAO -------------------
   Icone de check em cada linha de lista somava dezenas de pontos
   dourados. Neutralizados; o dourado fica para CTA e numeros. */
.doc-item__ic,
.porque-item svg,
.check-list li svg { color: var(--c-ink-faint); opacity: 0.75; }
.panel--dark .doc-item__ic,
.panel--dark .porque-item svg,
.panel--dark .check-list li svg { color: rgba(255, 255, 255, 0.42); }

/* --- 5. CARDS MAIS QUIETOS -------------------------------------
   Os cards que continuam cards perdem peso de moldura: a borda
   deixa de disputar atencao com o conteudo. */
.srv-card, .tile-card, .feature-box { border-color: var(--c-line); }
.panel--light .srv-card,
.panel--light .tile-card,
.panel--light .feature-box { border-color: var(--c-light-line); }

/* --- 6. TITULO DE SECAO: um pouco mais de ar -------------------- */
.section-title { line-height: 1.12; }
.section-head { margin-bottom: clamp(2rem, 4vw, 3.2rem); }

/* --- 7. NUMEROS SEM MOLDURA -------------------------------------
   A faixa de indicadores era uma caixa com 4 celulas fechadas. Em
   composicao editorial o numero e a evidencia: ele carrega o peso
   sozinho, separado apenas por filete. */
.counters-grid {
  background: none;
  border: 0;
  border-radius: 0;
  gap: 0;
}
.counter,
.panel--light .counter,
#page-home .counter {
  background: none;
  border: 0;
  border-left: 1px solid var(--c-line);
  padding: 0.4rem 2.2rem;
}
.panel--light .counter { border-left-color: var(--c-light-line); }
.panel--light .counters-grid { background: none; border-color: transparent; }

/* O divisor marca a separacao ENTRE colunas, entao o primeiro item de
   cada linha nunca tem divisor nem recuo. Em 4 colunas isso e so o
   primeiro; em 2 colunas (<=1100px) e todo item impar. Os seletores
   repetem o prefixo #page-home porque a regra base do arquivo usa esse
   ID e, sem igualar a especificidade, o recuo voltaria. */
@media (min-width: 1101px) {
  .counter:first-child,
  .panel--light .counter:first-child,
  #page-home .counter:first-child { border-left: 0; padding-left: 0; }
}
@media (max-width: 1100px) {
  .counter:nth-child(odd),
  .panel--light .counter:nth-child(odd),
  #page-home .counter:nth-child(odd) { border-left: 0; padding-left: 0; }
  .counters-grid { row-gap: 1.8rem; }
}
.counter__num { letter-spacing: -0.035em; }
.counter__label { opacity: 0.72; }


/* --- 8. CORRECOES DE RESPONSIVIDADE -----------------------------

   a) NAV 1024-1178px: os links do menu ja estao ocultos nessa faixa,
      mas o bloco de acoes nao era empurrado para a direita — o botao
      hamburguer colava no logo e sobrava uma barra vazia inteira. */
.site-nav__actions { margin-left: auto; }

/* b) CARD ALTO: .srv-card--tall ocupava 2 linhas da grade sem ter
      conteudo para preencher, abrindo 191px de vazio dentro do card
      acima de 1180px. A grade passa a ser uniforme. */
.srv-card--tall { grid-row: auto; }

/* c) RODAPE 641-1100px: a grade cai para 2 colunas e o bloco da marca
      ocupa a linha inteira, sobrando 3 colunas para 2 vagas. A coluna
      "Empresa" ficava orfa na ultima linha com metade da largura vazia
      ao lado. Ela passa a ocupar a linha toda e distribui o proprio
      conteudo em duas colunas. */
@media (min-width: 641px) and (max-width: 1100px) {
  .site-footer__col:last-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 3vw, 3rem);
    row-gap: 0.65rem;
    align-content: start;
  }
  .site-footer__col:last-child > .site-footer__col-title { grid-column: 1 / -1; }
  /* o bloco da marca ja ocupava a linha inteira nessa faixa, o que
     esticava os dois CTAs por toda a largura. Limitado a uma coluna
     de leitura. */
  .site-footer__brand > * { max-width: 34rem; }
}

/* d) LINK "SAIBA MAIS" ANCORADO NA BASE DO CARD
      Os cards ja tem altura igual (a grade estica), mas o link vinha
      logo depois do paragrafo — entao sua altura variava conforme o
      texto tivesse 3 ou 4 linhas. Como o card e flex-column, empurrar
      o link com margin-top:auto fixa a mesma distancia da borda
      inferior em todos, independente do tamanho do texto. */
.srv-card > .link-arrow {
  margin-top: auto;
  padding-top: 0.35rem;
}

/*    O .srv-card--tall tinha padding inferior maior que os irmaos
      (1.65rem contra 1.55rem), justificado no codigo por "ocupar 2
      linhas da grade". Esse span foi removido, entao a excecao perdeu
      o motivo — e deixava o link 2px fora de alinhamento em relacao
      aos cards vizinhos. Padding unificado. */
.srv-card--tall { padding: 1.6rem 1.65rem 1.55rem; }