/* ==========================================================================
   Wissence — Design tokens
   Paleta e tipografia extraídas do manual "Rebranding Wissence 2.0".
   Display: IvyMode (licença paga). Substituto livre em uso: Playfair Display.
   Para trocar, basta redefinir --font-display e remover o link do Google Fonts.
   ========================================================================== */

:root {
  /* --- Cor: neutros quentes --- */
  --cream:        #F2EBE1;
  --cream-deep:   #E9E0D3;
  --sand:         #E5D2B8;
  --white:        #FFFFFF;

  /* --- Cor: marrons da marca --- */
  --brown:        #382A21;  /* texto e superfícies escuras */
  --brown-char:   #38302A;
  --brown-mid:    #7C5D48;  /* acento e CTA */
  --brown-deep:   #492912;
  --brown-soft:   #6B5749;  /* texto secundário sobre creme */

  /* --- Cor: apoio --- */
  --olive:        #B3B792;
  --olive-dark:   #2E3529;
  --petrol:       #173A4D;  /* Grupo Wissen */
  --whats:        #25D366;

  /* --- Papéis semânticos --- */
  --bg:           var(--cream);
  --bg-alt:       var(--cream-deep);
  --surface:      var(--white);
  --ink:          var(--brown);
  --ink-soft:     var(--brown-soft);
  --accent:       var(--brown-mid);
  --accent-hover: var(--brown-deep);
  --line:         rgba(56, 42, 33, .14);
  --line-soft:    rgba(56, 42, 33, .08);
  --shadow-sm:    0 1px 2px rgba(56, 42, 33, .05), 0 4px 16px rgba(56, 42, 33, .05);
  --shadow-md:    0 2px 4px rgba(56, 42, 33, .05), 0 18px 46px rgba(56, 42, 33, .10);

  /* --- Tipografia --- */
  --font-display: "Playfair Display", "IvyMode", Georgia, "Times New Roman", serif;
  --font-body:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-hero:   clamp(2.75rem, 1.4rem + 5.6vw, 5.25rem);
  --fs-h2:     clamp(2rem, 1.25rem + 3vw, 3.5rem);
  --fs-h3:     clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
  --fs-lead:   clamp(1.05rem, .98rem + .4vw, 1.3rem);
  --fs-body:   1.0625rem;
  --fs-small:  .9375rem;
  --fs-eyebrow: .78rem;

  /* --- Escala de espaçamento ---
     Um único conjunto para o ritmo ENTRE blocos. Tudo aqui é fluido: se o
     padding da seção encolhe no celular e o separador interno fica fixo em
     rem, a proporção entre eles quebra. Medidas internas de componente
     (padding de botão, gap de ícone) continuam fixas de propósito. */
  --space-sm:  clamp(1.25rem, 1rem + .8vw, 1.75rem);
  --space-md:  clamp(1.75rem, 1.35rem + 1.1vw, 2.5rem);
  --space-lg:  clamp(2.5rem, 1.9rem + 2.2vw, 4rem);
  --space-xl:  clamp(3.5rem, 2rem + 5vw, 6.5rem);

  /* --- Ritmo e forma --- */
  --gutter:    clamp(1.25rem, .6rem + 2.6vw, 3rem);
  --maxw:      1240px;
  --maxw-text: 62ch;
  --section-y: clamp(4.5rem, 2.5rem + 7vw, 9rem);
  --radius:    16px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --ease:      cubic-bezier(.22, .68, .28, 1);
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p  { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a  { color: inherit; text-decoration: none; }

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

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }
li + li { margin-top: .4em; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--sand); color: var(--brown); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Acessibilidade — link de pular navegação */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--brown);
  color: var(--cream);
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

.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;
}