/* ==========================================================================
   Mr Duck Hub — Landing page
   CSS nativo, sem dependencias, sem fontes remotas.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --background: #070808;
  --background-deep: #030404;
  --background-soft: #0B0D0E;

  --surface: #111315;
  --surface-elevated: #171A1D;
  --surface-hover: #1D2023;

  --primary: #E6FF00;
  --primary-hover: #D7EF00;
  --primary-muted: #B7C900;
  --primary-glow: rgba(230, 255, 0, 0.22);
  --primary-glow-soft: rgba(230, 255, 0, 0.10);

  --foreground: #F5F4EF;
  --foreground-pure: #FFFFFF;
  --muted-foreground: #A7ABB0;
  --subtle-foreground: #73787E;

  --border: #2A2D30;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.14);
  --border-primary: rgba(230, 255, 0, 0.34);

  --success: #28C76F;
  --success-soft: rgba(40, 199, 111, 0.14);
  --warning: #FFB020;
  --danger: #FF5C5C;

  --light-background: #F5F4EF;
  --light-surface: #FFFFFF;
  --light-muted: #E8E6DF;
  --light-ink: #111315;

  --black: #000000;
  --white: #FFFFFF;

  /* tipografia fluida */
  --font-xs: clamp(0.8125rem, 0.78rem + 0.12vw, 0.875rem);
  --font-sm: clamp(0.875rem, 0.84rem + 0.15vw, 0.95rem);
  --font-base: clamp(1rem, 0.955rem + 0.23vw, 1.125rem);
  --font-lg: clamp(1.125rem, 1.03rem + 0.47vw, 1.375rem);
  --font-xl: clamp(1.35rem, 1.15rem + 1vw, 1.875rem);
  --font-h3: clamp(1.75rem, 1.4rem + 1.75vw, 2.75rem);
  --font-h2: clamp(2.25rem, 1.65rem + 3vw, 4rem);
  --font-h1: clamp(2.5rem, 1.48rem + 5.1vw, 5.25rem);

  /* espacamento fluido */
  --space-2xs: clamp(0.5rem, 0.45rem + 0.2vw, 0.625rem);
  --space-xs: clamp(0.75rem, 0.65rem + 0.35vw, 1rem);
  --space-sm: clamp(1rem, 0.8rem + 0.6vw, 1.375rem);
  --space-md: clamp(1.5rem, 1.1rem + 1vw, 2rem);
  --space-lg: clamp(2rem, 1.25rem + 2.2vw, 3.5rem);
  --space-xl: clamp(3rem, 1.8rem + 4vw, 5.5rem);
  --space-2xl: clamp(5rem, 3rem + 7vw, 9rem);
  --section-space: clamp(4.5rem, 3rem + 8vw, 10rem);
  --page-gutter: clamp(1.25rem, 0.65rem + 2.5vw, 4rem);

  /* apenas 3 radius e 3 sombras em todo o projeto */
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 24px;

  --shadow-card: 0 24px 70px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.04);
  --shadow-deep: 0 40px 90px rgba(0,0,0,0.55);
  --shadow-primary: 0 12px 34px rgba(230,255,0,0.13);

  --header-h: 74px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --font-body: "Manrope", "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Space Grotesk", "Sora", "Manrope", "Inter", "SF Pro Display",
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
@supports (overflow-x: clip) {
  html { overflow-x: clip; }
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: var(--font-base);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.028em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--font-h1); }
h2 { font-size: var(--font-h2); }
h3 { font-size: var(--font-h3); }
p { margin: 0; }

a { color: inherit; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--primary); color: var(--background); }

