:root {
  --navy: #1a323c;
  --navy-800: #14262e;
  --navy-900: #0e1b21;
  --navy-50: #eef2f3;
  --gold: #c9a86a;
  --gold-light: #e4cd9a;
  --green: #25d366;
  --green-dark: #1ebe5a;
  --ink: #1c2b30;
  --paper: #fbfaf8;
  --paper-alt: #f2efe9;
  --line: rgba(26, 50, 60, 0.1);
  --shadow-md: 0 12px 32px rgba(14, 27, 33, 0.12);
  --shadow-lg: 0 24px 60px rgba(14, 27, 33, 0.18);
  --radius: 18px;
  --font-head: "Poppins", sans-serif;
  --font-body: "Inter", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* -webkit-tap-highlight-color is a mobile-WebKit-only property, so it is safe unconditionally
   here — it just suppresses the blue flash rectangle on every tap. */
html { scroll-behavior: auto; overflow-x: hidden; -webkit-tap-highlight-color: transparent; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

/* ---------- Preloader ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 42%, var(--navy-800) 0%, var(--navy-900) 75%);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.7s;
}
.preloader.preloader-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-glow {
  position: absolute;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(201, 168, 106, 0.3), transparent 70%);
  border-radius: 50%;
  filter: blur(10px);
  animation: preloaderPulse 2.2s ease-in-out infinite;
}
@keyframes preloaderPulse {
  0%, 100% { transform: scale(0.85); opacity: 0.55; }
  50% { transform: scale(1.12); opacity: 1; }
}
.preloader-content { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.preloader-logo {
  height: 220px;
  width: auto;
  opacity: 0;
  transform: scale(0.8) translateY(10px);
  animation: preloaderLogoIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
  filter: drop-shadow(0 0 22px rgba(201, 168, 106, 0.4));
}
@keyframes preloaderLogoIn { to { opacity: 1; transform: scale(1) translateY(0); } }
.preloader-line {
  display: block;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
  background-size: 200% 100%;
  animation: preloaderLineGrow 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.7s forwards,
             preloaderLineShimmer 1.4s linear 1.5s infinite;
}
@keyframes preloaderLineGrow { to { width: 130px; } }
@keyframes preloaderLineShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}
.container-narrow { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 24px; }

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.01em; color: var(--navy); }
h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); line-height: 1.12; }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.2; }
h3 { font-size: 1.15rem; }

.highlight { color: var(--gold); position: relative; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.eyebrow-light { color: var(--gold-light); }

.mb-md { margin-bottom: 20px; }
.mb-lg { margin-bottom: 28px; }

/* ---------- Progress bar ---------- */
.progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--green));
  box-shadow: 0 0 12px rgba(201, 168, 106, 0.6);
  z-index: 2000;
  transition: width 0.1s linear;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 26px;
  border-radius: 100px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  white-space: nowrap;
}
.btn-whatsapp { background: var(--green); color: #fff; box-shadow: 0 10px 26px rgba(37, 211, 102, 0.35); }
.btn-whatsapp:hover { background: var(--green-dark); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(37, 211, 102, 0.45); }
.btn-lg { padding: 17px 34px; font-size: 1.02rem; }
.btn-ghost { background: transparent; color: var(--navy); border: 1.5px solid var(--line); }
.btn-ghost:hover { background: var(--navy-50); transform: translateY(-2px); }
.btn-header { padding: 10px 20px; font-size: 0.85rem; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 18px 0;
  transition: background 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease;
}
.site-header.scrolled, .site-header.is-inner {
  background: rgba(251, 250, 248, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 10px 0;
  box-shadow: 0 4px 24px rgba(14, 27, 33, 0.08);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; align-items: center; }
.brand-logo { height: 68px; width: auto; transition: height 0.35s ease; }
.site-header.scrolled .brand-logo, .site-header.is-inner .brand-logo { height: 48px; }
.logo-light-bg { display: none; }
.site-header.scrolled .logo-dark-bg, .site-header.is-inner .logo-dark-bg { display: none; }
.site-header.scrolled .logo-light-bg, .site-header.is-inner .logo-light-bg { display: block; }

.main-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 999px;
  padding: 6px;
  transition: background 0.35s ease, border-color 0.35s ease;
}
.site-header.scrolled .main-nav, .site-header.is-inner .main-nav { background: var(--navy-50); border-color: transparent; }
.main-nav a, .main-nav .nav-drop-trigger {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  padding: 10px 18px;
  border-radius: 999px;
  transition: color 0.25s ease, background 0.25s ease;
  white-space: nowrap;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.site-header.scrolled .main-nav a, .site-header.is-inner .main-nav a,
.site-header.scrolled .main-nav .nav-drop-trigger, .site-header.is-inner .main-nav .nav-drop-trigger { color: var(--navy); opacity: 0.72; }
.main-nav a:hover, .main-nav .nav-drop-trigger:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.site-header.scrolled .main-nav a:hover, .site-header.is-inner .main-nav a:hover,
.site-header.scrolled .main-nav .nav-drop-trigger:hover, .site-header.is-inner .main-nav .nav-drop-trigger:hover { color: var(--navy); opacity: 1; background: rgba(26, 50, 60, 0.06); }
.main-nav a.active { color: var(--navy); background: #fff; opacity: 1; }
.site-header.scrolled .main-nav a.active, .site-header.is-inner .main-nav a.active { color: #fff; background: var(--navy); }
.main-nav a.nav-cta-mobile { display: none; }

.nav-drop-icon { font-size: 0.65rem; transition: transform 0.25s ease; }
.nav-item-drop { position: relative; }
.nav-item-drop:hover .nav-drop-icon { transform: rotate(180deg); }
.nav-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 300px;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 50;
}
.nav-item-drop:hover .nav-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-dropdown a {
  display: block;
  color: var(--navy) !important;
  opacity: 1 !important;
  background: none !important;
  padding: 11px 16px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 500;
  text-align: left;
}
.nav-dropdown a:hover { background: var(--navy-50) !important; color: var(--navy) !important; }
.nav-dropdown a.nav-dropdown-all { color: var(--gold) !important; font-weight: 600; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 13px; border-radius: 0 0 10px 10px; }

.nav-toggle {
  display: none;
  position: relative;
  z-index: 1300;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 40px;
  height: 40px;
}
.nav-toggle span {
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.25s ease, background 0.35s ease;
}
.site-header.scrolled .nav-toggle span, .site-header.is-inner .nav-toggle span { background: var(--navy); }
.nav-toggle.open span { background: #fff; }
.nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Breadcrumb ---------- */
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 0.85rem; color: #6b7a80; margin-bottom: 24px; }
.breadcrumb a { color: #6b7a80; text-decoration: none; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span.sep { opacity: 0.5; }
.breadcrumb span.current { color: var(--navy); font-weight: 600; }

/* ---------- Page header (inner pages) ---------- */
.page-hero {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-800) 55%, var(--navy-900) 100%);
  padding: 150px 0 70px;
  position: relative;
  overflow: hidden;
}
.page-hero .eyebrow, .page-hero h1 { color: #fff; }
.page-hero .eyebrow { color: var(--gold); }
.page-hero p { color: rgba(255,255,255,0.8); font-size: 1.08rem; max-width: 640px; margin-top: 16px; }
.page-hero .breadcrumb a { color: rgba(255,255,255,0.6); }
.page-hero .breadcrumb span.current { color: #fff; }
.page-hero .breadcrumb span.sep { color: rgba(255,255,255,0.4); }

/* ---------- Media bar ---------- */
.media-bar { background: var(--paper-alt); padding: 26px 0; border-bottom: 1px solid var(--line); }
.media-bar-inner { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; justify-content: center; }
.media-bar-label { font-size: 0.82rem; color: #6b7a80; font-weight: 500; }
.media-logos { display: flex; gap: 34px; flex-wrap: wrap; justify-content: center; }
.media-logos span { font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; color: var(--navy); opacity: 0.55; letter-spacing: -0.01em; }

/* ---------- Hero (home) ---------- */
.hero {
  position: relative;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-800) 55%, var(--navy-900) 100%);
  padding: 168px 0 110px;
  overflow: hidden;
}
.hero-bg-shape {
  position: absolute; top: -20%; right: -10%; width: 60%; height: 140%;
  background: radial-gradient(circle at center, rgba(201, 168, 106, 0.16), transparent 65%);
  pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 50px; align-items: center; position: relative; }
.hero-copy h1, .hero-copy .eyebrow { color: #fff; }
.hero-lead { color: rgba(255,255,255,0.82); font-size: 1.12rem; max-width: 540px; margin: 20px 0 32px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 46px; }
.hero-actions .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.28); }
.hero-actions .btn-ghost:hover { background: rgba(255,255,255,0.08); }
.hero-trust { display: flex; gap: 30px; flex-wrap: wrap; }
.trust-item { display: flex; flex-direction: column; gap: 3px; padding-left: 16px; border-left: 2px solid var(--gold); }
.trust-item strong { color: #fff; font-family: var(--font-head); font-size: 1.02rem; }
.trust-item span { color: rgba(255,255,255,0.62); font-size: 0.82rem; }

.hero-media { position: relative; }
.hero-photo-frame { position: relative; border-radius: 24px; overflow: visible; }
.hero-photo { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: top center; border-radius: 24px; box-shadow: var(--shadow-lg); }
.floating-card {
  position: absolute; background: rgba(251, 250, 248, 0.97); backdrop-filter: blur(10px);
  border-radius: 14px; padding: 14px 18px; box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: 2px; animation: floatY 5s ease-in-out infinite;
}
.fc-num { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: 1.15rem; }
.fc-label { font-size: 0.76rem; color: #5a6a70; max-width: 150px; }
.card-1 { top: 8%; left: -8%; animation-delay: 0s; }
.card-2 { bottom: 10%; right: -8%; animation-delay: 1.2s; }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- Hero (home) — spectacular treatment ---------- */
/* Scoped entirely under .hero-spectacular so the Auxílio-Acidente hero (same base classes) is untouched */
.hero-spectacular { isolation: isolate; }
.hero-spectacular .hero-grid { position: relative; z-index: 3; }

/* Scroll-driven intro: tall scroll track + sticky stage. Logo scene dissolves into the
   content scene as the visitor scrolls through the track (see script.js renderHeroIntro). */
.hero-scroll-intro {
  height: 230vh;
  padding: 0;
  background: none;
  overflow: visible;
}
.hero-scroll-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  min-height: 560px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-800) 55%, var(--navy-900) 100%);
}
/* Everything but the letterbox bars sits in this wrapper: on load it's blurred/overexposed and
   slightly zoomed, then "racks into focus" once #heroIntro gets .hero-cinema-in (see script.js). */
.hero-scene-focus {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  filter: blur(26px) brightness(1.55) saturate(1.15);
  transform: scale(1.07);
  transition: filter 1.3s cubic-bezier(.16,1,.3,1), transform 1.3s cubic-bezier(.16,1,.3,1);
}
#heroIntro.hero-cinema-in .hero-scene-focus { filter: blur(0) brightness(1) saturate(1); transform: scale(1); }

/* Cinema letterbox bars, framing the shot once it resolves */
.hero-letterbox {
  position: absolute; left: 0; right: 0; height: 0; background: var(--navy-900); z-index: 10; pointer-events: none;
  transition: height 0.8s cubic-bezier(.16,1,.3,1) 0.1s;
}
.hero-letterbox-top { top: 0; }
.hero-letterbox-bottom { bottom: 0; }
#heroIntro.hero-cinema-in .hero-letterbox { height: clamp(8px, 2.6vw, 38px); }

#heroIntro.hero-intro-static { height: auto; }
#heroIntro.hero-intro-static .hero-scroll-stage { position: relative; height: auto; min-height: 0; }
#heroIntro.hero-intro-static .hero-scene-focus { position: relative; filter: none; transform: none; }
#heroIntro.hero-intro-static .hero-letterbox { display: none; }
#heroIntro.hero-intro-static #heroLogoScene { display: none; }
#heroIntro.hero-intro-static .hero-copy .eyebrow,
#heroIntro.hero-intro-static .hero-h1 .h1-line,
#heroIntro.hero-intro-static .hero-lead,
#heroIntro.hero-intro-static .hero-actions,
#heroIntro.hero-intro-static .hero-stats,
#heroIntro.hero-intro-static .hero-media {
  opacity: 1 !important; transform: none !important;
}
#heroIntro.hero-intro-static .accent-word::after { width: 100%; }

.hero-aurora { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0; will-change: transform; }
.hero-aurora-1 { width: 640px; height: 640px; background: radial-gradient(circle, rgba(201,168,106,0.35), transparent 70%); top: -220px; right: -140px; animation: heroAurora1 24s ease-in-out infinite; }
.hero-aurora-2 { width: 520px; height: 520px; background: radial-gradient(circle, rgba(37,211,102,0.16), transparent 70%); bottom: -180px; left: -160px; animation: heroAurora2 28s ease-in-out infinite; }
@keyframes heroAurora1 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-50px, 36px) scale(1.1); } }
@keyframes heroAurora2 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px, -30px) scale(1.12); } }

