/* LBR · LP /diagnostico v3 · tokens e base do design system LBR ("Pétalas", 2026) */
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-LightItalic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-MediumItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }

:root {
  --navy: #0A2E3F; --navy-700: #071F2B; --navy-100: #E3EDF3; --navy-soft: #6FA8C9;
  --orange: #FF7A00; --orange-700: #D96500;
  --orange-ink: #C25E00; /* laranja do destaque sobre fundo claro: 3,8:1 no areia, passa AA para texto grande */
  --sand: #F4F1EA; --sand-200: #EAE4D7;
  --gray: #D9D9D9; --gray-200: #E8E8E8; --gray-600: #666666; /* 5:1 no areia (o #6F6F6F da marca dava 4,45) */
  --oak: #51413E; --white: #FFFFFF;
  --ok: #2E7D5B; --warn: #8A5A00; --bad: #B3261E;
  --r-sm: 2px; --r-md: 4px; --r-app: 12px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --shadow-md: 0 4px 12px rgba(10, 46, 63, 0.08);
  --shadow-image: 0 24px 60px rgba(10, 46, 63, 0.20);
  --section-y: clamp(72px, 10vw, 140px);
  --gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
html:not(.motion-on) { scroll-behavior: smooth; }
body {
  margin: 0; font-family: "Poppins", system-ui, sans-serif; font-size: 16px; line-height: 1.55;
  color: var(--navy); background: var(--sand); -webkit-font-smoothing: antialiased; overflow-x: clip;
}
[hidden] { display: none !important; } /* .error, .link-alt e .hint têm display próprio; sem isto o hidden do main.js não esconde */
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.on-dark :focus-visible { outline-color: var(--white); }

.skip { position: absolute; left: -999px; top: 8px; background: var(--white); padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: 880px; }
.section { padding: var(--section-y) 0; }
.bg-sand { background: var(--sand); }
.bg-white { background: var(--white); }
.bg-navy { background: var(--navy); color: var(--white); }
.bg-ink { background: var(--navy-700); color: var(--white); }

/* Tipografia */
.eyebrow { font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-600); margin: 0 0 16px; }
.on-dark .eyebrow { color: var(--navy-soft); }
.h1 { font-weight: 300; font-size: clamp(36px, 6vw, 72px); line-height: 1.06; letter-spacing: -0.02em; margin: 0 0 24px; text-wrap: balance; }
.h2 { font-weight: 300; font-size: clamp(28px, 4vw, 52px); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 24px; text-wrap: balance; }
.h3 { font-weight: 400; font-size: clamp(20px, 2vw, 26px); line-height: 1.25; margin: 0 0 12px; }
.h1 em, .h2 em { font-style: italic; font-weight: 500; color: var(--orange-ink); }
.on-dark .h1 em, .on-dark .h2 em { color: var(--orange); }
.lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; color: var(--oak); margin: 0 0 32px; text-wrap: pretty; }
.p { color: var(--oak); margin: 0 0 16px; text-wrap: pretty; }
.on-dark .p, .on-dark .lead { color: rgba(255, 255, 255, 0.84); }
.microcopy { font-size: 13px; color: var(--gray-600); margin: 12px 0 0; }
.on-dark .microcopy { color: rgba(255, 255, 255, 0.7); }
.on-dark a { color: var(--white); }

/* Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 24px;
  font: 500 16px/1.2 "Poppins", system-ui, sans-serif; border-radius: var(--r-md); border: 0; cursor: pointer;
  text-decoration: none; transition: background-color 150ms var(--ease), transform 150ms var(--ease);
}
.btn--primary { background: var(--orange); color: var(--white); }
.btn--primary:hover, .btn--primary:active { background: var(--orange-700); }
.btn--secondary { background: transparent; color: var(--navy); border: 1px solid var(--navy); }
.btn--secondary:hover { background: var(--navy-100); }
.btn--sm { min-height: 40px; padding: 8px 16px; font-size: 15px; }
.btn--block { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  html:not(.motion-on) { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media (min-width: 768px) { :root { --gutter: 32px; } }