.container {
  width: min(100% - (2 * var(--page-gutter)), 1280px);
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: var(--section-space);
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 200;
  background: var(--primary);
  color: var(--background);
  font-weight: 700;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  transition: top 180ms var(--ease);
}
.skip-link:focus { top: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. Blocos de texto ---------- */
.eyebrow {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  font-size: var(--font-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--space-sm);
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-glow-soft);
}
.section-head { max-width: 60ch; margin-bottom: var(--space-lg); }
.lead {
  font-size: var(--font-lg);
  color: var(--muted-foreground);
  margin-top: var(--space-sm);
  max-width: 62ch;
  line-height: 1.6;
}
.is-light .lead { color: #4A4F55; }
.micro {
  font-size: var(--font-xs);
  color: var(--subtle-foreground);
  line-height: 1.55;
}
.is-light .micro { color: #6B7075; }

/* fundo claro para dar ritmo (secoes dor e calculadora) */
.is-light {
  background: var(--light-background);
  color: var(--light-ink);
}
.is-light .eyebrow { color: #8A9600; }
.is-light .eyebrow::before { background: #8A9600; box-shadow: 0 0 0 4px rgba(138,150,0,0.12); }
.is-deep { background: var(--background-deep); }
.is-soft { background: var(--background-soft); }

/* ---------- 4. Botoes ---------- */
.btn {
  --btn-h: 52px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--btn-h);
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--font-sm);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: transform 200ms var(--ease), background-color 200ms var(--ease),
              border-color 200ms var(--ease), color 200ms var(--ease);
}
.btn-primary {
  background: var(--primary);
  color: var(--background);
  box-shadow: var(--shadow-primary);
}
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: translateX(-40%);
  opacity: 0;
  transition: transform 700ms var(--ease), opacity 220ms linear;
}
.btn-secondary {
  background: transparent;
  border-color: var(--border-medium);
  color: var(--foreground);
}
.is-light .btn-secondary { border-color: rgba(17,19,21,0.18); color: var(--light-ink); }
.btn-ghost { background: transparent; color: var(--muted-foreground); padding: 0 12px; }
.btn-block { width: 100%; }

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--primary-hover); transform: translateY(-2px); }
  .btn-primary:hover::after { transform: translateX(320%); opacity: 1; }
  .btn-secondary:hover { background: var(--surface-elevated); border-color: var(--border-primary); }
  .is-light .btn-secondary:hover { background: var(--light-muted); }
  .btn-ghost:hover { color: var(--foreground); }
}
.btn:active { transform: translateY(0) scale(0.985); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.55; cursor: not-allowed; transform: none;
}
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }

@media (max-width: 767px) {
  .btn { --btn-h: 56px; width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
}

/* ---------- 5. Cards ---------- */
.card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)),
    var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-md);
  transition: transform 260ms var(--ease), border-color 260ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-4px); border-color: rgba(230,255,0,0.28); }
}
.card h3 { font-size: var(--font-lg); }
.card p { color: var(--muted-foreground); font-size: var(--font-sm); margin-top: 10px; }

.card-light {
  background: var(--light-surface);
  border: 1px solid rgba(17,19,21,0.08);
  box-shadow: 0 18px 44px rgba(17,19,21,0.07);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}

/* ---------- 6. Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 240ms var(--ease), border-color 240ms var(--ease);
}
.site-header.is-stuck {
  background: rgba(7, 8, 8, 0.94);
  border-bottom-color: rgba(255,255,255,0.08);
}
@supports ((backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px))) {
  .site-header.is-stuck {
    background: rgba(7, 8, 8, 0.82);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
}
.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: min(100% - (2 * var(--page-gutter)), 1280px);
  margin-inline: auto;
}
.brand {
  display: block;
  flex: none;
  width: 196px;
  border-radius: 8px;
  background: transparent;
  transition: filter 200ms var(--ease);
}
.brand img { width: 100%; height: auto; }
@media (hover: hover) and (pointer: fine) {
  .brand:hover { filter: brightness(1.12); }
}
.nav-desktop {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.nav-desktop a {
  padding: 10px 14px;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--muted-foreground);
  text-decoration: none;
  border-radius: 10px;
  transition: color 180ms var(--ease), background-color 180ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .nav-desktop a:hover { color: var(--foreground); background: rgba(255,255,255,0.05); }
}
.header-actions { display: flex; align-items: center; gap: 10px; }
.header-actions .btn { --btn-h: 44px; padding: 0 18px; width: auto; }

.menu-toggle {
  display: none;
  margin-left: auto;
  width: 48px; height: 48px;
  align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  color: var(--foreground);
  cursor: pointer;
}
.menu-toggle svg { width: 22px; height: 22px; }

.mobile-panel {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  z-index: 89;
  background: rgba(7,8,8,0.98);
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-sm) var(--page-gutter) var(--space-md);
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 220ms;
}
.mobile-panel[data-open="true"] { transform: translateY(0); opacity: 1; visibility: visible; }
.mobile-panel a.mobile-link {
  display: block;
  padding: 14px 4px;
  min-height: 48px;
  font-size: var(--font-base);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--border-subtle);
}
.mobile-panel .btn { margin-top: var(--space-sm); }

@media (max-width: 1023px) {
  .nav-desktop, .header-actions { display: none; }
  .menu-toggle { display: flex; }
  .brand { width: 146px; }
}

/* ---------- 7. Fundos decorativos ---------- */
.bg-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(230,255,0,0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(230,255,0,0.07) 1px, transparent 1px);
  background-size: 82px 82px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 78%);
  opacity: 0.85;
}
.bg-dots {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000, transparent 75%);
  opacity: 0.5;
}
.bg-glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(90px);
  background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
}
.vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 100% 80% at 50% 40%, transparent 42%, rgba(3,4,4,0.85) 100%);
}

