/* Bora Lab — estilos do site */

/* Bora Lab — Font Faces
   Muro: brand display font (logo wordmark + display headlines)
   Montserrat: all UI, body, and supporting text */

@font-face {
  font-family: 'Muro';
  src: url('../fonts/muro.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Muro';
  src: url('../fonts/muro-slant.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-bolditalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-extrabold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}


/* tokens/colors.css */
/* Bora Lab — Color Tokens
   Base scale: purple (primary) + neutral (supporting)
   Purple hue: 286° — a true, saturated indigo-violet
   Neutrals carry a faint purple cast for visual cohesion */

:root {
  /* ── Purple Scale (Brand Primary) ── */
  --purple-50:  oklch(97%  0.025 286);
  --purple-100: oklch(93%  0.055 286);
  --purple-200: oklch(86%  0.10  286);
  --purple-300: oklch(76%  0.16  286);
  --purple-400: oklch(64%  0.22  286);
  --purple-500: oklch(53%  0.26  286);
  --purple-600: oklch(42%  0.27  286);   /* ← PRIMARY BRAND */
  --purple-700: oklch(34%  0.25  286);
  --purple-800: oklch(26%  0.22  286);
  --purple-900: oklch(19%  0.18  286);
  --purple-950: oklch(12%  0.14  286);

  /* ── Soft Gray Scale (Cool Contrast) ──
     A soft, purple-cast gray counterweight to the brand purple —
     use for calm neutral surfaces and contrast blocks. Retuned
     from the original warm beige to sit harmoniously with the purple.
     (Token names kept as --beige-* for backwards compatibility.) */
  --beige-50:  oklch(97%  0.006 286);
  --beige-100: oklch(94.5% 0.008 286);
  --beige-200: oklch(90%  0.010 286);
  --beige-300: oklch(84%  0.012 286);
  --beige-400: oklch(76%  0.014 286);
  --beige-500: oklch(68%  0.015 286);
  --beige-600: oklch(58%  0.016 286);
  --beige-700: oklch(47%  0.016 286);
  --beige-800: oklch(36%  0.014 286);
  --beige-900: oklch(26%  0.012 286);
  --beige-950: oklch(18%  0.010 286);

  /* ── Neutral Scale (Purple-cast) ── */
  --neutral-50:  oklch(98%  0.01  286);
  --neutral-100: oklch(95%  0.015 286);
  --neutral-200: oklch(90%  0.02  286);
  --neutral-300: oklch(82%  0.025 286);
  --neutral-400: oklch(70%  0.025 286);
  --neutral-500: oklch(58%  0.025 286);
  --neutral-600: oklch(46%  0.025 286);
  --neutral-700: oklch(35%  0.025 286);
  --neutral-800: oklch(25%  0.025 286);
  --neutral-900: oklch(16%  0.020 286);
  --neutral-950: oklch(10%  0.015 286);

  /* ── Pure ── */
  --white: #ffffff;
  --black: #000000;

  /* ── Semantic Aliases ── */
  /* Brand */
  --color-brand:       var(--purple-600);
  --color-brand-dark:  var(--purple-800);
  --color-brand-light: var(--purple-400);
  --color-brand-pale:  var(--purple-100);
  --color-brand-dim:   var(--purple-50);
  /* Warm contrast */
  --color-warm:        var(--beige-300);
  --color-warm-deep:   var(--beige-600);
  --color-warm-pale:   var(--beige-100);

  /* Text */
  --text-primary:   var(--neutral-950);
  --text-secondary: var(--neutral-600);
  --text-tertiary:  var(--neutral-400);
  --text-disabled:  var(--neutral-300);
  --text-inverse:   var(--white);
  --text-brand:     var(--purple-600);

  /* Surfaces */
  --surface-base:       var(--white);
  --surface-subtle:     var(--neutral-50);
  --surface-muted:      var(--neutral-100);
  --surface-brand:      var(--purple-600);
  --surface-brand-dark: var(--purple-900);
  --surface-brand-pale: var(--purple-50);
  --surface-warm:       var(--beige-100);
  --surface-warm-deep:  var(--beige-200);
  --surface-inverse:    var(--neutral-950);

  /* Borders */
  --border-subtle:  var(--neutral-100);
  --border-default: var(--neutral-200);
  --border-strong:  var(--neutral-300);
  --border-brand:   var(--purple-300);
  --border-inverse: oklch(100% 0 0 / 0.15);
}


/* tokens/typography.css */
/* Bora Lab — Typography Tokens
   --font-brand: Muro — display headlines, logo wordmark, brand moments
   --font-sans:  Montserrat — all UI, body, navigation, labels */

:root {
  /* ── Font Families ── */
  --font-brand: 'Muro', 'Montserrat', sans-serif;
  --font-sans:  'Montserrat', system-ui, sans-serif;
  --font-mono:  'Courier New', monospace;

  /* ── Size Scale (modular, 1.25 ratio) ── */
  --text-2xs:  0.625rem;   /* 10px */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */
  --text-7xl:  4.5rem;     /* 72px */
  --text-8xl:  6rem;       /* 96px */

  /* ── Line Heights ── */
  --leading-none:    1;
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   2;

  /* ── Letter Spacing ── */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.15em;
  --tracking-caps:    0.12em;  /* for uppercase label text */

  /* ── Font Weights ── */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;
}


/* tokens/spacing.css */
/* Bora Lab — Spacing Tokens
   4px base unit. Scale follows t-shirt sizing convention. */

:root {
  --space-px:  1px;
  --space-0:   0;
  --space-0-5: 2px;
  --space-1:   4px;
  --space-1-5: 6px;
  --space-2:   8px;
  --space-2-5: 10px;
  --space-3:   12px;
  --space-3-5: 14px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-9:   36px;
  --space-10:  40px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-28:  112px;
  --space-32:  128px;
  --space-40:  160px;
  --space-48:  192px;
  --space-56:  224px;
  --space-64:  256px;

  /* ── Layout Containers ── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

  /* ── Section Padding ── */
  --section-y:      var(--space-24);
  --section-y-sm:   var(--space-16);
  --section-x:      var(--space-8);
  --section-x-md:   var(--space-16);
}


/* tokens/effects.css */
/* Bora Lab — Effects Tokens
   Shadows carry a subtle purple tint to reinforce brand.
   Radius system reflects the arch motif: generous top curves. */

:root {
  /* ── Border Radius ── */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-3xl:  32px;
  --radius-4xl:  48px;
  --radius-full: 9999px;

  /* Arch motif: top corners fully rounded, base square */
  --radius-arch-sm:  12px 12px 4px 4px;
  --radius-arch-md:  24px 24px 8px 8px;
  --radius-arch-lg:  48px 48px 12px 12px;
  --radius-arch-xl:  80px 80px 16px 16px;

  /* ── Shadows (purple-tinted) ── */
  --shadow-xs:    0 1px 2px oklch(42% 0.27 286 / 0.06);
  --shadow-sm:    0 2px 4px oklch(42% 0.27 286 / 0.08),  0 1px 2px oklch(0% 0 0 / 0.04);
  --shadow-md:    0 4px 12px oklch(42% 0.27 286 / 0.10), 0 2px 4px oklch(0% 0 0 / 0.04);
  --shadow-lg:    0 8px 24px oklch(42% 0.27 286 / 0.12), 0 4px 8px oklch(0% 0 0 / 0.05);
  --shadow-xl:    0 16px 48px oklch(42% 0.27 286 / 0.15), 0 8px 16px oklch(0% 0 0 / 0.06);
  --shadow-2xl:   0 24px 64px oklch(42% 0.27 286 / 0.20);

  /* Brand glow — for CTAs and interactive elements */
  --shadow-brand: 0 6px 24px oklch(42% 0.27 286 / 0.35);
  --shadow-brand-lg: 0 12px 40px oklch(42% 0.27 286 / 0.45);

  /* Inset */
  --shadow-inset: inset 0 1px 3px oklch(0% 0 0 / 0.10);

  /* ── Transitions ── */
  --transition-fast:   all 0.12s ease; /* @kind other */
  --transition-base:   all 0.18s ease; /* @kind other */
  --transition-slow:   all 0.30s ease; /* @kind other */
  --transition-colors: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease; /* @kind other */

  /* ── Blur ── */
  --blur-sm:  4px;
  --blur-md:  12px;
  --blur-lg:  24px;
  --blur-xl:  48px;

  /* ── Opacity ── */
  --opacity-hover:    0.85; /* @kind other */
  --opacity-disabled: 0.45; /* @kind other */
  --opacity-subtle:   0.08; /* @kind other */
  --opacity-overlay:  0.65; /* @kind other */
}


/* tokens/base.css */
/* Bora Lab — Base Reset & Defaults */

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--surface-base);
}

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

a {
  color: var(--text-brand);
  text-decoration: none;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}


/* Estilos das páginas */
/* index.html */
html { scroll-behavior: smooth; }
    body { margin: 0; background: var(--surface-base); font-family: var(--font-sans); color: var(--text-primary); }
    a { color: var(--color-brand); text-decoration: none; }
    a:hover { color: var(--purple-700); }
    .nav-drop-menu { }
    .nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu { opacity: 1 !important; visibility: visible !important; transform: translateX(-50%) translateY(0) !important; pointer-events: auto !important; }
    @keyframes dcPanelA { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
    @keyframes dcPanelB { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* consultorias.html */
html { scroll-behavior: smooth; }
    body { margin: 0; background: var(--surface-base); font-family: var(--font-sans); color: var(--text-primary); }
    a { color: var(--color-brand); text-decoration: none; }
    a:hover { color: var(--purple-700); }
    .nav-drop-menu { }
    .nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu { opacity: 1 !important; visibility: visible !important; transform: translateX(-50%) translateY(0) !important; pointer-events: auto !important; }
    .flow-row { display: flex; align-items: stretch; justify-content: center; gap: 12px; }
    .flow-step { flex: 1 1 0; min-width: 210px; }
    .flow-arrow { flex: none; display: flex; align-items: center; justify-content: center; color: var(--purple-600); }
    .flow-arrow svg { transform: none; }
    @media (max-width: 900px) {
      .flow-row { flex-direction: column; align-items: stretch; }
      .flow-step { width: 100%; }
      .flow-arrow { align-self: center; padding: 2px 0; }
      .flow-arrow svg { transform: rotate(90deg); }
    }
    @keyframes dcPanelA { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
    @keyframes dcPanelB { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
    @media (prefers-reduced-motion: reduce) {
      @keyframes dcPanelA { from { opacity: 1; } to { opacity: 1; } }
      @keyframes dcPanelB { from { opacity: 1; } to { opacity: 1; } }
    }

/* metodo.html */
html { scroll-behavior: smooth; }
    body { margin: 0; background: var(--surface-base); font-family: var(--font-sans); color: var(--text-primary); }
    a { color: var(--color-brand); text-decoration: none; }
    a:hover { color: var(--purple-700); }
    .nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu { opacity: 1 !important; visibility: visible !important; transform: translateX(-50%) translateY(0) !important; pointer-events: auto !important; }

    .dia3-row { display: flex; align-items: stretch; justify-content: center; gap: 14px; }
    .dia3-card { flex: 1 1 0; min-width: 240px; }
    .dia3-arrow { flex: none; display: flex; align-items: center; justify-content: center; color: var(--purple-600); }
    @media (max-width: 860px) {
      .dia3-row { flex-direction: column; align-items: stretch; }
      .dia3-card { width: 100%; }
      .dia3-arrow { align-self: center; padding: 4px 0; }
      .dia3-arrow svg { transform: rotate(90deg); }
    }

    .stair { display: flex; align-items: flex-end; gap: 14px; position: relative; }
    .stair-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: stretch; }
    .stair-card { background: #fff; border-radius: 18px 18px 12px 12px; padding: 20px 16px 18px; display: flex; flex-direction: column; gap: 9px; box-shadow: var(--shadow-md); transition: transform 180ms cubic-bezier(0.4,0,0.2,1), box-shadow 180ms cubic-bezier(0.4,0,0.2,1); }
    .stair-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
    .stem { position: relative; align-self: center; width: 100%; display: flex; justify-content: center; }
    .stem-line { position: absolute; top: 0; bottom: 0; width: 3px; border-radius: 3px; }
    .stem-dot { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); width: 13px; height: 13px; border-radius: 50%; border: 3px solid var(--surface-subtle); }
    .stair-ground { height: 2px; background: var(--border-default); border-radius: 2px; margin-top: 6px; }
    @media (max-width: 980px) {
      .stair { flex-direction: column; align-items: stretch; gap: 12px; }
      .stem, .stair-ground { display: none; }
      .stair-card { flex-direction: row; align-items: center; gap: 16px; padding: 16px 18px; }
      .stair-card .num { margin-left: auto; }
    }

/* servicos.html */
html { scroll-behavior: smooth; }
    body { margin: 0; background: var(--surface-base); font-family: var(--font-sans); color: var(--text-primary); }
    a { color: var(--color-brand); text-decoration: none; }
    a:hover { color: var(--purple-700); }
    .nav-drop-menu { }
    .nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu { opacity: 1 !important; visibility: visible !important; transform: translateX(-50%) translateY(0) !important; pointer-events: auto !important; }

/* contato.html */
html { scroll-behavior: smooth; }
    body { margin: 0; background: var(--surface-base); font-family: var(--font-sans); color: var(--text-primary); }
    a { color: var(--color-brand); text-decoration: none; }
    a:hover { color: var(--purple-700); }
    .nav-drop-menu { }
    .nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu { opacity: 1 !important; visibility: visible !important; transform: translateX(-50%) translateY(0) !important; pointer-events: auto !important; }
    ::placeholder { color: var(--neutral-400); }


/* Estados (hover, foco, clique) */
.h0:hover{color: var(--color-brand) !important}
.h1:hover{background: var(--purple-50) !important}
.h2:hover{background: var(--purple-700) !important; border-color: var(--purple-700) !important; box-shadow: var(--shadow-brand) !important; color: var(--white) !important}
.h3:active{background: var(--purple-800) !important; transform: scale(0.97) !important}
.h4:focus-visible{outline: 3px solid var(--purple-400) !important; outline-offset: 3px !important}
.h5:hover{transform: rotate(0deg) scale(1.04) !important}
.h6:hover{color: #fff !important; border-color: #fff !important}
.h7:hover{background: #C91F16 !important; color: #fff !important; transform: translateY(-2px) !important}
.h8:hover{background: var(--purple-100) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important; color: var(--color-brand) !important}
.h9:active{background: var(--purple-200) !important; transform: scale(0.97) !important}
.ha:hover{color: #fff !important}
.hb:hover{transform: translateY(-6px) !important; box-shadow: var(--shadow-xl) !important}
.hc:hover{transform: translateY(-6px) !important; box-shadow: var(--shadow-brand-lg) !important}
.hd:hover{background: var(--color-brand-pale) !important; color: var(--color-brand) !important}
.he:hover{transform: translateY(-4px) !important; box-shadow: var(--shadow-lg) !important; color: inherit !important}
.hf:hover{transform: translateY(-2px) !important; box-shadow: var(--shadow-lg) !important; color: inherit !important}
.hg:hover{border-color: var(--purple-400) !important}
.hh:active{transform: scale(0.985) !important}
.hi:focus{outline: 3px solid var(--purple-400) !important; outline-offset: 3px !important}
.hj:hover{border-top-color: var(--color-brand) !important}
.hk:hover{transform: rotate(0deg) translateY(-4px) !important}
.hl:hover{transform: translateY(-4px) !important; box-shadow: var(--shadow-lg) !important; background: var(--surface-base) !important; border-radius: var(--radius-arch-md) !important}
.hm:hover{transform: translateY(-4px) !important; box-shadow: var(--shadow-lg) !important; border-color: var(--purple-200) !important}
.hn:hover{background: rgba(255,255,255,0.12) !important; color: #fff !important; transform: translateY(-2px) !important}
.ho:focus{border-color: var(--color-brand) !important; background: #fff !important; box-shadow: 0 0 0 3px var(--purple-100) !important}
.hp:hover{border-color: var(--color-brand) !important; color: var(--color-brand) !important; background: var(--purple-50) !important}
.hq:hover{transform: translateY(-2px) !important; box-shadow: var(--shadow-lg) !important}
.hr:hover{color: var(--purple-700) !important}

/* Base de produção */
img { max-width: 100%; }
body { overflow-x: clip; }
.nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--border-default); border-radius: 12px; background: #fff; color: var(--text-primary); cursor: pointer; }
.fit-wrap > [data-fit-w] { transition: none; }

/* Responsivo: tablet */
@media (max-width: 1180px) {
  .site-nav { padding-left: 24px !important; padding-right: 24px !important; }
  .nav-toggle { display: inline-flex; }
  .site-nav .nav-links { display: none !important; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch !important; gap: 2px !important; background: #fff; padding: 12px 24px 24px; border-bottom: 1px solid var(--border-subtle); box-shadow: var(--shadow-lg); max-height: calc(100vh - 76px); overflow-y: auto; }
  .site-nav.open .nav-links { display: flex !important; }
  .site-nav .nav-links > a, .site-nav .nav-links > .nav-drop > a { padding: 12px 0; font-size: 14px !important; }
  .site-nav .nav-links > a:last-child { margin-top: 10px; justify-content: center; }
  .site-nav .nav-drop { display: block !important; }
  .site-nav .nav-drop-menu { display: none !important; }
}
@media (max-width: 1024px) {
  .rg4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .rpx { padding-left: 32px !important; padding-right: 32px !important; }
  .rf1 { font-size: 60px !important; }
}
/* Responsivo: celular */
@media (max-width: 760px) {
  .site-nav { padding-left: 20px !important; padding-right: 20px !important; }
  .rg, .rg4 { grid-template-columns: minmax(0, 1fr) !important; }
  .rpx { padding-left: 20px !important; padding-right: 20px !important; }
  .rpy { padding-top: 72px !important; padding-bottom: 72px !important; }
  .rf1 { font-size: 44px !important; }
  .rf2 { font-size: 36px !important; }
  .rf3 { font-size: 30px !important; }
  .rw { flex-wrap: wrap !important; }
  .rmw { max-width: 100% !important; }
}