/* ============================================================
   Sabiá — Landing Page V1
   styles.css  — DARK-FIRST (on-brand)

   Colors & typography follow the official "Manual da Marca".
   Visual direction follows the Sabiá brand style: deep-navy base,
   dotted texture, vibrant accents (teal / coral / amber / blue),
   teal section headings, full-bleed colored blocks, mascot present.

   Organization:
     1. Design tokens
     2. Base / reset
     3. Layout helpers (container, section, section headings)
     4. Buttons / CTA
     5. Header / navigation
     6. Hero
     7. Client logos
     8. Cards (problem / testimonials)
     9. Steps (how it works / implementation)
    10. Split sections (employee / compliance)
    11. Metrics
    12. Tags / feature lists
    13. FAQ
     14. Contact / Tally
     15. Footer
     15.1 Legal pages
     15.2 Thank-you page (Tally redirect)
     16. Colored full-bleed section overrides
     17. Responsive
     18. Reduced motion
   ============================================================ */

/* ------------------------------------------------------------
   1. DESIGN TOKENS — official brand palette
   ------------------------------------------------------------ */
:root {
  /* Brand colors (Manual da Marca) */
  --color-navy-deep: #000036;   /* page base */
  --color-navy: #152a57;
  --color-navy-2: #25345c;
  --color-blue: #006faf;
  --color-blue-bright: #0086be;
  --color-coral: #f05c37;       /* warm accent / CTA */
  --color-coral-dark: #d94a27;
  --color-amber: #f9a731;
  --color-teal: #6accb9;        /* mint — headings/accents on dark */
  --color-teal-bright: #8bdcc9;
  --color-teal-deep: #184451;   /* cookie consent chrome */
  --color-surface-dark: #07263a; /* header / footer / matches dark logo lockup */

  /* Dark-mode surfaces & text */
  --surface-panel: rgba(255, 255, 255, 0.05);
  --surface-border: rgba(255, 255, 255, 0.12);
  --text-on-dark: rgba(255, 255, 255, 0.86);
  --text-on-dark-soft: rgba(255, 255, 255, 0.68);

  /* Alternating dark section tones (avoid two same-color dark blocks in a row) */
  --dark-a: #000230;
  --dark-b: #071a3d;
  --dark-c: #0b1236;

  /* Light content cards (used on top of dark/colored sections) */
  --card-bg: #ffffff;
  --card-text: #2c3550;
  --card-text-soft: #5b6484;
  --card-border: #e3e8f2;
  --color-white: #ffffff;

  /* Typography — Poppins (brand font) with system fallback */
  --font-base: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-eyebrow: 0.875rem;
  --fs-body: 1rem;
  --fs-lead: 1.125rem;
  --fs-h3: 1.25rem;
  --fs-h2: clamp(1rem, 3vw, 2rem);
  --fs-h1: clamp(2.1rem, 6vw, 3.5rem);
  --lh-tight: 1.12;
  --lh-body: 1.75;

  /* Spacing */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem;

  /* Radii — no shadows/glow per design direction */
  --radius-sm: 10px; --radius-md: 18px; --radius-lg: 28px; --radius-pill: 999px;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  --container-max: 1140px;
  --container-narrow: 760px;
  --header-h: 72px;
}

/* ------------------------------------------------------------
   2. BASE / RESET
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

/* ------------------------------------------------------------
   1.5 SELF-HOSTED POPPINS (Fontsource; replaces Google Fonts CDN)
   ------------------------------------------------------------ */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/poppins-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/poppins-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/poppins-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/poppins-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/poppins-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/poppins-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/poppins-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/poppins-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 8px);
}

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-on-dark);
  background: var(--dark-a);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { color: var(--color-white); line-height: var(--lh-tight); font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-h1); margin: 0 0 var(--space-4); }
h2 { font-size: var(--fs-h2); margin: 0 0 var(--space-4); }
h3 { font-size: var(--fs-h3); margin: 0 0 var(--space-2); font-weight: 600; }
p { margin: 0 0 var(--space-4); }
.hl { color: var(--color-teal); }

a { color: var(--color-teal); text-decoration: none; }
a:hover { text-decoration: underline; }

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

/* ------------------------------------------------------------
   3. LAYOUT HELPERS
   ------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
  position: relative;
  z-index: 1;
}
.container-narrow { max-width: var(--container-narrow); }

.section { padding: var(--space-8) 0; position: relative; }

/* Section headings — teal on dark (matches brand style) */
.section-title { color: var(--color-teal); max-width: 34ch; }
.section-title.center { max-width: none; text-align: center; margin-inline: auto; }
.section-intro { font-size: var(--fs-lead); color: var(--text-on-dark-soft); max-width: 62ch; }
.section-intro.center { text-align: center; margin-inline: auto; }
/* Closing line after a grid (e.g. Desafio → bridge to Como funciona) */
.section-closing { margin-top: var(--space-6); margin-bottom: 0; }
.section-kicker {
  text-align: center; font-size: var(--fs-body); font-weight: 600;
  color: var(--color-teal); margin-bottom: var(--space-6);
}
.section-cta { margin-top: var(--space-6); text-align: center; }

/* Small kicker line above section headings */
.section-eyebrow {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin: 0 0 var(--space-2);
}
.section-eyebrow.center { text-align: center; }
.section-note {
  margin-top: var(--space-5); font-size: var(--fs-body);
  color: var(--card-text); background: var(--color-white);
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-md);
  border: 1px solid var(--card-border);
}

/* ------------------------------------------------------------
   4. BUTTONS / CTA — coral with deep-navy text (AA ~6.3:1)
   ------------------------------------------------------------ */
.btn {
  display: inline-block; font-weight: 700; text-align: center;
  border-radius: var(--radius-pill); padding: var(--space-3) var(--space-6);
  cursor: pointer; border: 2px solid transparent; min-height: 44px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary {
  background: var(--color-coral); color: var(--color-navy-deep);
}
.btn-primary:hover { background: var(--color-coral-dark); transform: translateY(-2px); }
.btn-mint {
  background: var(--color-teal); color: var(--color-navy-deep);
}
.btn-mint:hover { background: var(--color-teal-bright); text-decoration: none; transform: translateY(-2px); }
.btn-lg {
  font-size: var(--fs-lead);
  padding: var(--space-4) var(--space-7);
  white-space: normal;
  line-height: 1.25;
  max-width: 100%;
}

/* ------------------------------------------------------------
   5. HEADER / NAVIGATION
   ------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(7, 38, 58, 0.92);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--header-h);
}
.brand {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
}
.brand img {
  display: block;
  height: 46px;
  width: 147px; /* 1000×312 lockup at 46px tall */
  max-width: none;
  object-fit: contain;
  object-position: left center;
}

.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; background: transparent; border: 0; cursor: pointer;
}
.nav-toggle-bar {
  display: block; width: 24px; height: 2px; background: var(--color-white);
  margin: 0 auto; transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.primary-nav {
  display: none; position: absolute; top: var(--header-h); left: 0; right: 0;
  background: var(--color-surface-dark);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.primary-nav.is-open { display: block; }

.nav-panel {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-4) var(--space-5) var(--space-5);
}
.nav-links {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-1);
}
.nav-links li { margin: 0; }
.nav-link {
  display: block; padding: var(--space-3) 0;
  color: var(--text-on-dark); font-weight: 600; line-height: 1.3;
}
.nav-link:hover { color: var(--color-teal); text-decoration: none; }
.nav-link.is-active { color: var(--color-teal); }

.nav-actions {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.btn-nav {
  font-size: 0.875rem; font-weight: 600; line-height: 1.25;
  padding: var(--space-3) var(--space-4);
  min-height: 44px; white-space: nowrap; text-align: center;
}

/* ------------------------------------------------------------
   6. HERO
   ------------------------------------------------------------ */
.hero {
  padding: var(--space-8) 0 var(--space-7);
  position: relative;
  overflow: hidden;
  background-color: var(--dark-a);
}
.hero-inner {
  position: relative;
  z-index: 1;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    105deg,
    rgba(9, 26, 62, 0.92) 0%,
    rgba(9, 26, 62, 0.72) 45%,
    rgba(10, 42, 102, 0.5) 100%
  );
}
.hero-bg-slide {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--dark-a);
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  opacity: 0;
  animation-duration: 27s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