/* ---------- 8. Hero ---------- */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + var(--space-lg));
  padding-bottom: var(--space-xl);
  overflow: hidden;
  background: var(--background);
}
.hero-inner { position: relative; z-index: 2; }
.hero-copy { max-width: 760px; }
.hero h1 { margin-bottom: var(--space-sm); }
.hero h1 .hl { color: var(--primary); }
.hero-subhead-seo {
  display: block;
  font-size: clamp(1rem, 0.85rem + 0.5vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--muted-foreground);
  margin-top: 10px;
  line-height: 1.35;
}
.hero-lead { font-size: var(--font-lg); color: var(--muted-foreground); max-width: 56ch; }
.hero-cta { margin-top: var(--space-md); }
.hero-micro { margin-top: var(--space-xs); }
.hero-bullets {
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  list-style: none; margin: var(--space-md) 0 0; padding: 0;
}
.hero-bullets li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--font-sm); font-weight: 600; color: var(--foreground);
}
.hero-bullets li::before {
  content: ""; width: 16px; height: 16px; flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--primary);
  background:
    linear-gradient(var(--primary), var(--primary)) center/6px 6px no-repeat content-box;
}
.hero-media { position: relative; }

/* cards flutuantes sobre a imagem */
.status-card {
  background: rgba(17,19,21,0.86);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-deep);
  width: max-content;
  max-width: 260px;
}
@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .status-card { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}
.status-card .label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--subtle-foreground);
}
.status-card .text {
  font-size: var(--font-sm); font-weight: 600; color: var(--foreground);
  margin-top: 4px; line-height: 1.35;
}
.status-pill {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 10px; padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
  background: var(--primary-glow-soft);
  color: var(--primary);
  border: 1px solid rgba(230,255,0,0.24);
}
.status-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.status-pill.is-success {
  background: var(--success-soft); color: var(--success);
  border-color: rgba(40,199,111,0.28);
}

/* indicador dinamico */
.dyn-status {
  display: flex;
  width: fit-content; align-items: center; gap: 10px;
  min-height: 42px;
  padding: 8px 18px 8px 14px;
  border-radius: 999px;
  background: rgba(17,19,21,0.9);
  border: 1px solid var(--border-medium);
  box-shadow: var(--shadow-card);
  font-size: var(--font-sm); font-weight: 600;
  margin-bottom: var(--space-sm);
}
.dyn-status .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
  box-shadow: 0 0 0 5px var(--primary-glow-soft);
  flex: none;
}
.dyn-status .dyn-text { transition: opacity 260ms var(--ease), transform 260ms var(--ease); }
.dyn-status.is-swapping .dyn-text { opacity: 0; transform: translateY(-6px); }

/* --- Hero desktop --- */
@media (min-width: 768px) {
  .hero { padding-bottom: var(--space-xl); }
  .hero-inner {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
    gap: var(--space-md);
    min-height: min(900px, 94svh);
  }
  .hero-copy { grid-column: 1 / span 6; }
  .hero-media { grid-column: 7 / span 6; }
}
@media (min-width: 1024px) {
  .hero-copy { grid-column: 1 / span 6; }
  .hero-media {
    grid-column: 7 / span 6;
    width: 106%;                 /* transborda discretamente o grid */
    margin-right: -6%;
  }
}
@media (min-width: 768px) {
  .hero-media picture, .hero-media img {
    width: 100%;
    aspect-ratio: 1672 / 941;
    object-fit: contain;
    object-position: center right;
  }
  .hero-media img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 100%);
  }
  .hero-card-1 { position: absolute; left: 2%; top: 16%; }
  .hero-card-2 { position: absolute; right: 4%; bottom: 12%; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-inner { min-height: 0; }
  .hero-copy { grid-column: 1 / span 12; }
  .hero-media { grid-column: 1 / span 12; margin-top: var(--space-md); }
  .hero-card-1 { left: 3%; top: 8%; }
  .hero-card-2 { right: 3%; bottom: 6%; }
}

/* --- Hero mobile: composicao propria --- */
@media (max-width: 767px) {
  .hero { padding-top: calc(var(--header-h) + var(--space-md)); }
  .hero-lead { font-size: var(--font-base); }
  .hero-cta .btn + .btn { margin-top: 10px; }
  .hero-media {
    margin-top: var(--space-md);
    margin-inline: calc(var(--page-gutter) * -0.75);
  }
  .hero-media img {
    width: 100%;
    aspect-ratio: 1122 / 1402;
    object-fit: contain;
    object-position: center top;
    -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 99%);
    mask-image: linear-gradient(180deg, #000 74%, transparent 99%);
  }
  .hero-card-1 {
    position: absolute; left: var(--page-gutter); bottom: 10%;
    max-width: calc(100% - (2 * var(--page-gutter)));
  }
  .hero-card-2 { display: none; }
}
.hero-glow-a { width: 60%; height: 60%; right: -6%; top: 4%; }
.hero-glow-b {
  width: 40%; height: 40%; left: 10%; bottom: -10%;
  background: radial-gradient(circle, rgba(230,255,0,0.08) 0%, transparent 70%);
}