/* Volumetric light: soft diagonal bands swaying slowly, like sunlight through blinds — not
   a spinner, no full rotation, just a slow atmospheric sway. */
.hero-godrays {
  position: absolute; inset: -15%; z-index: 1; pointer-events: none; opacity: 0.65;
  background: repeating-linear-gradient(115deg,
    rgba(228,205,154,0) 0px, rgba(228,205,154,0.05) 60px, rgba(228,205,154,0.13) 110px,
    rgba(228,205,154,0.05) 160px, rgba(228,205,154,0) 260px);
  mask-image: radial-gradient(ellipse 65% 75% at 22% 12%, black 0%, transparent 68%);
  -webkit-mask-image: radial-gradient(ellipse 65% 75% at 22% 12%, black 0%, transparent 68%);
  mix-blend-mode: screen;
  animation: heroGodraysSway 20s ease-in-out infinite;
}
@keyframes heroGodraysSway {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  50% { transform: translateX(3%) rotate(1.4deg); }
}

/* Drifting gold dust motes, generated in script.js */
.hero-dust {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden;
  transition: transform 0.6s cubic-bezier(.16,1,.3,1); will-change: transform;
}
.hero-dust-mote {
  position: absolute; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(228,205,154,0.95), rgba(228,205,154,0) 72%);
  animation: heroDustFloat linear infinite;
}
@keyframes heroDustFloat {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  12% { opacity: var(--mote-op, 0.55); }
  88% { opacity: var(--mote-op, 0.55); }
  100% { transform: translateY(-140px) translateX(18px); opacity: 0; }
}