/* Slide 1: LCP — WebP in CSS. JPEG sources in assets/_archive/ (not deployed). */
.hero-bg-slide--1 {
  background-image: url("assets/images/hero-image_1.webp");
  animation-name: hero-bg-fade-1;
}
/* Slides 2–4: background-image set on window load in script.js (hero lazy). */
.hero-bg-slide--2 {
  animation-name: hero-bg-fade-2;
}
.hero-bg-slide--3 {
  animation-name: hero-bg-fade-3;
}
.hero-bg-slide--4 {
  animation-name: hero-bg-fade-4;
}
@keyframes hero-bg-fade-1 {
  0%, 21% { opacity: 1; }
  25%, 96% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes hero-bg-fade-2 {
  0%, 21% { opacity: 0; }
  25%, 46% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes hero-bg-fade-3 {
  0%, 46% { opacity: 0; }
  50%, 71% { opacity: 1; }
  75%, 100% { opacity: 0; }
}
@keyframes hero-bg-fade-4 {
  0%, 71% { opacity: 0; }
  75%, 96% { opacity: 1; }
  100% { opacity: 0; }
}
/* .hero-mascot { width: 120px; height: auto; margin-bottom: var(--space-4); } */ /* mascote removido a pedido */
.eyebrow {
  display: inline-block; font-size: var(--fs-eyebrow); font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--color-teal); background: rgba(106, 204, 185, 0.14);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
  margin-bottom: var(--space-4); border: 1px solid rgba(106, 204, 185, 0.4);
}
.hero-support { font-size: var(--fs-lead); color: var(--text-on-dark); max-width: 55ch; }
.hero-support p:last-child { margin-bottom: 0; }
.hero-support ul {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
}
.hero-support li { position: relative; padding-left: var(--space-6); }
.hero-support li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 18px;
  height: 18px;
  background: url("assets/icons/bullet-teal.svg") center / contain no-repeat;
}
.hero-actions { margin-top: var(--space-6); }
.hero-actions-note { margin-top: var(--space-3); font-size: var(--fs-eyebrow); color: var(--text-on-dark-soft); }
.hero-visual { position: relative; margin-top: var(--space-7); min-height: 320px; }
.hero-shot { border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.hero-shot-1 { max-width: 62%; margin: 0 auto; }
.hero-shot-2 {
  max-width: 55%; position: absolute; right: 0; bottom: 0;
  border: 4px solid var(--color-white);
}

/* Product UI rendered as a lightweight CSS 3D device. */
.hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1600px;
  perspective-origin: 50% 40%;
}
.hero-device-blob {
  position: absolute;
  z-index: 0;
  top: 12%;
  right: 0;
  width: 300px;
  height: 300px;
  border-radius: 58% 42% 45% 55% / 55% 48% 52% 45%;
  background: radial-gradient(circle, var(--color-teal) 0 55%, transparent 70%);
  opacity: 0.9;
}
.hero-device-rig {
  --hero-device-rx: 0deg;
  --hero-device-ry: 0deg;
  position: relative;
  z-index: 1;
  transform-style: preserve-3d;
  transform:
    rotateX(calc(6deg + var(--hero-device-ry)))
    rotateY(calc(-20deg + var(--hero-device-rx)));
  transition: transform 0.25s ease-out;
  animation: hero-device-float 6s ease-in-out infinite;
}
@keyframes hero-device-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}
.hero-device-phone {
  position: relative;
  width: 320px;
  height: 650px;
  padding: 12px;
  border-radius: 44px;
  background: linear-gradient(150deg, #2b3f74, #0e1c3d);
  box-shadow:
    0 2px 0 2px rgba(255,255,255,0.06) inset,
    30px 50px 80px -20px rgba(0,0,10,0.55),
    0 0 0 2px rgba(0,0,20,0.4);
}
.hero-device-phone::before,
.hero-device-phone::after {
  content: "";
  position: absolute;
  right: -3px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(#3a4d80, #1a294d);
}
.hero-device-phone::before { top: 130px; height: 56px; }
.hero-device-phone::after { top: 200px; height: 80px; }
.hero-device-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 34px;
  background: linear-gradient(180deg, #16265a, #101c44 55%, #0c1636);
  color: var(--color-white);
  line-height: 1.3;
}
.hero-device-notch {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 50%;
  width: 120px;
  height: 22px;
  border-radius: 0 0 16px 16px;
  background: #0a1330;
  transform: translateX(-50%);
}
.hero-device-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 22px 6px;
  color: #dfe8ff;
  font-size: 12px;
  font-weight: 600;
}
.hero-device-status-icons {
  display: flex;
  align-items: center;
  gap: 5px;
}
.hero-device-status-icons span {
  width: 14px;
  height: 9px;
  border-radius: 2px;
  background: #dfe8ff;
  opacity: 0.85;
}
.hero-device-status-icons i {
  width: 20px;
  height: 10px;
  border: 1.5px solid #dfe8ff;
  border-radius: 3px;
}
.hero-device-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 48px;
  padding: 6px 16px 12px;
}
.hero-device-level {
  justify-self: start;
  padding: 5px 9px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.12);
  font-size: 11px;
  font-weight: 700;
}
.hero-device-logo {
  width: 86px;
  height: 30px;
  object-fit: contain;
}
.hero-device-header-actions {
  justify-self: end;
  display: flex;
  gap: 5px;
}
.hero-device-header-actions svg {
  width: 27px;
  height: 27px;
  padding: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
}
.hero-device-header-actions .hero-device-music { color: #ff7069; }
.hero-device-heading {
  margin: 0;
  padding: 2px 16px 5px;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 500;
}
.hero-device-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow: hidden;
  padding: 0 16px 70px;
}
.hero-device-card {
  position: relative;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 16px;
  border-radius: 32px;
}
.hero-device-card strong {
  margin-top: 7px;
  font-size: 15px;
  line-height: 1.2;
}
.hero-device-badge {
  align-self: flex-start;
  max-width: 100%;
  overflow: hidden;
  padding: 5px 9px;
  border-radius: var(--radius-pill);
  font-size: 9px;
  line-height: 1.2;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hero-device-featured {
  height: 170px;
  background: rgb(83,67,157);
}
.hero-device-featured .hero-device-badge { background: rgb(56,46,107); }
.hero-device-featured strong {
  max-width: 85%;
  font-size: 18px;
}
.hero-device-avatars {
  display: flex;
  align-items: center;
  margin-top: auto;
}
.hero-device-avatars i {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  margin-right: -7px;
  border: 2px solid rgb(83,67,157);
  border-radius: 50%;
  background: var(--color-white);
  color: #18376c;
  font-size: 6px;
  font-style: normal;
  font-weight: 700;
}
.hero-device-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 10px;
}
.hero-device-themes,
.hero-device-access { height: 140px; }
.hero-device-themes {
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: #1971c2;
  text-align: center;
}
.hero-device-themes img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}
.hero-device-themes strong {
  margin-top: 2px;
  font-size: 12px;
  text-transform: uppercase;
}
.hero-device-access { background: rgb(37,17,105); }
.hero-device-access .hero-device-badge {
  background: rgb(25,12,71);
  font-size: 7px;
}
.hero-device-access strong { font-size: 13px; }
.hero-device-access > svg {
  position: absolute;
  right: 13px;
  bottom: 13px;
  width: 17px;
  height: 17px;
}
.hero-device-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 500;
}
.hero-device-section-head svg {
  width: 16px;
  height: 16px;
}
.hero-device-carousel {
  display: flex;
  width: calc(200% + 10px);
  gap: 10px;
}
.hero-device-track {
  flex: 0 0 40%;
  height: 145px;
  background: rgb(38,86,150);
}
.hero-device-track .hero-device-badge { background: rgb(26,58,102); }
.hero-device-track strong { font-size: 16px; }
.hero-device-track-alt { background: rgb(134,65,142); }
.hero-device-track-alt .hero-device-badge { background: rgb(91,44,97); }
.hero-device-tabs {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 58px;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(10,18,44,0.92);
  backdrop-filter: blur(6px);
}
.hero-device-tabs span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: #8a97bf;
  font-size: 9px;
}
.hero-device-tabs .is-selected { color: #50ffce; }
.hero-device-tabs svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 420px) {
  .hero-device-phone {
    width: 280px;
    height: 580px;
  }
  .hero-device-blob {
    width: 240px;
    height: 240px;
  }
}

/* ------------------------------------------------------------
   6.0 HERO APP SCREEN — "Temas" (avatar strip + track cards)
   Own hero-temas-* classes: .hero-device-* is shared with the
   Jogos phones and obrigado.html.
   ------------------------------------------------------------ */
.hero-temas-screen {
  background: linear-gradient(180deg, #13284f 0%, #1a3b7c 30%, #1d4796 46%);
}
.hero-temas-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 8px 16px 12px;
}
.hero-temas-header svg { width: 20px; height: 20px; }
.hero-temas-back { color: #3d8bff; }
.hero-temas-mute { justify-self: end; color: #ff6b6b; }
.hero-temas-title {
  color: #3d8bff;
  font-size: 13px;
  font-weight: 600;
}
.hero-temas-strip-viewport {
  overflow: hidden;
  padding: 10px 0 30px 8px;
  /* The theme that slid out ends inside the 8px padding; clip it there. */
  clip-path: inset(0 0 0 8px);
}
.hero-temas-strip {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform 0.7s cubic-bezier(0.22, 0.8, 0.26, 1);
}
.hero-temas-strip.no-anim { transition: none; }
.hero-temas-item {
  display: flex;
  flex: 0 0 74px;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.hero-temas-avatar {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border: 2px solid transparent;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  transition: border-color 0.4s, box-shadow 0.4s;
}
.hero-temas-avatar img {
  display: block;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
}
.hero-temas-name {
  max-width: 68px;
  color: var(--color-white);
  font-size: 9.5px;
  line-height: 1.45;
  transition: color 0.4s;
}
.hero-temas-item.is-active .hero-temas-avatar {
  border-color: #3be3d2;
  box-shadow: 0 0 12px rgba(59,227,210,0.35);
}
.hero-temas-item.is-active .hero-temas-name { color: #3be3d2; }
.hero-temas-panel {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 18px 16px 0;
  border-radius: 26px 26px 0 0;
  background: #10295a;
}
.hero-temas-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: transform 0.7s cubic-bezier(0.22, 0.8, 0.26, 1), opacity 0.3s ease;
}
.hero-temas-list.is-swapping { opacity: 0; }
.hero-temas-list.no-anim { transition: opacity 0.3s ease; }
/* Proportions measured on the app card: image 335×200, title ~16px
   below it, progress bar ~30px below the title. */
.hero-temas-card {
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 12px;
  background: var(--track);
}
.hero-temas-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 335 / 200;
  object-fit: cover;
}
.hero-temas-card-body { padding: 16px 13px; }
.hero-temas-card-title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--color-white);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.hero-temas-progress {
  height: 6px;
  margin-top: 26px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--track), #fff 30%);
}
.hero-temas-progress span {
  display: block;
  width: var(--p);
  height: 100%;
  border-radius: inherit;
  background: var(--color-white);
}

