/* Identidade La Stratégique. Ordem de 17/10/2026 e VISUAL-MARCA. */
:root {
  --blue: #004AAD;
  --blue-lift: #5B95F2;
  --bone: #F4F2EE;
  --paper: #FFFFFF;
  --ink: #191919;
  --noir: #0B0B0B;
  --line-light: #E4E1DC;
  --line-dark: #DAD6D0;
  --dg-fraco: #5E5B57;
  --f-disp: 'Jost', 'Futura', 'Century Gothic', sans-serif;
  --f-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-hand: 'Gochi Hand', 'Bradley Hand', cursive;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --gut: clamp(20px, 5vw, 72px);
  --radius: .125rem;
  --t-fast: 140ms;
  --e-fast: cubic-bezier(.2, 0, .2, 1);
}

.ls-header, .ls-header *, .btn, .button { box-sizing: border-box; }
.ls-header { padding: var(--space-4) var(--gut); padding-top: calc(var(--space-4) + env(safe-area-inset-top, 0px)); color: var(--paper); background: var(--noir); border-bottom: 1px solid var(--line-dark); }
.ls-header-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); width: 100%; max-width: 90rem; margin: 0 auto; }
.ls-brand { display: inline-flex; flex-direction: column; gap: var(--space-1); flex: 1 1 100%; align-items: flex-start; justify-content: center; min-width: 0; min-height: 44px; color: var(--paper); text-decoration: none; }
.ls-brand:hover { color: var(--paper); }
.ls-wordmark { font-family: var(--f-disp); font-size: 1rem; font-weight: 400; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.ls-product { font-family: var(--f-hand); font-size: 1.0625rem; font-weight: 400; line-height: 1.2; color: var(--blue-lift); }
.ls-nav { display: flex; flex: 1 1 100%; gap: var(--space-5); align-items: center; order: 3; min-width: 0; width: 100%; overflow-x: auto; }
.ls-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--space-2) 0; border-bottom: 1px solid transparent; color: var(--paper); font-family: var(--f-disp); font-size: .71875rem; font-weight: 400; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: color var(--t-fast) var(--e-fast), border-color var(--t-fast) var(--e-fast); }
.ls-nav a:hover, .ls-nav a:focus-visible { color: var(--blue-lift); border-bottom-color: var(--blue-lift); }
.ls-nav a[aria-current='page'] { color: var(--paper); border-bottom: 2px solid var(--blue-lift); }
.ls-account { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); flex: 1 1 100%; min-width: 0; font-family: var(--f-body); }
.ls-account-details { display: grid; gap: var(--space-1); min-width: 0; flex: 1 1 auto; }
.ls-account-role { font-size: .6875rem; font-weight: 600; color: var(--paper); }
.ls-account-email { max-width: 16rem; color: var(--line-dark); font-size: .6875rem; line-height: 1.4; overflow-wrap: anywhere; }
.ls-account form { margin: 0; }
.ls-header :focus-visible { outline: 3px solid var(--blue-lift); outline-offset: 3px; }

.btn, .button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--space-3) var(--space-5); border: 1px solid var(--blue); border-radius: 0; color: var(--paper); background: var(--blue); font-family: var(--f-disp); font-size: .75rem; font-weight: 500; letter-spacing: .12em; line-height: 1.4; text-align: center; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background var(--t-fast) var(--e-fast), color var(--t-fast) var(--e-fast), border-color var(--t-fast) var(--e-fast); }
.btn:hover, .button:hover { border-color: var(--ink); color: var(--paper); background: var(--ink); }
.btn:focus-visible, .button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.btn--ghost, .button-quiet { border-color: var(--line-dark); color: var(--ink); background: transparent; }
.btn--ghost:hover, .button-quiet:hover { border-color: var(--ink); color: var(--ink); background: var(--bone); }
.ls-header .btn--ghost { border-color: var(--line-dark); color: var(--paper); background: transparent; }
.ls-header .btn--ghost:hover { border-color: var(--paper); color: var(--noir); background: var(--paper); }
.ls-header .btn--ghost:focus-visible { outline-color: var(--blue-lift); }
.button-wide { width: 100%; }
.ls-hand { font-family: var(--f-hand); font-weight: 400; color: var(--blue); }

@media (min-width: 768px) {
  .ls-brand { flex-basis: auto; }
  .ls-account { flex: 0 1 auto; max-width: 22rem; margin-left: auto; }
}
@media (min-width: 1280px) {
  .ls-header { position: sticky; top: 0; z-index: 20; }
  .ls-header-inner { flex-wrap: nowrap; }
  .ls-brand { flex: 0 0 auto; }
  .ls-nav { order: 0; flex: 1 1 auto; width: auto; gap: var(--space-4); }
  .ls-account { flex: 0 1 auto; flex-wrap: nowrap; margin-left: 0; max-width: 18rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ls-nav a, .btn, .button { transition: none; }
}