/* Logo scene */
.hero-logo-scene {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  text-align: center;
}
.hero-logo-flash {
  position: absolute; left: 50%; top: 40%; width: 60vw; max-width: 560px; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.9), rgba(228,205,154,0.4) 42%, transparent 72%);
}
#heroIntro.hero-cinema-in .hero-logo-flash { animation: heroLogoFlash 1.5s ease-out 1s 1; }
@keyframes heroLogoFlash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  35% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
}
.hero-logo-mark-wrap {
  position: relative;
  opacity: 0; transform: scale(0.8);
  transition: opacity 1s ease 0.15s, transform 1.1s cubic-bezier(.34,1.56,.64,1) 0.15s;
}
#heroIntro.hero-cinema-in .hero-logo-mark-wrap { opacity: 1; transform: scale(1); }
.hero-logo-mark {
  width: clamp(170px, 22vw, 320px); height: auto;
  animation: heroLogoBreathe 4s ease-in-out infinite;
}
/* Metallic shine sweeping once across the logo's own letterforms — masked to the wordmark's
   shape via the same tightly-cropped PNG, so the light only catches the letters, not the space around them. */
.hero-logo-shine {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: url('/assets/img/logo-branco-tight.png');
  mask-image: url('/assets/img/logo-branco-tight.png');
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,0.95) 47%, rgba(228,205,154,0.95) 53%, transparent 68%);
  background-size: 260% 260%;
  background-position: -140% -140%;
}
#heroIntro.hero-cinema-in .hero-logo-shine { animation: heroLogoShine 1.4s ease-out 1.15s 1; }
@keyframes heroLogoShine {
  0% { background-position: -140% -140%; }
  100% { background-position: 140% 140%; }
}

/* Gold glow that follows the cursor, masked to the letters themselves (see script.js) */
.hero-logo-hoverglow {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: url('/assets/img/logo-branco-tight.png');
  mask-image: url('/assets/img/logo-branco-tight.png');
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  background: radial-gradient(120px circle at var(--lx, 50%) var(--ly, 50%), rgba(228,205,154,0.95), rgba(201,168,106,0.6) 55%, transparent 78%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.hero-logo-mark-wrap:hover .hero-logo-hoverglow { opacity: 1; }
@media (pointer: coarse) {
  .hero-logo-hoverglow { display: none; }
}
@keyframes heroLogoBreathe {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 26px rgba(201,168,106,0.3)); }
  50% { transform: scale(1.025); filter: drop-shadow(0 0 46px rgba(201,168,106,0.48)); }
}
.hero-logo-rule {
  display: block; width: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transition: width 0.9s cubic-bezier(.16,1,.3,1) 0.75s;
}
#heroIntro.hero-cinema-in .hero-logo-rule { width: 130px; }
.hero-logo-tagline {
  font-family: var(--font-head); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  font-size: 0.78rem; color: rgba(255,255,255,0.68);
  opacity: 0; transition: opacity 1s ease 0.95s;
}
#heroIntro.hero-cinema-in .hero-logo-tagline { opacity: 1; }
.hero-logo-scrollcue {
  position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: rgba(255,255,255,0.55); font-size: 0.74rem; letter-spacing: 0.04em;
  opacity: 0; transition: opacity 1s ease 1.2s;
}
#heroIntro.hero-cinema-in .hero-logo-scrollcue { opacity: 1; }

/* Depth parallax: three planes drifting at different speeds as the cursor moves (see script.js),
   like looking into a diorama — no glow, just the scene reacting to where you're looking. */
.hero-parallax-back {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  transition: transform 0.6s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}
.hero-grid-pattern {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 85% 65% at 50% 25%, black 35%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 85% 65% at 50% 25%, black 35%, transparent 85%);
  transition: transform 0.6s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}

.hero-grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.hero-spectacular .hero-eyebrow-live { display: inline-flex; align-items: center; gap: 9px; }
.hero-spectacular .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; animation: heroLiveDot 2s ease-in-out infinite; }
@keyframes heroLiveDot {
  0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.55); }
  70% { box-shadow: 0 0 0 9px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

.hero-spectacular .hero-h1 .h1-line { display: block; }
.hero-spectacular .accent-word { color: var(--gold-light); position: relative; white-space: nowrap; }
.hero-spectacular .accent-word::after {
  content: ""; position: absolute; left: 0; bottom: 2px; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--gold), var(--green));
  border-radius: 2px;
}