/* ------------------------------------------------------------
   6.1 GAME UI MOCKUPS
   ------------------------------------------------------------ */
.game-device-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  /* Full outer box; internal lines come from each cell's right/bottom border. */
  border: 1px solid #2E5DBD;
  border-radius: 10px;
  overflow: hidden;
  margin: 0 auto;
  width: 92%;
  aspect-ratio: 1;
}
.game-device-cell {
  /* position:relative guarantees z-index wins over the highlight overlay */
  position: relative;
  border-right: 1px solid #2E5DBD;
  border-bottom: 1px solid #2E5DBD;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #66AAFF;
  font-size: 13px;
  font-weight: 500;
  z-index: 2;
}
.game-device-cell.is-found-text {
  color: #FFFFFF;
  font-weight: 700;
}
/* Hollow outline (like the real app) so letters stay fully readable.
   Absolutely positioned so it does NOT push the auto-placed letter cells. */
.word-highlight {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid #50FFCE;
  background: transparent;
  border-radius: 999px;
  pointer-events: none;
  z-index: 3;
}

/* --- Three-phone games stage: STACKED on load, FANS OUT on scroll ---
   JS sets --spread (0..1) on #gamesStage as the section scrolls into view.
   At --spread:0 the three phones share the exact same centered transform
   (same size, stacked); at --spread:1 they open like a fan from a shared
   bottom pivot, tilting away from the center. All three keep the same scale.
   The float animation uses the `translate` property, so it composes with
   these transforms without conflict. */
.games-stage {
  --end-scale: 0.82;
  position: relative;
  min-height: 520px;
}

.games-stage .hero-device-rig {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Pivot near the bottom so they open like a fan, not a side-slide. */
  transform-origin: 50% 85%;
  transform:
    translate(-50%, -50%)
    rotateZ(calc(var(--rz, 0deg) * var(--spread, 0)))
    rotateY(calc(var(--ry, 0deg) * var(--spread, 0)))
    translateX(calc(var(--tx, 0%) * var(--spread, 0)))
    scale(calc(1 - (1 - var(--end-scale)) * var(--spread, 0)));
  transition: transform 0.12s linear;
}

/* Same size for all three. Outer phones tilt away from the center. */
.games-phone-back  { z-index: 1; --tx: -18%; --rz: -18deg; --ry: -24deg; }
.games-phone-mid {
  z-index: 2; --tx: 0%; --rz: 0deg; --ry: 0deg;
  filter: drop-shadow(-22px 26px 38px rgba(0, 0, 10, 0.45));
  animation-delay: -2s;
}
.games-phone-front {
  z-index: 3; --tx: 18%; --rz: 18deg; --ry: 24deg;
  filter: drop-shadow(-26px 30px 42px rgba(0, 0, 10, 0.5));
  animation-delay: -4s;
}

/* --- Forca: fichas da palavra (word-complete) --- */
.game-word {
  display: flex;
  gap: 7px;
  justify-content: center;
  margin-bottom: 22px;
}
.game-word-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 38px;
  border-radius: 6px;
  background: #1B4079;
  color: #50FFCE;
  font-weight: 700;
  font-size: 18px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.game-word-tile.is-blank { color: transparent; }

/* --- Forca: teclado virtual 5x5 --- */
.game-keyboard {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  width: 84%;
  margin: 0 auto;
}
.game-key {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  color: #7FC6FF;
  font-weight: 600;
  font-size: 15px;
}

/* --- Quiz: cenário, pergunta destacada, alternativas e botão --- */
.quiz-scenario {
  font-size: 10.5px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.5;
  text-align: left;
  padding: 0 16px;
  margin-bottom: 9px;
}
.quiz-question {
  font-size: 12px;
  font-weight: 700;
  color: #7FC6FF;
  line-height: 1.4;
  text-align: left;
  padding: 0 16px;
  margin-bottom: 14px;
}
.quiz-answers {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  padding: 0 16px;
  margin-bottom: 16px;
}
.quiz-answer {
  border: 1px solid rgba(127, 198, 255, 0.35);
  border-radius: 10px;
  padding: 8px 10px;
  color: #ffffff;
  font-size: 10px;
  line-height: 1.4;
  background: rgba(255, 255, 255, 0.03);
}
.quiz-check {
  align-self: stretch;
  margin: 0 16px;
  padding: 10px 18px;
  border: none;
  border-radius: 999px;
  background: #2E80E6;
  color: #ffffff;
  font-weight: 700;
  font-size: 12px;
  font-family: inherit;
}

/* ------------------------------------------------------------
   7. CLIENT LOGOS
   ------------------------------------------------------------ */
.logos-section { padding: var(--space-7) 0; border-bottom: 1px solid rgba(255,255,255,0.08); }

/* Single-line auto-scrolling carousel; pauses on hover/focus.
   Edge fade is done with gradient overlays (matching the section
   background) instead of mask-image, so the moving logos are NOT
   pushed onto a masked compositor layer that would blur/jag them. */
.logo-carousel {
  position: relative;
  overflow: hidden;
}
.logo-carousel::before,
.logo-carousel::after {
  content: "";
  position: absolute; top: 0; bottom: 0; width: clamp(40px, 8vw, 120px);
  z-index: 2; pointer-events: none;
}
.logo-carousel::before { left: 0; background: linear-gradient(90deg, var(--dark-b), rgba(7,26,61,0)); }
.logo-carousel::after { right: 0; background: linear-gradient(270deg, var(--dark-b), rgba(7,26,61,0)); }
.logo-track {
  list-style: none; margin: 0; padding: var(--space-2) 0;
  display: flex; flex-wrap: nowrap; gap: var(--space-5);
  width: max-content;
  will-change: transform;
  /* Fallback sem JS: animação CSS. Com JS, o script assume o transform
     para poder desacelerar (não parar) no hover. */
  animation: logo-scroll 40s linear infinite;
}
/* Hover não pausa mais; o JS reduz a velocidade para 5% (ver script.js). */
/* .logo-carousel:hover .logo-track,
.logo-carousel:focus-within .logo-track { animation-play-state: paused; } */
.logo-slot {
  flex: 0 0 auto; width: 240px; height: 96px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
}
.logo-slot img {
  max-width: 100%; max-height: 56px; width: auto; height: auto;
  object-fit: contain;
}
@keyframes logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ------------------------------------------------------------
   8. CARDS (problem / testimonials) — white cards for readability
   ------------------------------------------------------------ */
.cards-grid { display: grid; gap: var(--space-5); margin-top: var(--space-6); }
.cards-grid.cards-3, .cards-grid.cards-4 { grid-template-columns: 1fr; }