/* glow do cursor (apenas desktop com mouse) */
.pointer-glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: 0;
  transition: opacity 400ms linear;
  background: radial-gradient(
    420px circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
    rgba(230,255,0,0.16), transparent 68%);
}
@media (hover: hover) and (pointer: fine) {
  .has-pointer-glow:hover .pointer-glow { opacity: 1; }
}

/* ---------- 9. Confianca ---------- */
.pillars {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: var(--space-lg);
}
.pillar-num {
  font-family: var(--font-display);
  font-size: var(--font-xl);
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.03em;
}

/* ---------- 10. Dor / Shift cards ---------- */
.pain-grid { display: grid; gap: var(--space-lg); }
@media (min-width: 1024px) {
  .pain-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); align-items: center; }
}
.pain-figure {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 10px;
  background: linear-gradient(180deg, rgba(17,19,21,0.06), rgba(17,19,21,0.02));
  border: 1px solid rgba(230,255,0,0.16);
  box-shadow: 0 30px 70px rgba(17,19,21,0.14);
}
.pain-figure::before {
  content: "";
  position: absolute; inset: -14% 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230,255,0,0.16), transparent 66%);
  filter: blur(46px);
  z-index: 0;
}
.pain-figure img {
  position: relative; z-index: 1;
  width: 100%;
  border-radius: var(--radius-md);
  object-fit: cover;
}
@media (min-width: 768px) { .pain-figure img { aspect-ratio: 1536 / 1024; } }
@media (max-width: 767px) {
  .pain-figure { padding: 6px; border-radius: var(--radius-md); }
  .pain-figure img { aspect-ratio: 1122 / 1402; border-radius: 18px; }
}

.shift-list { display: grid; gap: var(--space-xs); }
.shift-card {
  position: relative;
  background: var(--light-surface);
  border: 1px solid rgba(17,19,21,0.10);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  box-shadow: 0 14px 34px rgba(17,19,21,0.06);
  transition: transform 260ms var(--ease), border-color 260ms var(--ease),
              box-shadow 260ms var(--ease);
}
.shift-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.shift-label {
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: #6B7075;
}
.shift-msg {
  font-size: var(--font-base); font-weight: 600;
  color: var(--light-ink); margin-top: 8px;
}
.shift-status {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--font-xs); font-weight: 700; color: #C0392B;
  margin-top: 10px;
}
.shift-status::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--danger); flex: none;
}
.shift-consequence {
  font-size: var(--font-sm); color: #4A4F55;
  border-top: 1px dashed rgba(17,19,21,0.14);
  margin-top: var(--space-xs); padding-top: var(--space-xs);
}
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .shift-card .shift-inner { transition: transform 300ms var(--ease); }
  .shift-card .shift-consequence {
    max-height: 0; opacity: 0; overflow: hidden;
    margin-top: 0; padding-top: 0; border-top-color: transparent;
    transition: max-height 320ms var(--ease), opacity 240ms var(--ease),
                margin-top 320ms var(--ease), padding-top 320ms var(--ease);
  }
  .shift-card:hover, .shift-card:focus-within {
    border-color: var(--border-primary);
    box-shadow: 0 22px 46px rgba(17,19,21,0.10);
  }
  .shift-card:hover .shift-inner,
  .shift-card:focus-within .shift-inner { transform: translateY(-4px); }
  .shift-card:hover .shift-consequence,
  .shift-card:focus-within .shift-consequence {
    max-height: 140px; opacity: 1;
    margin-top: var(--space-xs); padding-top: var(--space-xs);
    border-top-color: rgba(17,19,21,0.14);
  }
}

/* ---------- 11. Jornada / etapas ---------- */
.journey { position: relative; margin-top: var(--space-lg); }
.journey-track {
  position: absolute;
  background: rgba(255,255,255,0.10);
  overflow: hidden;
  border-radius: 999px;
}
.journey-track::after {
  content: "";
  position: absolute; inset: 0 auto 0 0;
  background: var(--primary);
  box-shadow: 0 0 16px var(--primary-glow);
  transition: width 700ms var(--ease), height 700ms var(--ease);
}
.steps { display: grid; gap: var(--space-sm); list-style: none; margin: 0; padding: 0; }
.step { position: relative; }
.step-dot {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-elevated);
  border: 1px solid var(--border-medium);
  font-family: var(--font-display);
  font-size: var(--font-sm); font-weight: 700;
  color: var(--muted-foreground);
  transition: background-color 320ms var(--ease), color 320ms var(--ease),
              border-color 320ms var(--ease), box-shadow 320ms var(--ease);
}
.step.is-active .step-dot {
  background: var(--primary); color: var(--background);
  border-color: var(--primary);
  box-shadow: 0 0 0 6px var(--primary-glow-soft);
}
.step h3 { font-size: var(--font-lg); margin-top: var(--space-xs); }
.step p { color: var(--muted-foreground); font-size: var(--font-sm); margin-top: 8px; }

