*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
p { margin: 0 0 var(--space-4); }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Títulos: Lexend. Bold no topo da escala, SemiBold nos menores. */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--text-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-semibold); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }

/* Escala como classes, independente do elemento */
.t-hero    { font: var(--fw-bold) var(--fs-hero)/var(--lh-tight) var(--font-display); letter-spacing: var(--ls-display); }
.t-display { font: var(--fw-bold) var(--fs-display)/var(--lh-tight) var(--font-display); letter-spacing: var(--ls-display); }
.t-h1      { font: var(--fw-bold) var(--fs-h1)/var(--lh-heading) var(--font-display); letter-spacing: var(--ls-heading); }
.t-h2      { font: var(--fw-semibold) var(--fs-h2)/var(--lh-heading) var(--font-display); letter-spacing: var(--ls-heading); }
.t-h3      { font: var(--fw-semibold) var(--fs-h3)/var(--lh-heading) var(--font-display); letter-spacing: var(--ls-heading); }
.h-section { font: var(--fw-semibold) var(--fs-display)/var(--lh-tight) var(--font-display); letter-spacing: var(--ls-display); }
.t-lead    { font-size: var(--fs-lead); line-height: 1.55; }
.t-body-sm { font-size: var(--fs-body-sm); }
.t-caption { font-size: var(--fs-caption); color: var(--text-secondary); }
.t-muted   { color: var(--text-secondary); }
.measure   { max-width: var(--measure-text); }

/* Links em texto corrido. Links com classe (botões, cards) não herdam isto. */
a:where(:not([class])) {
  color: var(--accent-text);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
a:where(:not([class])):hover { color: var(--accent-dark); border-bottom-color: var(--accent-dark); }

:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }

::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }

/* Layout */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }
.section { padding-block: var(--section-y); }
.section--tint { background: var(--wp-surface-tint); }
.section--gradient {
  --text-heading: var(--wp-white);
  --text-body: var(--wp-white);
  --text-secondary: rgba(255, 255, 255, 0.86);
  --accent: var(--wp-white);
  --on-accent: var(--wp-night);
  --border-default: rgba(255, 255, 255, 0.4);
  background: var(--wp-gradient);
  color: var(--wp-white);
}
.stack > * + * { margin-top: var(--stack, var(--space-4)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--space-3)); }
.grid { display: grid; gap: var(--gap, var(--space-5)); grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); }
@media (min-width: 768px)  { .grid--2, .grid--3, .grid--4 { --cols: 2; } }
@media (min-width: 1024px) { .grid--3 { --cols: 3; } .grid--4 { --cols: 4; } }

.icon { width: 1.25em; height: 1.25em; flex: none; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 100; padding: var(--space-3) var(--space-4); background: var(--wp-ink); color: var(--wp-white); border-radius: var(--radius-sm); }
.skip-link:focus { top: var(--space-4); }

/* Flutuação suave de formas 3D */
@keyframes flutua { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(0, -12px) rotate(3deg); } }

/* Movimento de entrada. O texto existe sempre no HTML; só esconde quando o JS marcou <html class="js">. */
.js [data-motion="reveal"] { opacity: 0; transform: translateY(20px); transition: opacity var(--duration-reveal) var(--ease-out), transform var(--duration-reveal) var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.js [data-motion="reveal"].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-motion="reveal"] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}