.card {
  background: var(--card-bg); color: var(--card-text);
  border: 1px solid var(--card-border); border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.card h3 { color: var(--color-navy); }
.card-icon {
  width: 56px; height: 56px; margin-bottom: var(--space-3);
  padding: var(--space-2); background: #eef7f4; border-radius: var(--radius-md);
}
.cards-4 .card:nth-child(1) .card-icon { background: #fde5de; }
.cards-4 .card:nth-child(2) .card-icon { background: #e2f1fb; }
.cards-4 .card:nth-child(3) .card-icon { background: #fef2dd; }
.cards-4 .card:nth-child(4) .card-icon { background: #e6f7f2; }
.card p { margin-bottom: 0; color: var(--card-text-soft); }

.testimonial {
  margin: 0; background: var(--card-bg); color: var(--card-text);
  border: 1px solid var(--card-border); border-radius: var(--radius-lg);
  padding: var(--space-6); box-shadow: var(--shadow-md);
}
.testimonial blockquote { margin: 0 0 var(--space-4); font-size: var(--fs-lead); color: var(--color-navy); }
.testimonial figcaption { display: flex; flex-direction: column; gap: 2px; }
.testi-name { font-weight: 700; color: var(--color-navy); }
.testi-role, .testi-company { font-size: 0.9rem; color: var(--card-text-soft); }

/* ------------------------------------------------------------
   9. STEPS — white cards, colorful numbers
   ------------------------------------------------------------ */
.steps-grid { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
.step {
  background: var(--card-bg); color: var(--card-text);
  border: 1px solid var(--card-border); border-radius: var(--radius-lg);
  padding: var(--space-5); box-shadow: var(--shadow-md);
}
.step h3 { color: var(--color-navy); }
.step p { margin-bottom: 0; color: var(--card-text-soft); }
.step-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  background: var(--color-coral); color: var(--color-white);
  font-weight: 800; margin-bottom: var(--space-3);
}
.steps-grid .step:nth-child(2) .step-number { background: var(--color-blue); }
.steps-grid .step:nth-child(3) .step-number { background: var(--color-amber); color: var(--color-navy-deep); }
.steps-grid .step:nth-child(4) .step-number { background: var(--color-teal); color: var(--color-navy-deep); }

/* ------------------------------------------------------------
   9b. HOW IT WORKS — FLYWHEEL (4 passos em ciclo)
   Dimming só com JS (.is-animated) para leitura sem script.
   ------------------------------------------------------------ */
.flywheel-wrap {
  position: relative;
  margin-top: var(--space-7);
}

.flywheel-figure {
  background: var(--card-bg);
  color: var(--card-text);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  overflow: hidden;
}

.flywheel-stage {
  position: relative;
}

.flywheel-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 36rem;
  margin-inline: auto;
}

.flywheel-step {
  text-align: left;
  padding: var(--space-2) 0;
  transition: opacity 0.35s ease;
}

.flywheel-step .step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  background: var(--color-coral);
  color: var(--color-white);
  font-weight: 800;
  margin-bottom: var(--space-2);
  font-size: 0.95rem;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.flywheel-step:nth-child(1) .step-number { background: var(--color-coral); }
.flywheel-step:nth-child(2) .step-number { background: var(--color-blue); }
.flywheel-step:nth-child(3) .step-number { background: var(--color-amber); color: var(--color-navy-deep); }
.flywheel-step:nth-child(4) .step-number { background: var(--color-teal); color: var(--color-navy-deep); }

.flywheel-step h3 {
  color: var(--color-navy-deep);
  font-size: var(--fs-h3);
  margin-bottom: var(--space-1);
  line-height: 1.2;
}

.flywheel-step p {
  margin: 0;
  color: rgba(0, 0, 40, 0.82);
  font-size: var(--fs-body);
  line-height: 1.45;
  max-width: 28ch;
}

.flywheel-wrap.is-animated .flywheel-step:not(.is-active) {
  opacity: 0.55;
}

.flywheel-wrap.is-animated .flywheel-step.is-active {
  opacity: 1;
}

.flywheel-wrap.is-animated .flywheel-step.is-active .step-number {
  transform: scale(1.12);
  box-shadow: 0 0 0 5px rgba(0, 0, 40, 0.14);
}

.flywheel-wrap.is-animated .flywheel-step.is-active h3 {
  color: var(--color-navy-deep);
}

.flywheel-wrap.is-animated .flywheel-step.is-active p {
  color: rgba(0, 0, 40, 0.92);
}

.flywheel-hub {
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;
  pointer-events: none;
}

.flywheel-hub-inner {
  position: relative;
  width: min(11rem, 72vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: transparent;
  color: var(--color-navy-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
}

.flywheel-hub-label {
  position: relative;
  z-index: 1;
  margin: 0;
  font-weight: 700;
  font-size: clamp(0.8rem, 2.2vw, 0.92rem);
  line-height: 1.2;
  text-align: center;
  max-width: 10ch;
  color: var(--color-navy-deep);
}

.flywheel-spin-svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  display: block;
  overflow: visible;
}

.flywheel-spin-svg .flywheel-spin-track {
  fill: none;
  stroke: #dbdbe3;
  stroke-width: 2;
  stroke-linecap: round;
}

#flywheel-arrow path {
  fill: #dbdbe3;
}

.flywheel-mini {
  order: 2;
  margin-top: var(--space-4);
}

.flywheel-mini.flywheel-hub-label {
  max-width: none;
  text-align: left;
  font-size: 1rem;
}

@media (max-width: 899px) {
  .flywheel-figure {
    display: flex;
    flex-direction: column;
  }

  /* Hide the standalone "Compliance fortalecido" mini label on mobile
     (requested). Desktop already hides it via min-width: 900px.
  .flywheel-mini {
    padding-left: calc(2rem + var(--space-3));
  }

  .flywheel-mini.flywheel-hub-label {
    font-size: 1.05rem;
  }
  */
  .flywheel-mini {
    display: none;
  }

  .flywheel-grid {
    gap: var(--space-4);
    max-width: none;
  }

  .flywheel-step {
    position: relative;
    display: grid;
    grid-template-columns: 2rem 1fr;
    column-gap: var(--space-3);
    padding: 0;
  }

  .flywheel-step .step-number {
    grid-row: 1 / span 2;
    width: 2rem;
    height: 2rem;
    margin: 0;
    font-size: 0.85rem;
  }

  .flywheel-step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: calc(1rem - 1px);
    top: 2.35rem;
    bottom: calc(-1 * var(--space-4) + 0.35rem);
    width: 2px;
    background: var(--card-border);
  }

  .flywheel-step h3 {
    font-size: 1.05rem;
    margin: 0.3rem 0 var(--space-1);
  }

  .flywheel-step p {
    font-size: 0.92rem;
    max-width: none;
  }

  .flywheel-wrap.is-animated .flywheel-step.is-active .step-number {
    transform: none;
    box-shadow: 0 0 0 4px rgba(0, 0, 40, 0.12);
  }
}

@media (min-width: 900px) {
  .flywheel-figure {
    padding: var(--space-6) var(--space-5);
  }

  .flywheel-mini {
    display: none;
  }

  .flywheel-stage {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 9rem 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "s1 . s2"
      "s4 . s3";
    gap: var(--space-6) 0;
    max-width: 56rem;
    margin-inline: auto;
    padding-block: var(--space-2);
  }

  .flywheel-grid {
    display: contents;
    max-width: none;
  }

  .flywheel-step {
    position: relative;
    z-index: 1;
    max-width: 17rem;
  }

  .flywheel-step[data-step="1"] {
    grid-area: s1;
    align-self: end;
    justify-self: end;
  }

  .flywheel-step[data-step="2"] {
    grid-area: s2;
    align-self: end;
    justify-self: start;
  }

  .flywheel-step[data-step="3"] {
    grid-area: s3;
    align-self: start;
    justify-self: start;
  }

  .flywheel-step[data-step="4"] {
    grid-area: s4;
    align-self: start;
    justify-self: end;
  }

  .flywheel-hub {
    display: flex;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 17rem;
    height: 17rem;
    transform: translate(-50%, -50%);
    z-index: 0;
  }

  .flywheel-hub-inner {
    width: 100%;
    height: 100%;
    max-width: none;
  }

  .flywheel-step h3 {
    font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  }

  .flywheel-step p {
    font-size: clamp(0.875rem, 1.35vw, 0.95rem);
    max-width: 26ch;
  }
}

.howitworks-section .section-note {
  margin-top: var(--space-7);
  max-width: 52ch;
  margin-inline: 0;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: var(--color-navy-deep);
  font-weight: 600;
}

.flywheel-wrap.is-reduced-motion .flywheel-step {
  opacity: 1;
}

/* Implementation timeline */
.timeline {
  list-style: none;
  margin: var(--space-7) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
  position: relative;
  align-items: start;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: rgba(255, 255, 255, 0.45);
}
.timeline-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-4);
  align-items: start;
  align-content: start;
  position: relative;
}
.timeline-marker {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--color-coral);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.timeline-content {
  background: var(--color-white);
  color: var(--card-text);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  align-self: start;
}
.timeline-content h3 { color: var(--color-navy); margin-bottom: var(--space-2); }
.timeline-content p { margin: 0; color: var(--card-text-soft); }

/* ------------------------------------------------------------
   10. SPLIT SECTIONS (employee / compliance)
   ------------------------------------------------------------ */
.split { display: grid; gap: var(--space-6); align-items: center; }
.split-visual { order: -1; }
.img-placeholder {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 260px; border: 2px dashed rgba(106, 204, 185, 0.6);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(106,204,185,0.16), rgba(0,111,175,0.16));
  color: var(--color-teal); font-weight: 600; padding: var(--space-5);
}

/* ------------------------------------------------------------
   10.2 CONTENT CATALOG (sober split: themes + editorial seal)
   Pill background: approved fiadas from experiments/temas-pills
   (texto 0.20, borda 0, preenchimento 0.115, 0.78rem, espaço 10px,
   deslocamento 96px, véu 0.94). Rows are built in script.js.
   ------------------------------------------------------------ */
.content-section {
  --pill-ink: 0.2;
  --pill-line: 0;
  --pill-fill: 0.115;
  --pill-size: 0.78rem;
  --pill-gap: 10px;
  --pill-shift: 96px;
  --scrim: 0.94;
}
.content-pills {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  /* Fill from the top down. Row count is computed from the section height
     in script.js, so the field covers the whole block instead of
     clustering in the vertical middle on tall (mobile) layouts.
     Old: justify-content: center; */
  justify-content: flex-start;
  gap: var(--pill-gap);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
}
/* The row keeps its own height (flex-shrink: 0) so a short column cannot
   squash every pill and clip the bottom curve. Horizontal overflow still
   hides the marquee; the field (.content-pills) is what clips vertically.
   Old rule was width 100% and overflow hidden, with the default flex-shrink. */