@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(5, 1fr); gap: var(--space-md); }
  .journey-track { left: 17px; right: 17px; top: 16px; height: 2px; }
  .journey-track::after { width: var(--journey-progress, 0%); }
}
@media (max-width: 1023px) {
  .steps { padding-left: 46px; }
  .step { padding-bottom: var(--space-xs); }
  .step-dot { position: absolute; left: -46px; top: 0; }
  .step h3 { margin-top: 0; }
  .journey-track { left: 16px; top: 8px; bottom: 8px; width: 2px; }
  .journey-track::after { width: 100%; height: var(--journey-progress, 0%); inset: 0 0 auto 0; }
}

/* ---------- 12. ProductWindow (capturas reais) ---------- */
.pw {
  position: relative;
  background: var(--surface);
  border: 1px solid rgba(245,244,239,0.10);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-deep);
  overflow: hidden;
  transition: transform 300ms var(--ease), border-color 300ms var(--ease);
}
.pw::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(230,255,0,0.5), transparent);
  z-index: 3;
}
.pw-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(245,244,239,0.08);
}
.pw-bar i {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(245,244,239,0.16);
}
.pw-bar i:first-child { background: rgba(230,255,0,0.42); }
.pw-bar span {
  margin-left: 8px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--subtle-foreground);
}
.pw-body { position: relative; background: var(--surface); }
.pw-body img { width: 100%; height: auto; display: block; }
@media (hover: hover) and (pointer: fine) {
  .pw:hover { transform: translateY(-4px) scale(1.01); border-color: rgba(230,255,0,0.24); }
}
.pw-halo {
  position: absolute; inset: -10% 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230,255,0,0.12), transparent 65%);
  filter: blur(56px);
  pointer-events: none;
  z-index: -1;
}
.pw-wrap { position: relative; }

/* dashboard muito horizontal: rolagem interna autorizada no mobile */
.pw-scroll { overflow: hidden; }
@media (max-width: 900px) {
  .pw-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .pw-scroll img { min-width: 720px; width: 720px; max-width: none; }
}
.scroll-hint {
  display: none;
  align-items: center; gap: 8px;
  margin-top: 10px;
  font-size: var(--font-xs); font-weight: 600;
  color: var(--subtle-foreground);
}
@media (max-width: 900px) { .scroll-hint { display: flex; } }

/* blocos alternados texto/imagem */
.split { display: grid; gap: var(--space-lg); align-items: center; }
.split.is-top { align-items: start; }
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); }
  .split.is-reverse > .split-media { order: -1; }
  .split.is-wide-media { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.2fr); }
}
.feature-list { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: grid; gap: 12px; }
.feature-list li {
  position: relative; padding-left: 30px;
  font-size: var(--font-sm); color: var(--foreground);
}
.feature-list li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--primary-glow-soft);
  border: 1px solid rgba(230,255,0,0.3);
}
.feature-list li::after {
  content: ""; position: absolute; left: 6px; top: 11px;
  width: 5px; height: 8px;
  border: solid var(--primary); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ---------- 13. Caixa de entrada (representacao HTML) ---------- */
.demo-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--subtle-foreground);
  border: 1px dashed var(--border-medium);
  border-radius: 999px; padding: 6px 12px;
  margin-bottom: var(--space-xs);
}
.inbox {
  display: grid; gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}
@media (min-width: 900px) { .inbox { grid-template-columns: 0.85fr 1.4fr 0.9fr; } }
.inbox-col { background: var(--surface); padding: var(--space-sm); }
.inbox-col .inbox-label {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--subtle-foreground); margin-bottom: var(--space-xs);
  font-family: var(--font-body); font-weight: 800;
}
.inbox-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px; border-radius: 12px;
}
.inbox-item + .inbox-item { margin-top: 4px; }
.inbox-item.is-active { background: rgba(230,255,0,0.06); border: 1px solid rgba(230,255,0,0.18); }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--surface-hover);
  font-size: 12px; font-weight: 800; color: var(--muted-foreground);
}
.inbox-item .nm { font-size: var(--font-sm); font-weight: 700; }
.inbox-item .sub { font-size: var(--font-xs); color: var(--subtle-foreground); }
.bubble {
  max-width: 84%; padding: 10px 13px; border-radius: 14px;
  font-size: var(--font-sm); line-height: 1.45;
}
.bubble.is-in { background: var(--surface-hover); border-top-left-radius: 5px; }
.bubble.is-out {
  background: rgba(230,255,0,0.10); border: 1px solid rgba(230,255,0,0.20);
  border-top-right-radius: 5px; margin-left: auto;
}
.bubble + .bubble { margin-top: 8px; }
.meta-row {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: var(--font-xs); color: var(--subtle-foreground);
  padding: 8px 0; border-bottom: 1px solid var(--border-subtle);
}
.meta-row strong { color: var(--foreground); font-weight: 700; }