.hero-spectacular .hero-stats {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  padding-top: 28px; margin-top: 8px; border-top: 1px solid rgba(255,255,255,0.14);
}
.hero-spectacular .hero-stat { display: flex; flex-direction: column; gap: 3px; }
.hero-spectacular .hero-stat-num { font-family: var(--font-head); font-weight: 700; color: #fff; font-size: 1.1rem; letter-spacing: -0.01em; }
.hero-spectacular .hero-stat-label { font-size: 0.78rem; color: rgba(255,255,255,0.58); }
.hero-spectacular .hero-stat-divider { width: 1px; height: 32px; background: rgba(255,255,255,0.16); }

.hero-spectacular .btn-glow { position: relative; z-index: 0; animation: heroCtaBreathe 3.2s ease-in-out infinite; }
.hero-spectacular .btn-glow::before {
  content: ""; position: absolute; inset: -3px; border-radius: 100px; z-index: -1;
  background: linear-gradient(90deg, var(--green), var(--gold), var(--green));
  background-size: 200% 100%; filter: blur(12px); opacity: 0; transition: opacity 0.3s ease;
}
.hero-spectacular .btn-glow:hover::before { opacity: 0.75; animation: heroGlowShift 2.4s linear infinite; }
@keyframes heroCtaBreathe { 0%, 100% { box-shadow: 0 10px 26px rgba(37,211,102,0.35); } 50% { box-shadow: 0 12px 38px rgba(37,211,102,0.55); } }
@keyframes heroGlowShift { to { background-position: -200% 0; } }

/* Full-bleed dramatic photo: .hero-media breaks out of the text column and pins to the
   right edge of the whole stage (not just the container), like a large editorial portrait. */
@media (min-width: 981px) {
  .hero-spectacular .hero-copy { max-width: 580px; }
  .hero-spectacular .hero-h1 { font-size: clamp(2rem, 3.6vw, 3.05rem); }
  .hero-spectacular #heroContentScene.hero-grid { display: block; }
  .hero-spectacular .hero-media {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 47%;
    z-index: 2;
  }
  /* Cards now float over an edge-to-edge photo, not a boxed card — keep them clear of the header and
     the viewport edge. max() and a capped max-width guarantee a safety margin regardless of frame size. */
  .hero-spectacular .floating-card { max-width: min(260px, calc(100% - 40px)); box-sizing: border-box; }
  .hero-spectacular .floating-card.card-1 { top: 18%; left: max(7%, 20px); }
  .hero-spectacular .floating-card.card-2 { bottom: 14%; right: max(6%, 20px); }
}
.hero-spectacular .hero-photo-frame { position: relative; width: 100%; height: 100%; border-radius: 0; transform-style: preserve-3d; transition: transform 0.1s linear; }
.hero-spectacular .hero-photo {
  width: 100%; height: 100%; aspect-ratio: unset;
  object-fit: cover; object-position: 50% 14%;
  border-radius: 0; box-shadow: none;
}
.hero-spectacular .hero-photo-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: 0;
  background:
    linear-gradient(90deg, var(--navy-900) 0%, rgba(14,27,33,0) 30%, rgba(14,27,33,0) 68%, rgba(14,27,33,0.55) 100%),
    linear-gradient(180deg, rgba(14,27,33,0) 60%, rgba(14,27,33,0.55) 100%);
}

.btn-gold-pill {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--navy) !important;
  border: none;
  font-weight: 700;
  box-shadow: 0 10px 26px rgba(201,168,106,0.3);
}
.btn-gold-pill:hover { background: linear-gradient(135deg, var(--gold), var(--gold-light)); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(201,168,106,0.42); }

.hero-spectacular .floating-card { flex-direction: row; align-items: center; gap: 12px; }
.hero-spectacular .fc-icon {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--navy), var(--navy-800)); color: var(--gold-light);
}
.hero-spectacular .fc-text { display: flex; flex-direction: column; gap: 2px; }

.scroll-cue-mouse {
  width: 22px; height: 34px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,0.4);
  display: flex; justify-content: center; padding-top: 6px;
}
.scroll-cue-dot { width: 3px; height: 6px; border-radius: 2px; background: var(--gold); animation: heroScrollDot 1.8s ease-in-out infinite; }
@keyframes heroScrollDot { 0% { transform: translateY(0); opacity: 1; } 70% { opacity: 0; } 100% { transform: translateY(10px); opacity: 0; } }

/* Content scene — starts hidden, revealed continuously as the visitor scrolls through
   the intro track (opacity/transform set inline by renderHeroIntro() in script.js) */
/* padding-block only — #heroContentScene is also a .container, and a `padding` shorthand
   here would wipe its 0 24px side gutters and glue the headline to the screen edge. */
#heroContentScene { position: relative; z-index: 3; padding-block: 110px 90px; }

/* Short/unmaximized browser windows: the hero stage is a fixed 100vh box with overflow
   hidden. Everything below scales fluidly with viewport height (clamp, vh units) instead of
   snapping at breakpoints, so nothing ever just disappears — it only gets more compact. */
@media (min-width: 981px) {
  #heroContentScene { padding-block: clamp(64px, 15vh, 110px) clamp(28px, 10vh, 90px); }
  .hero-spectacular .hero-h1 { font-size: clamp(1.6rem, min(4.2vw, 5.6vh), 3.4rem); }
  .hero-spectacular .hero-copy .eyebrow { margin-bottom: clamp(6px, 1.6vh, 14px); }
  .hero-spectacular .hero-lead {
    margin: clamp(8px, 2.2vh, 20px) 0 clamp(14px, 3.5vh, 32px);
    font-size: clamp(0.9rem, 2vh, 1.12rem);
  }
  .hero-spectacular .hero-actions { margin-bottom: clamp(16px, 5vh, 46px); }
  .hero-spectacular .hero-stats { padding-top: clamp(14px, 3vh, 28px); margin-top: clamp(4px, 1vh, 8px); }
}
.hero-spectacular .hero-copy .eyebrow,
.hero-spectacular .hero-h1 .h1-line,
.hero-spectacular .hero-lead,
.hero-spectacular .hero-actions,
.hero-spectacular .hero-stats,
.hero-spectacular .hero-media {
  opacity: 0;
  will-change: opacity, transform;
}
.hero-spectacular .accent-word::after { width: calc(var(--u, 0) * 100%); }