.content-pills-row {
  width: 100%;
  flex: 0 0 auto;
  overflow: hidden;
}
.content-pills-track {
  display: flex;
  width: max-content;
  flex-wrap: nowrap;
}
.content-pills-seq {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: var(--pill-gap);
  padding-right: var(--pill-gap);
}
.content-pill {
  flex: none;
  white-space: nowrap;
  padding: 0.45em 0.95em;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(106, 204, 185, var(--pill-line));
  background: rgba(255, 255, 255, var(--pill-fill));
  color: rgba(255, 255, 255, var(--pill-ink));
  font-size: var(--pill-size);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.content-pills-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(0, 2, 48, var(--scrim)) 0%,
    rgba(0, 2, 48, calc(var(--scrim) * 0.82)) 34%,
    rgba(0, 2, 48, calc(var(--scrim) * 0.28)) 62%,
    rgba(0, 2, 48, 0.08) 100%
  );
}
.content-section .section-title { max-width: 22ch; }
.content-layout { align-items: start; position: relative; z-index: 2; }
.content-layout > * { min-width: 0; }
.content-layout .section-intro { max-width: 46ch; }
.content-section .split-visual { order: 2; } /* copy first on small screens */
.theme-chips {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  width: 100%;
}
.theme-chips li {
  margin: 0;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--surface-border);
  background: var(--surface-panel);
  color: var(--text-on-dark);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.3;
  max-width: 100%;
}
.theme-more {
  margin: var(--space-4) 0 0;
  color: var(--color-teal);
  font-weight: 600;
  font-size: 0.95rem;
}
.content-validation {
  margin: var(--space-5) 0 0;
  color: var(--text-on-dark);
  max-width: 42ch;
}
.content-cta { text-align: left; }
.content-cta .hero-actions-note { max-width: 42ch; }
.content-author {
  margin: 0;
  display: grid;
  grid-template-areas:
    "photo"
    "caption"
    "cards";
  gap: var(--space-4) var(--space-3);
  align-items: start;
  overflow: visible;
}
.content-author-photo {
  grid-area: photo;
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center bottom;
  /* Placeholder box (dashed) — kept only while the photo was pending.
  min-height: 0;
  aspect-ratio: 3 / 4;
  */
}
.content-cred-rig {
  grid-area: cards;
  --hero-device-rx: 0deg;
  --hero-device-ry: 0deg;
  transform-style: preserve-3d;
}
.content-author-caption {
  grid-area: caption;
  display: grid;
  gap: var(--space-1);
  max-width: 100%;
  /* margin-top: var(--space-4); — gap on the figure grid now handles spacing */
}
/* .content-author-caption strong { color: var(--color-white); font-size: 1.05rem; } */
.content-author-name {
  color: var(--color-white);
  font-size: 1.05rem;
  font-weight: 700;
  width: fit-content;
}
.content-author-name:hover,
.content-author-name:focus-visible {
  color: var(--color-teal);
  text-decoration: underline;
}
.content-author-role {
  color: var(--text-on-dark-soft);
  font-size: 0.95rem;
}
.content-author-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  transform-style: preserve-3d;
}
/* Stacked list under the photo — replaced by floating cards.
.content-author-stats {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.content-author-stats li {
  display: grid;
  grid-template-columns: 4.1rem 1fr;
  gap: var(--space-3);
  align-items: start;
}
*/
.content-cred-card {
  display: grid;
  gap: 0.15rem;
  padding: var(--space-3) var(--space-4);
  /* background: var(--surface-panel); — pills showed through the 5% white fill */
  background: #0e1c3d;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  transform-style: preserve-3d;
}
.content-author-stat-value {
  display: inline-block;
  color: var(--color-teal);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.1;
}
/* Quadrados laranja copiados do site da Letícia — removidos a pedido.
.content-author-stat-value::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0.18em;
  width: 0.7em;
  height: 0.7em;
  border-radius: 0.2em;
  background: linear-gradient(135deg, var(--color-amber), var(--color-coral));
}
*/
.content-author-stat-label {
  color: var(--text-on-dark-soft);
  font-size: 0.8rem;
  line-height: 1.4;
}
.content-author-flags {
  display: inline-block;
  margin-left: 0.15em;
  letter-spacing: 0.08em;
}
.content-validation a:hover,
.content-validation a:focus-visible { text-decoration: underline; }
/* .content-author-caption .content-author-cred { color: var(--color-teal); font-weight: 600; } */

/* ------------------------------------------------------------
   10.1 ADMIN DESKTOP MOCKUP (CSS 3D laptop + anonymized dashboard)
   Designed at 1080×640 and scaled to the laptop screen via --admin-dash-scale.
   ------------------------------------------------------------ */