/* ---------- 14. Timeline follow-up ---------- */
.timeline { list-style: none; margin: var(--space-md) 0 0; padding: 0 0 0 30px; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px;
  width: 2px; background: rgba(255,255,255,0.10);
}
.timeline > li { position: relative; padding-bottom: var(--space-sm); }
.timeline > li::before {
  content: ""; position: absolute; left: -30px; top: 7px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface-elevated);
  border: 2px solid var(--border-medium);
}
.timeline > li.is-done { color: var(--subtle-foreground); }
.timeline > li.is-done::before { border-color: rgba(255,255,255,0.2); }
.timeline > li.is-next::before { border-color: var(--primary); background: var(--primary); }
.timeline > li.is-reply::before { border-color: var(--success); background: var(--success); }
.timeline .t-title { font-weight: 700; font-size: var(--font-sm); }
.timeline .t-note { font-size: var(--font-xs); color: var(--subtle-foreground); }
.timeline > li.is-next .t-title { color: var(--primary); }
.timeline > li.is-reply .t-title { color: var(--success); }
.closing-line {
  margin-top: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--font-xl);
  letter-spacing: -0.02em;
}

/* ---------- 15. IA e humano ---------- */
.duo { display: grid; gap: var(--space-sm); margin-top: var(--space-lg); }
@media (min-width: 768px) { .duo { grid-template-columns: 1fr 1fr; } }
.handoff {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: var(--space-md);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: var(--surface);
  width: fit-content;
  max-width: 100%;
}
.handoff .from { color: var(--muted-foreground); font-size: var(--font-sm); font-weight: 600; }
.handoff .arrow { color: var(--primary); }
.handoff .to { color: var(--success); font-size: var(--font-sm); font-weight: 700; }

/* ---------- 16. Tabs por funcao ---------- */
.tabs-list {
  display: flex; gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 6px;
  margin-bottom: var(--space-md);
  scrollbar-width: none;
}
.tabs-list::-webkit-scrollbar { display: none; }
.tab {
  flex: none;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--surface);
  color: var(--muted-foreground);
  font-family: var(--font-body);
  font-size: var(--font-sm); font-weight: 700;
  cursor: pointer;
  transition: background-color 200ms var(--ease), color 200ms var(--ease),
              border-color 200ms var(--ease);
}
.tab[aria-selected="true"] {
  background: var(--primary); color: var(--background); border-color: var(--primary);
}
.tab-panel { animation: tab-in 380ms var(--ease) both; }
.tab-panel[hidden] { display: none; }
.tab-panel[data-dir="right"] { --tab-from: 26px; }
.tab-panel[data-dir="left"] { --tab-from: -26px; }
@keyframes tab-in {
  from { opacity: 0; transform: translateX(var(--tab-from, 20px)); }
  to { opacity: 1; transform: translateX(0); }
}
.role-grid { display: grid; gap: var(--space-sm); }
@media (min-width: 768px) { .role-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } }

/* ---------- 17. Calculadora ---------- */
.calc { display: grid; gap: var(--space-lg); }
@media (min-width: 1024px) { .calc { grid-template-columns: 1fr 1fr; align-items: start; } }
.field { display: grid; gap: 8px; margin-bottom: var(--space-sm); }
.field label { font-size: var(--font-sm); font-weight: 700; color: var(--light-ink); }
.field input {
  min-height: 52px;
  padding: 0 16px;
  font-family: var(--font-body);
  font-size: var(--font-base);
  color: var(--light-ink);
  background: var(--light-surface);
  border: 1px solid rgba(17,19,21,0.16);
  border-radius: var(--radius-sm);
  width: 100%;
}
.field input:focus { border-color: #8A9600; }
.field .hint { font-size: var(--font-xs); color: #6B7075; }
.calc-result {
  background: var(--light-ink);
  color: var(--foreground);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: 0 30px 70px rgba(17,19,21,0.18);
}
.calc-value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.25rem);
  font-weight: 700; letter-spacing: -0.035em;
  color: var(--primary);
  line-height: 1.05;
  margin: 6px 0;
}
.calc-op { font-size: var(--font-sm); color: var(--muted-foreground); }
.calc-disclaimer {
  margin-top: var(--space-sm); padding-top: var(--space-sm);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--font-xs); color: var(--muted-foreground);
}