@media (prefers-reduced-motion: reduce) {
  .hero-aurora, .hero-logo-mark, .hero-spectacular .live-dot, .hero-spectacular .btn-glow, .scroll-cue-dot,
  .hero-godrays, .hero-dust-mote, .hero-logo-flash { animation: none !important; }
  .hero-scene-focus { filter: none !important; transform: none !important; transition: none !important; }
  .hero-letterbox { transition: none !important; height: 0 !important; }
  .hero-logo-mark-wrap { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-logo-rule { width: 130px !important; transition: none !important; }
  .hero-logo-tagline, .hero-logo-scrollcue { opacity: 1 !important; transition: none !important; }
  .hero-logo-flash { display: none !important; }
  .hero-logo-shine { display: none !important; }
  .hero-parallax-back, .hero-grid-pattern, .hero-dust { transition: none !important; transform: none !important; }
}

@media (max-width: 980px) {
  .hero-aurora, .hero-grid-pattern { opacity: 0.7; }
}
@media (max-width: 560px) {
  .hero-spectacular .hero-stats { gap: 18px 26px; }
  .hero-spectacular .hero-stat-divider { display: none; }
}

/* ---------- Sections ---------- */
.section { padding: 100px 0; }
.section-sm { padding: 70px 0; }
.section-alt { background: var(--paper-alt); }
.section-dark { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-900) 100%); padding: 100px 0; }
.light-h2 { color: #fff; }
.light-p { color: rgba(255,255,255,0.8); font-size: 1.05rem; margin-bottom: 30px; }

.section-head { max-width: 680px; margin-bottom: 50px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { font-size: 1.06rem; color: #48565c; }

/* ---------- Grid cards (reused across site) ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }

.info-card, .step-card, .side-card, .service-card, .article-card {
  position: relative;
  transition: transform 0.15s ease-out, box-shadow 0.4s ease;
  will-change: transform;
}
.info-card::before, .step-card::before, .side-card::before, .service-card::before, .article-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(201, 168, 106, 0.16), transparent 72%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.dark-card::before { background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.12), transparent 72%); }
.info-card:hover::before, .step-card:hover::before, .side-card:hover::before, .service-card:hover::before, .article-card:hover::before { opacity: 1; }
.info-card:hover, .step-card:hover, .side-card:hover, .service-card:hover, .article-card:hover {
  box-shadow: 0 22px 48px rgba(201, 168, 106, 0.16), 0 10px 24px rgba(14, 27, 33, 0.14);
}
.info-card > *, .step-card > *, .side-card > *, .service-card > *, .article-card > * { position: relative; z-index: 1; }

.info-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 28px;
  overflow: hidden;
}
.info-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-bottom: 16px; color: var(--gold); opacity: 0.7; transition: opacity 0.3s ease, transform 0.3s ease; }
.info-icon svg { width: 100%; height: 100%; }
.info-icon-text { display: inline-flex; width: auto; height: auto; font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; }
.info-card:hover .info-icon { opacity: 1; transform: scale(1.12); }
.info-card p { color: #4d5b61; font-size: 0.96rem; margin-top: 10px; }

.req-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  color: var(--gold);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.4rem;
  margin-bottom: 22px;
  flex-shrink: 0;
}

/* Service cards (hub grids) */
.service-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.service-card h3 { margin-bottom: 10px; color: var(--navy); }
.service-card p { color: #4d5b61; font-size: 0.94rem; margin-bottom: 18px; flex-grow: 1; }
.service-card .service-link { font-family: var(--font-head); font-weight: 600; font-size: 0.88rem; color: var(--gold); display: inline-flex; align-items: center; gap: 6px; }
.service-card .service-link .arrow { transition: transform 0.25s ease; }
.service-card:hover .service-link .arrow { transform: translateX(4px); }

/* Split grid */
.split-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: start; }
.split-grid.reverse { grid-template-columns: 0.9fr 1.1fr; }
.split-grid.reverse > div:first-child { order: 2; }
.split-grid.reverse > div:last-child { order: 1; }

.checklist { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: 1rem; color: #37454b; }
.check {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--navy-50);
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 700;
  margin-top: 1px;
}
.checklist-dark li { color: rgba(255,255,255,0.85); }
.checklist-dark .check { background: rgba(255,255,255,0.1); color: var(--gold-light); }

/* ---------- Eligibility: stacked cards + quiz (auxílio-acidente) ---------- */
.eligibility-grid { align-items: center; }
.stack-list { display: flex; flex-direction: column; gap: 18px; }
.stack-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 32px; box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 20px;
}
.stack-card .req-num { margin-bottom: 0; flex-shrink: 0; }
.stack-card h3 { font-size: 1.15rem; line-height: 1.4; }

.quiz-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: 40px; min-height: 340px; display: flex; flex-direction: column;
}
.quiz-progress { height: 4px; background: var(--navy-50); border-radius: 4px; overflow: hidden; margin-bottom: 30px; }
.quiz-progress-bar { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold), var(--green)); transition: width 0.4s ease; }
.quiz-step, .quiz-result { display: none; flex: 1; flex-direction: column; }
.quiz-step.active, .quiz-result.active { display: flex; animation: quizIn 0.45s cubic-bezier(0.16,1,0.3,1); }
@keyframes quizIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
.quiz-step-label { font-family: var(--font-head); font-weight: 600; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--gold); margin-bottom: 12px; }
.quiz-step h3 { font-size: 1.35rem; line-height: 1.35; margin-bottom: 10px; }
.quiz-step p { color: #4d5b61; font-size: 0.94rem; }
.quiz-actions { display: flex; gap: 14px; margin-top: auto; padding-top: 26px; }
.quiz-btn {
  flex: 1; padding: 15px; border-radius: 100px; border: 1.5px solid var(--line); background: #fff;
  font-family: var(--font-head); font-weight: 600; font-size: 0.96rem; color: var(--navy); cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.quiz-btn:hover { transform: translateY(-2px); }
.quiz-yes:hover { background: var(--green); border-color: var(--green); color: #fff; }
.quiz-no:hover { background: var(--navy-50); border-color: var(--navy); }
.quiz-result { text-align: center; align-items: center; justify-content: center; }
.quiz-result-icon {
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px; font-size: 1.5rem; font-weight: 800; font-family: var(--font-head);
}
.quiz-result-icon-positive { background: rgba(37, 211, 102, 0.14); color: var(--green-dark); }
.quiz-result-icon-neutral { background: var(--navy-50); color: var(--navy); }
.quiz-result h3 { font-size: 1.3rem; margin-bottom: 10px; }
.quiz-result p { color: #4d5b61; font-size: 0.94rem; margin-bottom: 24px; max-width: 380px; }
.quiz-restart { margin-top: 16px; background: none; border: none; color: #7a8890; text-decoration: underline; cursor: pointer; font-size: 0.85rem; font-family: var(--font-body); }
.quiz-restart:hover { color: var(--navy); }

.side-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow-md); overflow: hidden; }
.side-card h3 { margin-bottom: 20px; }
.dark-card {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-800) 100%);
  border-color: rgba(255,255,255,0.12);
  box-shadow: var(--shadow-lg);
}
.dark-card h3 { color: #fff; }

/* Calc example (reused) */
.calc-example { display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap; margin-bottom: 40px; }
.calc-box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 40px; text-align: center; min-width: 200px; }
.calc-highlight { background: var(--navy); border-color: var(--navy); }
.calc-highlight .calc-label, .calc-highlight .calc-value { color: #fff; }
.calc-highlight .calc-value { color: var(--gold-light); }
.calc-label { display: block; font-size: 0.82rem; color: #6b7a80; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.04em; }
.calc-value { font-family: var(--font-head); font-size: 1.7rem; font-weight: 700; color: var(--navy); }
.calc-value small { font-size: 0.9rem; font-weight: 500; }
.calc-arrow { font-family: var(--font-head); font-weight: 600; color: var(--gold); font-size: 0.95rem; }

.calc-arrow-down { text-align: center; font-family: var(--font-head); font-weight: 700; color: var(--gold); font-size: 1.6rem; line-height: 1; margin: 4px 0 18px; }
.calc-retro-box {
  max-width: 340px; margin: 0 auto 44px; text-align: center;
  background: linear-gradient(135deg, var(--gold) 0%, #b5905a 100%);
  border-radius: var(--radius); padding: 28px 40px; box-shadow: 0 18px 40px rgba(201, 168, 106, 0.35);
}
.calc-retro-box .calc-label { color: rgba(14, 27, 33, 0.68); }
.calc-value-retro { color: var(--navy-900); font-size: 2.1rem; }
.calc-retro-note { display: block; margin-top: 8px; font-size: 0.8rem; color: rgba(14, 27, 33, 0.65); }

.retro-highlight {
  background: linear-gradient(135deg, rgba(201, 168, 106, 0.1), rgba(201, 168, 106, 0.03));
  border: 1px solid rgba(201, 168, 106, 0.35); border-radius: var(--radius); padding: 32px 36px;
  margin: 0 0 50px; max-width: 780px; margin-left: auto; margin-right: auto; text-align: center;
}
.retro-highlight h3 { font-size: 1.2rem; margin: 8px 0 12px; }
.retro-highlight p { color: #48565c; font-size: 0.98rem; }

.timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 30px; }
.timeline-item { border-left: 3px solid var(--gold); padding-left: 20px; }
.timeline-date { display: block; font-family: var(--font-head); font-weight: 700; color: var(--navy); margin-bottom: 8px; font-size: 0.95rem; }
.timeline-item p { color: #4d5b61; font-size: 0.94rem; }

.fine-print { font-size: 0.86rem; color: #7a8890; font-style: italic; max-width: 780px; }

/* Steps */
.steps-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.step-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 24px; overflow: hidden; }
.step-num { font-family: var(--font-head); font-weight: 800; font-size: 2.2rem; display: block; margin-bottom: 6px; -webkit-text-stroke: 1.5px var(--gold); color: transparent; }
.step-card h3 { margin-bottom: 10px; }
.step-card p { color: #4d5b61; font-size: 0.92rem; }

/* Small "next step" indicator, anchored inside its own card's corner — no cross-card math, no risk of drifting. */
.step-next {
  position: absolute; right: 18px; bottom: 18px; z-index: 2; pointer-events: none;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); opacity: 0.55;
}
.step-next svg { width: 15px; height: 15px; }
.step-card:hover .step-next { opacity: 1; transform: translateX(2px); transition: opacity 0.25s ease, transform 0.25s ease; }

/* About / photo grid */
.about-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 60px; align-items: center; }
.about-photo { border-radius: var(--radius); box-shadow: var(--shadow-lg); width: 100%; object-fit: cover; }
.about-grid p { color: #48565c; font-size: 1.02rem; }
.about-stats { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 10px; }
.stat { display: flex; flex-direction: column; gap: 3px; padding: 16px 20px; background: #fff; border-radius: 14px; border: 1px solid var(--line); min-width: 140px; }
.stat strong { font-family: var(--font-head); color: var(--navy); font-size: 1rem; }
.stat span { color: #6b7a80; font-size: 0.86rem; }

/* ---------- FAQ Accordion ---------- */
.accordion { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.acc-item { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.acc-trigger {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  background: none; border: none; cursor: pointer; padding: 22px 26px;
  font-family: var(--font-head); font-weight: 600; font-size: 1rem; color: var(--navy); text-align: left;
}
.acc-icon { font-size: 1.3rem; color: var(--gold); transition: transform 0.3s ease; flex-shrink: 0; margin-left: 16px; }
.acc-item.open .acc-icon { transform: rotate(45deg); }
.acc-panel { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; padding: 0 26px; }
.acc-item.open .acc-panel { max-height: 320px; padding: 0 26px 22px; }
.acc-panel p { color: #4d5b61; font-size: 0.95rem; }

/* ---------- Article / prose content ---------- */
.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { margin: 44px 0 18px; }
.prose h3 { margin: 30px 0 12px; font-size: 1.15rem; }
.prose p { color: #37454b; font-size: 1.04rem; margin-bottom: 18px; }
.prose ul, .prose ol { color: #37454b; font-size: 1.04rem; margin: 0 0 18px 22px; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--navy); }
.prose blockquote {
  border-left: 3px solid var(--gold);
  padding-left: 20px;
  margin: 28px 0;
  font-style: italic;
  color: #4d5b61;
}
.prose table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 0.94rem; }
.prose table th, .prose table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.prose table th { font-family: var(--font-head); color: var(--navy); background: var(--paper-alt); }

.article-meta { display: flex; gap: 14px; align-items: center; color: rgba(255,255,255,0.65); font-size: 0.86rem; margin-top: 20px; }
.article-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }

.article-cta {
  background: linear-gradient(135deg, rgba(201, 168, 106, 0.1), rgba(201, 168, 106, 0.03));
  border: 1px solid rgba(201, 168, 106, 0.35);
  border-radius: var(--radius);
  padding: 32px 36px;
  margin: 40px 0;
  text-align: center;
}
.article-cta h3 { margin-bottom: 10px; }
.article-cta p { color: #48565c; margin-bottom: 20px; }

/* ---------- Blog grid ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.article-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; display: flex; flex-direction: column; }
.article-card-tag { display: inline-block; font-family: var(--font-head); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold); margin-bottom: 10px; }
.article-card-body { padding: 26px 24px 28px; display: flex; flex-direction: column; flex-grow: 1; }
.article-card h3 { font-size: 1.08rem; margin-bottom: 10px; line-height: 1.4; }
.article-card p { color: #4d5b61; font-size: 0.92rem; margin-bottom: 16px; flex-grow: 1; }
.article-card-date { font-size: 0.8rem; color: #8a9298; }

/* ---------- Final CTA ---------- */
.final-cta { background: linear-gradient(135deg, var(--gold) 0%, #b5905a 100%); padding: 90px 0; text-align: center; }
.final-cta h2 { color: var(--navy-900); margin-bottom: 16px; }
.final-cta p { color: rgba(14,27,33,0.75); font-size: 1.08rem; margin-bottom: 34px; }
.final-cta .btn-whatsapp { background: var(--navy-900); box-shadow: 0 14px 32px rgba(14,27,33,0.35); }
.final-cta .btn-whatsapp:hover { background: var(--navy); }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-900); padding: 56px 0 34px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-logo { height: 46px; margin-bottom: 16px; }
.footer-about { color: rgba(255,255,255,0.55); font-size: 0.9rem; max-width: 320px; }
.footer-col h4 { color: #fff; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 18px; font-family: var(--font-head); }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-col a { color: rgba(255,255,255,0.6); text-decoration: none; font-size: 0.9rem; transition: color 0.2s ease; }
.footer-col a:hover { color: var(--gold-light); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; }
.footer-oab { color: rgba(255,255,255,0.55); font-size: 0.85rem; }
.footer-disclaimer { color: rgba(255,255,255,0.35); font-size: 0.78rem; max-width: 560px; }
.footer-copy { color: rgba(255,255,255,0.35); font-size: 0.78rem; }

/* ---------- WhatsApp float ---------- */
.whatsapp-float {
  position: fixed; bottom: 26px; right: 26px; width: 60px; height: 60px;
  background: var(--green); border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; box-shadow: 0 10px 30px rgba(37, 211, 102, 0.5); z-index: 1500;
  animation: pulse 2.4s infinite; transition: transform 0.25s ease;
}
.whatsapp-float:hover { transform: scale(1.08); }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55), 0 10px 30px rgba(37,211,102,0.5); }
  70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0), 0 10px 30px rgba(37,211,102,0.5); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0), 0 10px 30px rgba(37,211,102,0.5); }
}

/* ---------- Reveal animation ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(36px) scale(0.97);
  filter: blur(6px);
  transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1), filter 0.9s cubic-bezier(0.16,1,0.3,1);
  will-change: opacity, transform, filter;
}
[data-reveal].in-view { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-grid, .split-grid, .split-grid.reverse, .about-grid { grid-template-columns: 1fr; }
  .split-grid.reverse > div:first-child, .split-grid.reverse > div:last-child { order: initial; }
  .grid-3, .grid-2, .steps-grid, .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: 1fr; }
  .main-nav { display: none; }
  .nav-toggle { display: flex; width: 44px; height: 44px; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }

  /* The header PNGs are 2000x2000 squares whose wordmark only fills the middle 20% of the
     height, so a tall <img> box was the only way to make it legible — that alone made the
     mobile header 114px, a fifth of a small phone's screen. Cropping to the wordmark band
     with object-fit renders it ~65% larger in less than a third of the height. */
  .brand-logo { height: 34px; width: 128px; object-fit: cover; object-position: center; }
  .site-header.scrolled .brand-logo, .site-header.is-inner .brand-logo { height: 28px; width: 106px; }
  .hero-media { max-width: 420px; margin: 40px auto 0; }
  .stack-list { max-width: 460px; margin: 0 auto 32px; }
  .quiz-card { max-width: 460px; margin: 0 auto; }

  /* ----- Home hero: flowing layout instead of the scroll-pinned stage -----
     On desktop the hero is a sticky 100vh stage the content is revealed inside. A phone
     can't hold that content in one screen height (it was clipping 180-240px, swallowing
     the entire stats row) and mobile URL bars resize the viewport mid-scroll, so the box
     it has to fit into keeps moving. Here the logo becomes a real one-screen splash that
     scrolls away, and the hero content flows underneath it as an ordinary section —
     nothing can be clipped, at any screen height. script.js skips the scroll-driven
     reveal to match. */
  #heroIntro.hero-scroll-intro { height: auto; overflow: hidden; }
  #heroIntro .hero-scroll-stage { position: static; height: auto; min-height: 0; overflow: visible; }
  #heroIntro .hero-scene-focus {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* Dropping the filter here matters: the mobile hero is ~1400px tall, and filtering it
       whole would promote the entire section to one composited layer. The rack-focus moves
       onto the splash below, which is the only part visible while it plays. */
    filter: none;
    transform: none;
    transition: none;
  }
  #heroIntro .hero-letterbox { display: none; }

  #heroIntro .hero-logo-scene {
    position: relative;
    inset: auto;
    order: 0;
    min-height: 100svh;
    padding: 92px 24px 40px;
    filter: blur(14px) brightness(1.4) saturate(1.1);
    transition: filter 1.2s cubic-bezier(.16,1,.3,1);
  }
  #heroIntro.hero-cinema-in .hero-logo-scene { filter: blur(0) brightness(1) saturate(1); }
  #heroContentScene { order: 1; padding-block: 8px 72px; }
  #heroIntro .hero-media { order: 2; }
  /* prefers-reduced-motion (and the no-JS fallback) drop the splash entirely, and without
     it the 8px above would leave the headline tucked under the fixed header. */
  #heroIntro.hero-intro-static #heroContentScene { padding-block: 118px 72px; }

  /* The scroll-driven reveal is off here, so the pieces it would have faded in must be
     visible on their own. !important beats the inline opacity the desktop path may have
     set before a resize crossed this breakpoint. */
  #heroIntro .hero-copy .eyebrow,
  #heroIntro .hero-h1 .h1-line,
  #heroIntro .hero-lead,
  #heroIntro .hero-actions,
  #heroIntro .hero-stats,
  #heroIntro .hero-media { opacity: 1 !important; transform: none !important; }
  #heroIntro .accent-word::after { width: 100%; }

  .hero-spectacular .hero-h1 { font-size: clamp(1.75rem, 7.2vw, 2.3rem); }
  .hero-spectacular .hero-lead { font-size: 1rem; margin: 16px 0 26px; }

  /* Three stats as one compact trust bar rather than a tall stacked list */
  .hero-spectacular .hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    align-items: start;
    padding-top: 22px;
  }
  .hero-spectacular .hero-stat-divider { display: none; }
  .hero-spectacular .hero-stat-num { font-size: 0.86rem; }
  .hero-spectacular .hero-stat-label { font-size: 0.7rem; line-height: 1.35; }

  /* Photo sits below the copy, framed — it is a flex item now, not an absolute overlay */
  #heroIntro .hero-media { max-width: 400px; width: 100%; margin: 0 auto; padding: 0 24px 64px; }
  #heroIntro .hero-photo-frame { height: auto; border-radius: 20px; overflow: hidden; transform: none !important; }
  #heroIntro .hero-photo { height: auto; aspect-ratio: 4 / 5; border-radius: 20px; object-position: 50% 12%; }
  #heroIntro .hero-photo-shade {
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(14,27,33,0) 55%, rgba(14,27,33,0.55) 100%);
  }
  #heroIntro .floating-card.card-2 { right: 14px; bottom: 14px; max-width: calc(100% - 28px); }

  .main-nav {
    position: fixed; inset: 0; z-index: 1200; display: flex; flex-direction: column;
    align-items: center; gap: 6px; padding: 88px 28px 40px;
    /* `safe center` keeps the menu optically centred but falls back to top-aligned the
       moment it outgrows the screen. Plain `center` pushed the first items to a negative
       offset that overflow scrolling can never reach — with the submenu open on a short
       phone, "Início" sat at y=-32px and was simply unreachable. */
    justify-content: center;
    justify-content: safe center;
    background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy) 100%);
    border: none; border-radius: 0; backdrop-filter: none;
    opacity: 0; visibility: hidden; transform: scale(1.03);
    transition: opacity 0.4s cubic-bezier(0.16,1,0.3,1), transform 0.4s cubic-bezier(0.16,1,0.3,1), visibility 0.4s;
    overflow-y: auto;
  }
  .main-nav.open { opacity: 1; visibility: visible; transform: scale(1); }

  /* backdrop-filter turns .site-header into the containing block for its own
     position:fixed descendants, so `inset: 0` on the menu resolved against the 70px
     header box instead of the viewport — the fullscreen menu collapsed into a sliver on
     every inner page and on any page once scrolled. It is dropped while the menu is open;
     the menu covers the screen anyway, so there is nothing left to blur behind. */
  .site-header.nav-open, .site-header.nav-open.scrolled, .site-header.nav-open.is-inner {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: transparent;
    box-shadow: none;
  }
  /* ...which means the dark-background (white) logo is the readable one again */
  .site-header.nav-open .logo-light-bg { display: none; }
  .site-header.nav-open .logo-dark-bg { display: block; }
  .site-header.nav-open .nav-toggle span { background: #fff; }
  .site-header.scrolled .main-nav, .site-header.is-inner .main-nav { background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy) 100%); }
  .main-nav a, .main-nav .nav-drop-trigger {
    color: rgba(255, 255, 255, 0.85); font-family: var(--font-head); font-weight: 600; font-size: 1.3rem;
    padding: 12px 0; border-radius: 0; opacity: 0; transform: translateY(14px);
    transition: opacity 0.4s ease, transform 0.4s ease, color 0.25s ease;
    justify-content: center;
  }
  .main-nav.open a, .main-nav.open .nav-drop-trigger { opacity: 1; transform: translateY(0); }
  .site-header.scrolled .main-nav a, .site-header.is-inner .main-nav a { color: rgba(255, 255, 255, 0.85); opacity: 0; }
  .site-header.scrolled .main-nav.open a, .site-header.is-inner .main-nav.open a { opacity: 1; }
  .main-nav a:hover, .main-nav a.active, .main-nav .nav-drop-trigger:hover { color: var(--gold-light); background: none; }
  .site-header.scrolled .main-nav a.active, .site-header.is-inner .main-nav a.active { color: var(--gold-light); background: none; }
  .nav-item-drop { display: flex; flex-direction: column; align-items: center; }
  .nav-dropdown {
    position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none;
    background: none; min-width: 0; padding: 0; display: none; text-align: center; margin-top: 4px;
  }
  .nav-item-drop.mobile-open .nav-dropdown { display: block; }
  .nav-dropdown a { color: rgba(255,255,255,0.65) !important; font-size: 1rem; padding: 11px 0; opacity: 1 !important; transform: none; }
  .nav-dropdown a.nav-dropdown-all { border-top: none; }
  .main-nav a.nav-cta-mobile {
    display: flex; margin-top: 20px; background: var(--green); color: #fff !important;
    padding: 15px 30px; border-radius: 100px; font-size: 1rem !important; align-items: center; gap: 10px;
    opacity: 0; transform: translateY(14px); transition: opacity 0.4s ease, transform 0.4s ease;
  }
  .main-nav.open a.nav-cta-mobile { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
  .section { padding: 70px 0; }
  .section-dark { padding: 70px 0; }
  .page-hero { padding: 104px 0 48px; }
  .grid-3, .grid-2, .steps-grid, .blog-grid { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }
  .hero-bg-shape { display: none; }
  .hero-media { display: none; }
  .media-bar { display: none; }
  .whatsapp-float { width: 54px; height: 54px; bottom: 18px; right: 18px; }
  .btn-header { display: none; }
  .header-inner { justify-content: space-between; }
  .calc-example { flex-direction: column; }
  .calc-arrow { transform: rotate(90deg); }
  .footer-logo { height: 44px; width: 128px; object-fit: cover; object-position: center; }
  .btn { white-space: normal; text-align: center; }

  /* ----- Touch ergonomics & density ----- */
  .container, .container-narrow { padding: 0 20px; }
  .btn-lg { padding: 15px 26px; font-size: 0.98rem; }
  .info-card { padding: 28px 22px; }
  .side-card { padding: 26px 22px; }
  .service-card { padding: 26px 22px; }
  .step-card { padding: 26px 20px; }
  .quiz-card { padding: 26px 22px; min-height: 0; }
  .quiz-actions { gap: 10px; }
  .stack-card { padding: 22px 20px; gap: 14px; }
  .stack-card .req-num { width: 46px; height: 46px; font-size: 1.15rem; }
  .article-cta, .retro-highlight { padding: 26px 22px; }
  .calc-box { padding: 22px 26px; width: 100%; }
  .calc-retro-box { padding: 24px 26px; }
  .acc-trigger { padding: 18px 20px; }
  .acc-item.open .acc-panel { padding: 0 20px 20px; }
  .acc-panel { padding: 0 20px; }
  .section-head { margin-bottom: 34px; }

  /* Footer links were 17px tall — well under a comfortable thumb target */
  .footer-col ul { gap: 2px; }
  .footer-col a { display: inline-block; padding: 9px 0; }
  .footer-bottom { gap: 14px; }

  /* Same for the two other under-sized targets: the logo link (34px) and the
     breadcrumbs (22px). Negative margins keep the visual rhythm unchanged. */
  .brand { min-height: 44px; }
  .breadcrumb { margin-bottom: 18px; }
  .breadcrumb a { display: inline-block; padding: 10px 0; margin: -10px 0; }
}

/* ----- Touch devices: no sticky hover states, no blue tap flash -----
   Both conditions, not just (hover: none): hybrid touch laptops and some Android browsers
   report hover: hover, and would otherwise keep the stuck-hover behaviour. */
@media (hover: none), (pointer: coarse) {
  /* These are cursor effects; on a touchscreen they latch on after a tap and stay stuck. */
  .info-card:hover, .step-card:hover, .side-card:hover, .service-card:hover, .article-card:hover { box-shadow: none; }
  .info-card:hover::before, .step-card:hover::before, .side-card:hover::before,
  .service-card:hover::before, .article-card:hover::before { opacity: 0; }
  .btn:hover, .btn-whatsapp:hover, .btn-ghost:hover, .btn-gold-pill:hover, .quiz-btn:hover { transform: none; }
  .btn:active { transform: scale(0.98); }
  .service-card:active, .article-card:active, .info-card:active { transform: scale(0.995); }
}

/* iOS Safari rubber-band: keep the dark hero colour past the top of the page instead of
   flashing the light body background behind it. */
@media (max-width: 980px) {
  html { background: var(--navy-900); }
  body { background: var(--paper); }
}