.admin-device-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  perspective: 1600px;
  perspective-origin: 50% 40%;
}
.admin-device-blob {
  top: 8%;
  right: -8%;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, var(--color-blue) 0 55%, transparent 70%);
}
.admin-device-rig {
  --hero-device-rx: 0deg;
  --hero-device-ry: 0deg;
  position: relative;
  z-index: 1;
  width: 100%;
  transform-style: preserve-3d;
  transform:
    rotateX(calc(6deg + var(--hero-device-ry)))
    rotateY(calc(-10deg + var(--hero-device-rx)));
  transition: transform 0.25s ease-out;
  animation: hero-device-float 6s ease-in-out infinite;
}
.admin-device-laptop { width: 100%; max-width: 560px; margin: 0 auto; }
.admin-device-bezel {
  padding: 10px 10px 14px;
  border-radius: 14px 14px 8px 8px;
  background: linear-gradient(150deg, #2b3f74, #0e1c3d);
  box-shadow:
    0 2px 0 2px rgba(255,255,255,0.06) inset,
    28px 40px 70px -18px rgba(0,0,10,0.55),
    0 0 0 2px rgba(0,0,20,0.4);
}
.admin-device-camera {
  display: block;
  width: 7px;
  height: 7px;
  margin: 0 auto 7px;
  border-radius: 50%;
  background: #0a1330;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
}
.admin-device-screen {
  --admin-dash-scale: 0.48;
  position: relative;
  width: 100%;
  aspect-ratio: 1080 / 640;
  overflow: hidden;
  border-radius: 6px;
  background: #eef5ff;
}
.admin-dash {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 1080px;
  height: 640px;
  overflow: hidden;
  color: #2e80e6;
  font-family: "Poppins", system-ui, sans-serif;
  background: #f4f8ff;
  transform: scale(var(--admin-dash-scale));
  transform-origin: 0 0;
}
.admin-dash-nav {
  display: flex;
  flex-direction: column;
  width: 168px;
  padding: 18px 10px 12px;
  color: #fff;
  background: linear-gradient(#152b57, #2e5dbd);
}
.admin-dash-logo {
  display: block;
  width: 118px;
  height: auto;
  margin: 0 auto 22px;
}
.admin-dash-menu { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.admin-dash-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 6px;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
}
.admin-dash-item svg { width: 16px; height: 16px; flex: 0 0 16px; }
.admin-dash-chevron { margin-left: auto; width: 14px; height: 14px; flex-basis: 14px; opacity: 0.8; }
.admin-dash-item.is-active { background: #2e80e6; }
.admin-dash-exit { margin-top: auto; }
.admin-dash-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.admin-dash-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 52px;
  padding: 0 18px;
  background: #e1eeff;
}
.admin-dash-avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #2e5dbd;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.admin-dash-main {
  display: flex;
  flex: 1;
  gap: 8px;
  min-height: 0;
  padding: 8px;
}
.admin-dash-center {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
  padding: 10px 12px 12px;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
}
.admin-dash-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.admin-dash-heading strong { font-size: 16px; font-weight: 700; color: #2e80e6; }
.admin-dash-select {
  min-width: 148px;
  padding: 7px 12px;
  border: 1px solid #d5e4f7;
  border-radius: 8px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237492ba' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: #7492ba;
  font-size: 12px;
}
.admin-dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.admin-dash-kpi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 72px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #e1eeff;
}
.admin-dash-kpi p {
  margin: 0 0 4px;
  color: #2e80e6;
  font-size: 11px;
  font-weight: 500;
}
.admin-dash-kpi strong,
.admin-dash-kpi-value { color: #2e80e6; font-size: 13px; font-weight: 700; white-space: nowrap; }
.admin-dash-kpi-value { display: flex; align-items: center; gap: 10px; }
.admin-dash-online { position: relative; padding-left: 14px; }
.admin-dash-online::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #40c057;
  transform: translateY(-50%);
  box-shadow: 0 0 0 4px rgba(64,192,87,0.25);
}
.admin-dash-kpi-value i { width: 1px; height: 16px; background: #ced4da; }
.admin-dash-kpi em {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  color: #2e80e6;
  font-style: normal;
}
.admin-dash-kpi em svg { width: 18px; height: 18px; }
.admin-dash-kpi.is-ok { background: #ebfbee; }
.admin-dash-kpi.is-ok p,
.admin-dash-kpi.is-ok strong { color: #2b8a3e; }
.admin-dash-kpi.is-ok em { color: #2f9e44; }
.admin-dash-kpi.is-bad { background: #fff5f5; }
.admin-dash-kpi.is-bad p,
.admin-dash-kpi.is-bad strong { color: #c92a2a; }
.admin-dash-kpi.is-bad em { color: #fa5252; }
.admin-dash-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.admin-dash-card {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid #e9eef6;
  border-radius: 10px;
  background: #fff;
}
.admin-dash-card > p,
.admin-dash-aside-head strong {
  margin: 0 0 10px;
  color: #7492ba;
  font-size: 13px;
  font-weight: 600;
}
.admin-dash-donut-row { display: flex; align-items: center; gap: 12px; }
.admin-dash-donut {
  flex: 0 0 118px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  -webkit-mask: radial-gradient(farthest-side, transparent 54%, #000 55%);
  mask: radial-gradient(farthest-side, transparent 54%, #000 55%);
}
.admin-dash-donut-days {
  background: conic-gradient(#ff8787 0 18%, #4c6ef5 18% 48%, #69db7c 48% 82%, #ffe066 82% 100%);
}
.admin-dash-donut-content {
  background: conic-gradient(#ff8787 0 28%, #4c6ef5 28% 54%, #69db7c 54% 78%, #ffe066 78% 100%);
}
.admin-dash-donut-row ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.admin-dash-donut-row li {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #7492ba;
  font-size: 12px;
  font-weight: 500;
}
.admin-dash-donut-row i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 8px;
}
.admin-dash-donut-row .c-red { background: #ff8787; }
.admin-dash-donut-row .c-blue { background: #4c6ef5; }
.admin-dash-donut-row .c-green { background: #69db7c; }
.admin-dash-donut-row .c-yellow { background: #ffe066; }
.admin-dash-bars-card { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.admin-dash-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  flex: 1;
  min-height: 92px;
  padding: 4px 4px 0;
  border-top: 1px dashed #edf2fa;
}
.admin-dash-bars span {
  flex: 1;
  height: var(--h);
  border-radius: 3px 3px 0 0;
  background: #ffa8a8;
}
.admin-dash-bars span.is-line {
  flex: 0.35;
  background: #ff6b6b;
  opacity: 0.85;
}
.admin-dash-aside {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 236px;
  flex: 0 0 236px;
}
.admin-dash-aside .admin-dash-card { padding: 10px 12px; }
.admin-dash-aside-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.admin-dash-aside-head strong { margin: 0; }
.admin-dash-aside-head span {
  padding: 4px 8px;
  border: 1px solid #d5e4f7;
  border-radius: 6px;
  color: #2e80e6;
  font-size: 11px;
}
.admin-dash-rank,
.admin-dash-games { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.admin-dash-rank li,
.admin-dash-games li { display: flex; align-items: center; gap: 8px; }
.admin-dash-rank b,
.admin-dash-games em {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e1eeff;
  color: #2e5dbd;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  flex: 0 0 28px;
}
.admin-dash-rank div,
.admin-dash-games div { min-width: 0; }
.admin-dash-rank strong,
.admin-dash-games strong {
  display: block;
  overflow: hidden;
  color: #2e80e6;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.admin-dash-rank small,
.admin-dash-games small { color: #7492ba; font-size: 10px; }
.admin-device-base {
  height: 11px;
  margin: 0 28px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(#1a2a52, #0c1636);
  box-shadow: 0 16px 28px -10px rgba(0,0,10,0.45);
}

/* ------------------------------------------------------------
   11. METRICS
   ------------------------------------------------------------ */
.metrics-section { background: var(--color-navy-deep); overflow: hidden; }
.metrics-section .section-title { color: var(--color-white); }
.metrics-section .section-eyebrow { color: var(--color-teal); }
/* .metrics-note movido para dentro dos boxes (.metric-desc) a pedido */
.metrics-note {
  margin: var(--space-5) 0 0;
  text-align: center;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.72);
}
.metrics-grid { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: 1fr; text-align: center; }
.metrics-grid { align-items: stretch; }
.metric { padding: var(--space-6) var(--space-5); background: var(--surface-panel); border: 1px solid var(--surface-border); border-radius: var(--radius-lg); }
.metric-value { display: block; font-size: clamp(2.2rem, 8vw, 3.2rem); font-weight: 800; line-height: 1; margin-bottom: var(--space-2); }
.metrics-grid .metric:nth-child(1) .metric-value { color: var(--color-teal); }
.metrics-grid .metric:nth-child(2) .metric-value { color: var(--color-amber); }
.metrics-grid .metric:nth-child(3) .metric-value { color: var(--color-coral); }
.metric-label { color: var(--text-on-dark); font-weight: 600; }
.metric-desc { display: block; margin-top: var(--space-3); font-size: 0.8rem; font-weight: 400; line-height: 1.5; color: rgba(255, 255, 255, 0.42); }

/* ------------------------------------------------------------
   12. TAGS / FEATURE LISTS
   ------------------------------------------------------------ */
.feature-list { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.feature-list li { position: relative; padding-left: var(--space-6); color: var(--text-on-dark); }
.feature-list li::before {
  content: ""; position: absolute; left: 0; top: 0.35em; width: 18px; height: 18px;
  background: url("assets/icons/bullet-teal.svg") center / contain no-repeat;
}
.feature-list-cols { grid-template-columns: 1fr; }

.tag-list { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.tag-list li {
  background: var(--surface-panel); color: var(--color-white);
  font-weight: 600; font-size: 0.9rem; padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill); border: 2px solid var(--color-teal);
}
.tag-list li:nth-child(3n+1) { border-color: var(--color-coral); }
.tag-list li:nth-child(3n+2) { border-color: var(--color-amber); }
.tag-list li:nth-child(3n+3) { border-color: var(--color-teal); }

/* ------------------------------------------------------------
   13. FAQ — dark translucent items, teal questions
   ------------------------------------------------------------ */
.faq-item {
  background: var(--surface-panel); border: 1px solid var(--surface-border);
  border-radius: var(--radius-md); margin-bottom: var(--space-3); overflow: hidden;
}
.faq-item summary {
  cursor: pointer; list-style: none; padding: var(--space-4) var(--space-5);
  font-weight: 600; color: var(--color-teal);
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.5rem; color: var(--color-coral); line-height: 1; flex-shrink: 0; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-answer { padding: 0 var(--space-5) var(--space-4); }
.faq-answer p { margin: 0; color: var(--text-on-dark); }

.faq-split {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-6);
  align-items: start;
}
.faq-list { min-width: 0; }
.faq-visual { order: -1; } /* quotes above the accordion on small screens */
/* .faq-visual .img-placeholder { min-height: 320px; } */

.faq-quotes { min-width: 0; }
.faq-quotes-label {
  margin: 0 0 var(--space-4);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal);
}
.faq-quotes-cluster {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  align-items: stretch;
}
.faq-quotes-blob {
  position: absolute;
  z-index: 0;
  width: 220px;
  height: 220px;
  left: 50%;
  top: 42%;
  translate: -50% -50%;
  background: radial-gradient(circle, rgba(106, 204, 185, 0.28) 0 55%, transparent 70%);
  pointer-events: none;
}
.faq-quote {
  position: relative;
  z-index: 1;
  margin: 0;
  background: var(--card-bg);
  color: var(--card-text);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.faq-quote blockquote {
  margin: 0 0 var(--space-3);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-navy);
}
.faq-quote blockquote::before {
  content: "“";
  display: block;
  margin-bottom: 0.15rem;
  font-size: 1.75rem;
  line-height: 0.7;
  font-weight: 700;
  color: var(--color-coral);
}
.faq-quote--nps blockquote::before { color: var(--color-teal); }
.faq-quote--fast blockquote::before { color: var(--color-amber); }
.faq-quote--themes blockquote::before { color: var(--color-blue-bright); }
.faq-quote figcaption {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--card-text-soft);
}
.faq-quote--anchor { grid-column: 1 / -1; }
.faq-quote--anchor blockquote { font-size: 1rem; }
.faq-quote--themes { grid-column: 1 / -1; max-width: 22rem; }

/* ------------------------------------------------------------
   14. CONTACT / TALLY
   ------------------------------------------------------------ */
.contact-section { overflow: hidden; text-align: center; }
/* .contact-mascot { width: 96px; height: auto; margin: 0 auto var(--space-4); } */ /* mascote removido a pedido */
.tally-embed-shell {
  margin-top: var(--space-6);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--card-border);
}
.tally-embed {
  min-height: 240px;
  background: var(--color-white);
  text-align: left;
}
.tally-embed iframe {
  display: block;
  width: 100%;
  min-height: 280px;
  border: 0;
}

/* ------------------------------------------------------------
   15. FOOTER
   ------------------------------------------------------------ */
.site-footer { background: var(--color-surface-dark); color: rgba(255,255,255,0.82); padding: var(--space-8) 0 var(--space-6); }
.footer-inner {
  display: grid;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.footer-heading {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin: 0 0 var(--space-3);
}
.footer-brand img { height: 52px; width: auto; }
.footer-tagline {
  margin: var(--space-4) 0 0;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.72);
  max-width: 28ch;
}
.footer-col a { color: rgba(255,255,255,0.82); }
.footer-col a:hover { color: var(--color-teal); }
.footer-copy { margin: var(--space-5) 0 0; font-size: 0.85rem; opacity: 0.7; }
.footer-credit { margin: var(--space-2) 0 0; font-size: 0.9rem; }
.footer-credit a { color: var(--color-teal); font-weight: 600; }

/* ------------------------------------------------------------
   15.1 LEGAL PAGES (privacy policy, etc.)
   ------------------------------------------------------------ */
.legal-page { background: var(--dark-a); }
.legal-document {
  text-align: left;
  color: rgba(255, 255, 255, 0.88);
}
.legal-document .section-title {
  font-size: clamp(1.65rem, 4vw, 2.25rem);
  margin-bottom: var(--space-3);
}
.legal-meta {
  margin: 0 0 var(--space-7);
  font-size: 0.95rem;
  opacity: 0.85;
}
.legal-document h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-teal);
  margin: var(--space-7) 0 var(--space-3);
}
.legal-document h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: var(--space-5) 0 var(--space-2);
}
.legal-document p,
.legal-document li {
  line-height: 1.65;
  font-size: 0.95rem;
}
.legal-document ul,
.legal-document ol {
  margin: 0 0 var(--space-4);
  padding-left: 1.25rem;
}
.legal-document a { color: var(--color-teal); font-weight: 500; }
.legal-document a:hover { color: var(--color-teal-bright); }
.legal-document code {
  font-size: 0.88em;
  background: rgba(255, 255, 255, 0.08);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}
.legal-table-wrap {
  overflow-x: auto;
  margin: var(--space-4) 0 var(--space-5);
}
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.legal-table th,
.legal-table td {
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: var(--space-3);
  vertical-align: top;
  text-align: left;
}
.legal-table th {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-teal);
  font-weight: 600;
}
.legal-back {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* ------------------------------------------------------------
   15.2 THANK-YOU PAGE (Tally redirect)
   ------------------------------------------------------------ */
.thanks-header-link {
  font-weight: 600;
  color: var(--text-on-dark);
  white-space: nowrap;
}
.thanks-header-link:hover {
  color: var(--color-teal);
  text-decoration: none;
}

.thanks-hero { background: var(--dark-a); }
.thanks-hero-split { align-items: center; }
.thanks-hero-copy .section-intro { max-width: 38ch; margin-bottom: 0; }
.thanks-hero-title {
  margin: 0 0 var(--space-4);
  font-size: clamp(2.75rem, 8vw, 4.25rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--color-teal);
  letter-spacing: -0.02em;
}
.thanks-steps-title {
  margin: var(--space-6) 0 var(--space-3);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal);
}
.thanks-next-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 42ch;
  display: grid;
  gap: var(--space-4);
  font-size: var(--fs-lead);
  color: var(--text-on-dark);
  line-height: 1.55;
}
.thanks-next-list li {
  position: relative;
  padding-left: var(--space-6);
}
.thanks-next-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 18px;
  height: 18px;
  background: url("assets/icons/bullet-teal.svg") center / contain no-repeat;
}
.thanks-next-list strong {
  display: block;
  color: var(--color-white);
  font-weight: 700;
  margin-bottom: 0.15rem;
}
.thanks-hero-split .split-visual { order: 2; }
.thanks-hero-visual.hero-visual {
  margin-top: 0;
  min-height: 380px;
  overflow: visible;
}

.thanks-video-section { background: var(--dark-b); }
.thanks-quotes-section { background: var(--dark-c); }

.thanks-video {
  position: relative;
  width: 100%;
  max-width: 840px;
  margin: var(--space-6) auto 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-navy-deep);
}
.thanks-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.thanks-quotes {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
  grid-template-columns: 1fr;
  align-items: center;
}
.thanks-quotes .faq-quote {
  display: flex;
  flex-direction: column;
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: auto;
  max-width: none;
  animation: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.thanks-quotes .faq-quote:nth-child(1) {
  transform: rotate(-2.5deg) translateY(8px);
  z-index: 1;
}
.thanks-quotes .faq-quote:nth-child(2) {
  transform: rotate(3deg) translateY(-6px);
  z-index: 2;
}
.thanks-quotes .faq-quote:nth-child(3) {
  transform: rotate(-1.5deg) translateY(12px);
  z-index: 1;
}
.thanks-quotes .faq-quote:nth-child(4) {
  transform: rotate(2deg) translateY(-10px);
  z-index: 3;
}
.thanks-quotes .faq-quote:hover {
  transform: rotate(0deg) translateY(0);
  z-index: 4;
}
.thanks-quotes .faq-quote blockquote { flex: 1; }
.thanks-quote--blue blockquote::before { color: var(--color-blue-bright); }

.thanks-back {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
}

/* ------------------------------------------------------------
   16. SECTION BACKGROUNDS
   Alternating dark tones so no two adjacent dark blocks share the
   same color; plus the vibrant full-bleed colored blocks.
   ------------------------------------------------------------ */
/* Dark blocks — alternate a/b/c between colored blocks */
/* Order since 2026-09-25: logos → experiência → métricas → gestor → depoimentos
   → conteúdo → como funciona → desafios → FAQ → contato. */
.logos-section       { background: var(--dark-b); }
/* .problem-section     { background: var(--dark-c); } */
.problem-section     { background: var(--dark-a); }  /* #desafio, after teal block, before FAQ (dark-c) */
/* .experience-section  { background: var(--dark-b); } */
.experience-section  { background: var(--dark-c); }  /* right after logos (dark-b) */
.content-section     { background: var(--dark-a); }  /* after testimonials, before teal block */
.compliance-section  { background: var(--dark-c); }
.metrics-section     { background: var(--color-navy-deep); }
.testimonials-section{ background: var(--dark-b); }
.faq-section         { background: var(--dark-c); }
.contact-section     { background: var(--dark-b); }

/* How it works — teal→blue gradient block */
.howitworks-section { background: linear-gradient(135deg, var(--color-teal), var(--color-blue-bright)); }
.howitworks-section .section-title { color: var(--color-navy-deep); }
.howitworks-section .section-intro { color: rgba(0, 0, 40, 0.78); }
.howitworks-section .section-eyebrow { color: rgba(0, 0, 40, 0.68); }

/* Implementation — coral/orange block (section hidden 2026-09-16)
.implementation-section { background: var(--color-coral); }
.implementation-section .section-title { color: var(--color-white); }
.implementation-section .section-eyebrow { color: rgba(255, 255, 255, 0.92); }
*/

/* Security — blue block (section hidden 2026-09-16)
.security-section { background: var(--color-blue); }
.security-section .section-title { color: var(--color-white); }
.security-section .section-eyebrow { color: rgba(255, 255, 255, 0.92); }
.security-section .section-intro { color: rgba(255, 255, 255, 0.92); }
.security-section .tag-list li { background: var(--color-white); color: var(--color-navy); border-color: transparent; }
*/

/* ------------------------------------------------------------
   17. RESPONSIVE
   ------------------------------------------------------------ */
@media (min-width: 640px) {
  .cards-grid.cards-3 { grid-template-columns: repeat(3, 1fr); }
  .cards-grid.cards-4 { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: repeat(3, 1fr); }
  .metrics-grid { grid-template-columns: repeat(3, 1fr); }
  .feature-list { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .thanks-quotes { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .section { padding: var(--space-9) 0; }

  /* Horizontal nav moved to 1200px — 900–1199 was too tight in the 1140px
     container and “Perguntas Frequentes” sat under the CTA pills. */
  /* .nav-toggle { display: none; } */
  /* .header-inner { gap: 1.5rem; } */
  /* .brand { flex: 0 0 auto; } */
  /* .brand img { height: 40px; width: 128px; } */
  /* .primary-nav { display: flex; position: static; flex: 1 1 auto; min-width: 0; background: transparent; border: 0; } */

  .faq-split { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-8); }
  .faq-visual {
    order: 0;
    position: sticky;
    top: calc(var(--header-h) + 1.25rem);
  }
  .faq-quotes-cluster {
    display: block;
    min-height: 42rem;
  }
  .faq-quote {
    position: absolute;
    animation: hero-device-float 6s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 0.55s);
  }
  .faq-quote--nps {
    top: 0;
    left: 0;
    width: 66%;
    transform: rotate(5deg);
    z-index: 3;
  }
  .faq-quote--themes {
    top: 23%;
    left: auto;
    right: 0;
    width: 62%;
    max-width: none;
    grid-column: auto;
    transform: rotate(-6deg);
    z-index: 3;
  }
  .faq-quote--anchor {
    top: 47%;
    left: 4%;
    width: 90%;
    grid-column: auto;
    transform: rotate(-2deg);
    z-index: 4;
    padding: var(--space-5);
  }
  .faq-quote--fast {
    top: 78%;
    bottom: auto;
    left: auto;
    right: 2%;
    width: 74%;
    transform: rotate(4deg);
    z-index: 3;
  }

  .hero { padding: var(--space-9) 0; }
  .hero-inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-7); align-items: center; }
  .hero-visual { margin-top: 0; min-height: 460px; }

  .cards-grid.cards-4 { grid-template-columns: repeat(4, 1fr); }
  .steps-grid-4 { grid-template-columns: repeat(4, 1fr); }
  .thanks-quotes { grid-template-columns: repeat(4, 1fr); }

  .split { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .split-visual { order: 0; }
  .thanks-hero-split .split-visual { order: 0; }
  .thanks-hero-visual.hero-visual { min-height: 460px; }
  .content-section .split-visual { order: 0; }
  .content-layout { grid-template-columns: 0.95fr 1.05fr; }
  .content-author {
    grid-template-columns: minmax(0, 1fr) minmax(152px, 200px);
    grid-template-areas:
      "photo cards"
      "caption cards";
    perspective: 1200px;
  }
  .content-cred-rig {
    align-self: start;
    padding-top: var(--space-2);
    transform:
      rotateX(calc(4deg + var(--hero-device-ry)))
      rotateY(calc(-8deg + var(--hero-device-rx)));
    transition: transform 0.25s ease-out;
  }
  .content-author-stats { grid-template-columns: 1fr; }
  .content-cred-card {
    animation: hero-device-float 6s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 0.4s);
    transform: rotateY(-6deg) rotateX(2deg);
  }
  /* Alternating tilt made neighboring cards disagree.
  .content-cred-card:nth-child(odd) { transform: rotateY(-6deg) rotateX(2deg); }
  .content-cred-card:nth-child(even) { transform: rotateY(6deg) rotateX(-2deg); }
  */
  /* Cards now sit beside the photo, so the 420px cap no longer applies.
  .content-author-photo,
  .content-author-caption { max-width: 420px; }
  */
  .split-reverse .split-copy { order: 2; }
  .split-reverse .split-visual { order: 1; }
  .feature-list-cols { grid-template-columns: repeat(2, 1fr); }
  .admin-device-stage { min-height: 340px; }
  .admin-device-laptop { max-width: none; }

  .timeline {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }
  .timeline::before {
    left: 8%;
    right: 8%;
    top: 22px;
    bottom: auto;
    width: auto;
    height: 2px;
  }
  .timeline-item {
    grid-template-columns: 1fr;
    justify-items: stretch;
    align-items: start;
    align-content: start;
  }
  .timeline-marker { justify-self: center; }
  .timeline-content { text-align: left; width: 100%; }

  .footer-inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-7); align-items: start; }
}

@media (min-width: 1200px) {
  .site-header .container { max-width: 1320px; }
  .nav-toggle { display: none; }
  .header-inner { gap: 1.5rem; }
  .brand { flex: 0 0 auto; }
  .brand img { height: 40px; width: 128px; }

  .primary-nav {
    display: flex; position: static; flex: 1 1 auto; min-width: 0;
    background: transparent; border: 0;
  }
  .nav-panel {
    flex-direction: row; align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap; gap: var(--space-3) var(--space-4);
    padding: 0; margin: 0;
    width: 100%; min-width: 0;
  }
  .nav-links {
    flex-direction: row; align-items: center; flex-wrap: nowrap;
    flex: 0 1 auto; min-width: 0; justify-content: flex-start;
    gap: 0.85rem;
  }
  .nav-link {
    padding: var(--space-2) 0;
    font-size: 0.8125rem; /* fixed — do not scale with viewport */
    white-space: nowrap;
  }
  .nav-actions {
    flex-direction: row; align-items: center; flex-shrink: 0;
    gap: var(--space-2); padding-top: 0; border-top: 0;
    margin-left: auto;
    position: relative;
    z-index: 1;
  }
  .btn-nav {
    font-size: 0.75rem;
    padding: 0.5rem 0.85rem;
    min-height: 36px;
  }
}

@media (min-width: 1400px) {
  /* Nav type/gap stay at the 1200px size. Growing them in the same 1140px
     container made “Perguntas Frequentes” collide with the CTA pills. */
  /* .nav-panel { gap: var(--space-5) var(--space-6); } */
  /* .nav-links { gap: 1.25rem; } */
  /* .nav-link { font-size: 0.875rem; } */
  /* .btn-nav { font-size: 0.8125rem; padding: 0.55rem 1rem; } */
}

/* ------------------------------------------------------------
   17.1 GAMES STAGE — MOBILE
   On small screens show a single phone at the bottom of the section,
   bleeding downward. The next section (#metricas) sits on a
   higher stacking context so it visually "clips" the phone in half.
   ------------------------------------------------------------ */
@media (max-width: 899px) {
  /* Hero type: 2.1rem / 1.125rem felt large on a ~390px phone. Desktop tokens unchanged. */
  .hero h1 { font-size: clamp(1.75rem, 7vw, 2.1rem); }
  .hero-support { font-size: 1rem; }

  .hero-bg-slide {
    background-size: auto 100%;
    background-position: left center;
  }

  #experiencia { position: relative; z-index: 0; overflow: visible; }
  /* overflow: hidden (was overflow-x) so the pill field's vertical bleed
     (top/bottom -48px, see below) is clipped to the section and does not
     spill into neighbouring sections. */
  #conteudo { position: relative; z-index: 1; overflow: hidden; } /* paints over the bleed */

  /* Content pill background on mobile ------------------------------------
     The section is a single column here (copy + photo + cards stacked),
     so the desktop horizontal scrim (strong on the left, for "text left /
     photo right") left the whole left half looking empty. Use a uniform
     vertical veil instead so pills read evenly behind the full-width copy.
     Also soften the top/bottom mask so the field reaches nearer the edges. */
  /* Bleed pulled the field outside the section, so the section's
     overflow cut a row in half at the visible edge.
     Old:
     #conteudo .content-pills { top: -48px; bottom: -48px; }
     #conteudo .content-pills-scrim { top: -48px; bottom: -48px; }
  */
  #conteudo .content-pills {
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent);
  }
  #conteudo .content-pills-scrim {
    background: linear-gradient(
      180deg,
      rgba(0, 2, 48, calc(var(--scrim) * 0.96)) 0%,
      rgba(0, 2, 48, calc(var(--scrim) * 0.8)) 45%,
      rgba(0, 2, 48, calc(var(--scrim) * 0.88)) 100%
    );
  }
  /* #metricas now follows #experiencia, so it is the section that clips the phone. */
  #metricas { position: relative; z-index: 1; }
  #para-compliance { position: relative; z-index: 1; }

  /* Put the mockup at the bottom of the section (default .split-visual is order:-1) */
  #experiencia .split-visual { order: 2; margin-top: var(--space-4); }

  /* Admin laptop sits above the copy on small screens; flatten the 3D a bit. */
  #para-compliance .split-visual { margin-bottom: var(--space-4); }
  .admin-device-rig {
    transform: rotateX(2deg) rotateY(-4deg);
  }
  .admin-device-laptop { width: 92%; max-width: 100%; margin: 0 auto; }
  #para-compliance { overflow-x: hidden; }

  #experiencia .games-phone-mid,
  #experiencia .games-phone-front { display: none; } /* um celular só no mobile */
  #experiencia .hero-visual {
    min-height: 0;
    align-items: flex-start;
    overflow: visible;
  }
  #experiencia .games-phone-back {
    position: relative;
    left: auto;
    top: auto;
    transform: rotateX(4deg) rotateY(-8deg) scale(0.96);
  }
  /* Empurra a metade inferior para baixo do limite da seção */
  #experiencia .games-phone-back .hero-device-phone {
    margin-bottom: -330px;
  }
}