.sim-figure { position: relative; margin-top: var(--space-lg); }
.sim-figure::before {
  content: ""; position: absolute; inset: -6% 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230,255,0,0.20), transparent 62%);
  filter: blur(60px);
}
.sim-figure img {
  position: relative;
  width: 100%; max-width: 1200px; margin-inline: auto;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(17,19,21,0.10);
  box-shadow: 0 30px 70px rgba(17,19,21,0.16);
}
.sim-note {
  position: relative;
  max-width: 68ch; margin: var(--space-sm) auto 0;
  text-align: center;
}
.sim-steps { display: grid; gap: 10px; margin-top: var(--space-md); }
.sim-step {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--light-surface);
  border: 1px solid rgba(17,19,21,0.10);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.sim-step .v {
  font-family: var(--font-display);
  font-size: var(--font-xl); font-weight: 700;
  letter-spacing: -0.03em; color: var(--light-ink);
}
.sim-step .k { font-size: var(--font-xs); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: #6B7075; text-align: right; }
.sim-step.is-final { background: var(--light-ink); border-color: var(--light-ink); }
.sim-step.is-final .v { color: var(--primary); }
.sim-step.is-final .k { color: var(--muted-foreground); }
.sim-arrow { text-align: center; color: #A9A69B; font-size: 13px; line-height: 1; }
.sim-formula {
  margin-top: var(--space-sm);
  font-size: var(--font-sm); font-weight: 700;
  text-align: center; color: var(--light-ink);
}
@media (min-width: 768px) { .sim-mobile-only { display: none; } }
@media (max-width: 767px) { .sim-desktop-only { display: none; } }

/* ---------- 18. Plano ---------- */
.pricing { display: grid; gap: var(--space-lg); align-items: start; }
@media (min-width: 1024px) { .pricing { grid-template-columns: 1fr 1.05fr; } }
.price-card {
  background: linear-gradient(180deg, rgba(230,255,0,0.06), rgba(255,255,255,0.012)), var(--surface);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow-card);
}
.price-value {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 3.5rem);
  font-weight: 700; letter-spacing: -0.04em;
  line-height: 1; margin: var(--space-xs) 0;
}
.price-value small {
  font-size: var(--font-base); font-weight: 600;
  color: var(--muted-foreground); letter-spacing: 0;
}
.terms {
  list-style: none; margin: var(--space-md) 0 0; padding: var(--space-sm) 0 0;
  border-top: 1px solid var(--border-subtle);
  display: grid; gap: 8px;
  font-size: var(--font-xs); color: var(--muted-foreground);
}
.terms li { position: relative; padding-left: 16px; }
.terms li::before { content: "—"; position: absolute; left: 0; color: var(--subtle-foreground); }

/* ---------- 19. FAQ ---------- */
.faq { display: grid; gap: 10px; margin-top: var(--space-lg); }
.faq-item {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}
.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px;
  padding: 16px var(--space-sm);
  background: none; border: 0;
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: var(--font-base); font-weight: 700;
  text-align: left; cursor: pointer;
}
.faq-q .chev {
  flex: none; width: 20px; height: 20px;
  transition: transform 260ms var(--ease);
  color: var(--primary);
}
.faq-q[aria-expanded="true"] .chev { transform: rotate(180deg); }
.faq-a { padding: 0 var(--space-sm) var(--space-sm); color: var(--muted-foreground); font-size: var(--font-sm); }
.faq-a[hidden] { display: none; }