/* ------------------------------------------------------------
   17b. COOKIE CONSENT (GA4)
   ------------------------------------------------------------ */
/* .cookie-consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 1000;
  padding: var(--space-4) var(--space-4) var(--space-5);
  background: rgba(7, 38, 58, 0.96);
  border-top: 1px solid var(--surface-border);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35);
} */
.cookie-consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 1000;
  padding: var(--space-4) var(--space-4) var(--space-5);
  background: var(--color-teal-deep);
  border-top: 4px solid var(--color-teal);
  /* box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35); */
}
.cookie-consent-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.cookie-consent-text {
  margin: 0;
  flex: 1 1 16rem;
  max-width: 52rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-on-dark);
}
.cookie-consent-text a {
  color: var(--color-teal);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  flex-shrink: 0;
}
.cookie-consent-reject,
.cookie-consent-accept {
  min-height: 44px;
  white-space: nowrap;
}
.cookie-consent-reject {
  background: transparent;
  color: var(--color-teal);
  border-color: var(--color-teal);
}
.cookie-consent-reject:hover {
  background: rgba(106, 204, 185, 0.14);
  transform: none;
}
.cookie-consent-accept {
  background: var(--color-teal);
  color: var(--color-navy-deep);
  border-color: var(--color-teal);
}
.cookie-consent-accept:hover {
  background: var(--color-teal-bright);
  transform: none;
}

/* ------------------------------------------------------------
   18. REDUCED MOTION
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
  .thanks-quotes .faq-quote,
  .thanks-quotes .faq-quote:nth-child(n) { transform: none !important; }
  .hero-bg-slide--1 { opacity: 1; }
  .hero-bg-slide--2,
  .hero-bg-slide--3,
  .hero-bg-slide--4 { opacity: 0; }
}