/* ---------- 20. CTA final ---------- */
.final-cta {
  position: relative;
  background: var(--background-deep);
  overflow: hidden;
}
.final-grid { position: relative; z-index: 2; display: grid; gap: var(--space-lg); align-items: center; }
@media (min-width: 1024px) {
  .final-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr); }
}
.final-duck { justify-self: center; }
.final-duck img { width: 100%; height: auto; }
@media (min-width: 1024px) { .final-duck { width: 100%; max-width: 460px; } }
@media (max-width: 1023px) {
  .final-duck { max-width: 300px; margin-top: var(--space-sm); }
}
.trust-line {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px;
  margin: var(--space-md) 0 0; padding: 0;
  font-size: var(--font-xs); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--subtle-foreground);
}
.trust-line li { display: inline-flex; align-items: center; gap: 8px; }
.trust-line li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--primary);
}
.final-glow { width: 70%; height: 80%; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.final-curve {
  position: absolute; inset: auto 0 12% 0; height: 240px;
  pointer-events: none; opacity: 0.5;
}

/* ---------- 21. Footer ---------- */
.site-footer {
  background: var(--background-deep);
  border-top: 1px solid var(--border-subtle);
  padding-block: var(--space-xl) var(--space-lg);
}
.footer-grid { display: grid; gap: var(--space-lg); }
@media (min-width: 640px) and (max-width: 1023px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 1.3fr 0.9fr 0.9fr 1.2fr; }
}
.footer-brand { width: 190px; }
.site-footer .footer-h {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  line-height: 1.4;
  color: var(--subtle-foreground); margin: 0 0 var(--space-xs);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer a { font-size: var(--font-sm); color: var(--muted-foreground); text-decoration: none; }
.footer-contact li { display: flex; flex-direction: column; gap: 2px; }
.footer-contact li span.micro { font-size: var(--font-xs); color: var(--muted-foreground); }
@media (hover: hover) and (pointer: fine) { .site-footer a:hover { color: var(--foreground); } }
.footer-bottom {
  margin-top: var(--space-lg); padding-top: var(--space-sm);
  border-top: 1px solid var(--border-subtle);
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  font-size: var(--font-xs); color: var(--subtle-foreground);
}

/* ---------- 22. CTA fixa mobile ---------- */
.sticky-cta {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 80;
  display: none;
  padding: 10px var(--page-gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(7,8,8,0.94);
  border-top: 1px solid var(--border-subtle);
  transform: translateY(0);
  transition: transform 300ms var(--ease), opacity 300ms var(--ease);
}
@supports ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
  .sticky-cta { background: rgba(7,8,8,0.78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
}
.sticky-cta .btn { --btn-h: 56px; }
.sticky-cta[data-hidden="true"] { transform: translateY(120%); opacity: 0; pointer-events: none; }
@media (max-width: 767px) {
  .sticky-cta { display: block; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- 23. Dialogs ---------- */
dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: min(86svh, 860px);
  padding: 0;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--foreground);
  box-shadow: var(--shadow-deep);
  overflow: auto;
  overscroll-behavior: contain;
}
dialog::backdrop { background: rgba(3,4,4,0.72); }
@supports ((backdrop-filter: blur(6px))) {
  dialog::backdrop { backdrop-filter: blur(6px); }
}
dialog[open] { animation: dlg-in 260ms var(--ease) both; }
dialog[open]::backdrop { animation: fade-in 260ms linear both; }
@keyframes dlg-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.dialog-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: var(--space-md) var(--space-md) var(--space-xs);
  background: var(--surface);
  border-bottom: 1px solid var(--border-subtle);
}
.dialog-head h2 { font-size: var(--font-xl); }
.dialog-close {
  flex: none; width: 44px; height: 44px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-subtle);
  border-radius: 12px; color: var(--foreground); cursor: pointer;
}
.dialog-body { padding: var(--space-md); }
.form-field { display: grid; gap: 7px; margin-bottom: var(--space-sm); }
.form-field label { font-size: var(--font-sm); font-weight: 700; }
.form-field input, .form-field select {
  min-height: 52px; padding: 0 14px;
  font-family: var(--font-body); font-size: var(--font-base);
  color: var(--foreground);
  background: var(--background-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  width: 100%;
}
.form-field select { appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted-foreground) 50%),
                    linear-gradient(135deg, var(--muted-foreground) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.form-field .err { font-size: var(--font-xs); color: var(--danger); min-height: 0; }
.form-field.has-error input, .form-field.has-error select { border-color: var(--danger); }
.check-row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: var(--space-sm); }
.check-row input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--primary); }
.check-row label { font-size: var(--font-sm); color: var(--muted-foreground); }
.form-status { font-size: var(--font-sm); margin-top: var(--space-xs); min-height: 0; }
.form-status.is-ok { color: var(--success); }
.form-status.is-err { color: var(--danger); }
.btn.is-loading { pointer-events: none; opacity: 0.75; }

.chat-demo { display: grid; gap: 8px; }
.chat-demo .who {
  font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--subtle-foreground); margin-top: var(--space-xs);
}

/* ---------- 24. Reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); }
.js .reveal {
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible, .no-js .reveal { opacity: 1; transform: translateY(0); }

.hero-reveal { opacity: 1; }
.js .hero-reveal {
  opacity: 0;
  transform: translateY(22px) scale(0.985);
  clip-path: inset(14% 0 0 0 round 28px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease), clip-path 900ms var(--ease);
}
.js .hero-reveal.is-visible {
  opacity: 1; transform: translateY(0) scale(1); clip-path: inset(0 0 0 0 round 28px);
}
@media (max-width: 767px) {
  .js .hero-reveal { clip-path: none; transform: translateY(12px); }
  .js .hero-reveal.is-visible { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal, .js .reveal, .hero-reveal, .js .hero-reveal {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
  .pointer-glow { display: none; }
}

/* ---------- 25. Core Web Vitals & Render Performance ---------- */
@media (min-width: 768px) {
  #calculadora, #faq, .final-cta, .site-footer {
    content-visibility: auto;
    contain-intrinsic-size: 700px;
  }
}