/* =========================================================================
   Design System — adaptacao da pagina ao LANDING-DESIGN-SYSTEM.md
   Carregado por ultimo: sobrescreve os presets herdados do build original.
   Referencia: context/LANDING-DESIGN-SYSTEM.md
   ========================================================================= */

/* ---------- 1. Fontes (self-hosted, secao 2.1) -------------------------- */

@font-face {
  font-family: "Inter DS";
  src: url("../fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Display DS";
  src: url("../fonts/inter-display-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Tokens (secao 12 — referencia rapida) --------------------- */

:root {
  /* familias */
  --ds-font-sans: "Inter DS", ui-sans-serif, system-ui, sans-serif;
  --ds-font-display: "Inter Display DS", "Inter DS", ui-sans-serif, sans-serif;
  --ds-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* marca */
  --ds-brand-200: #bae0ff;
  --ds-brand-300: #7cc2ff;
  --ds-brand-400: #369eff;
  --ds-brand-500: #0052ff;
  --ds-brand-600: #003ecc;
  --ds-brand-900: #001a80;
  --ds-brand-purple: #7c2fd3;
  --ds-brand-gradient: linear-gradient(135deg, var(--ds-brand-500), var(--ds-brand-purple));

  /* superficies */
  --ds-surface-dark: #050b13;   /* o preto do sistema */
  --ds-ink: #07111f;
  --ds-surface-raised: #0d1b2d;

  /* texto */
  --ds-text-on-dark: #f3f6ff;
  --ds-text-muted: #94a3b8;
  --ds-text-faint: #64748b;
  --ds-text-body: #475569;

  /* raios */
  --ds-r-sm: .7rem;
  --ds-r-btn: .85rem;
  --ds-r-md: 1rem;
  --ds-r-lg: 1.75rem;
  --ds-r-xl: 2.25rem;

  /* movimento */
  --ds-ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ds-ease-nav: cubic-bezier(.5, 0, .2, 1);
  --ds-duration-spring: 1.174s;

  /* elevacao — offset alto + blur alto + spread negativo, tom azul (secao 5) */
  --ds-shadow-brand: 0 24px 70px -24px rgba(0, 82, 255, .48),
                     0 18px 54px -28px rgba(124, 47, 211, .38);
  --ds-shadow-card: 0 18px 44px -30px rgba(7, 17, 31, .30), 0 1px 2px rgba(7, 17, 31, .03);
}

/* ---------- 2b. So a pagina de Portfolios ------------------------------
   O runtime monta a Home como uma segunda arvore dentro de #main, abaixo do
   footer. page-cleanup.js a remove; esta regra evita o flash ate la. */

#main > div[data-framer-root] ~ div[data-framer-root] {
  display: none !important;
}

/* ---------- 3. Renderizacao (secao 2.8) --------------------------------- */

html body {
  background: var(--ds-surface-dark) !important;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- 3b. Marca Oblivia ------------------------------------------
   O mesmo componente Logo aparece na navegacao e no footer, inclusive
   depois da hidratacao. O seletor por data-framer-name cobre os dois lados. */

[data-framer-name="Logo"] .svgContainer {
  align-items: center !important;
  background: url("../img/oblivia-logo.png") left center / 2.25rem auto no-repeat !important;
  box-sizing: border-box;
  display: flex !important;
  padding-left: 2.85rem;
}

[data-framer-name="Logo"] .svgContainer > svg {
  display: none !important;
}

[data-framer-name="Logo"] .svgContainer::after {
  color: var(--ds-text-on-dark);
  content: "Oblivia Marketing";
  font-family: var(--ds-font-sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1;
  white-space: nowrap;
}

/* ---------- 4. Familia unica em toda a pagina (secao 2.1) ---------------
   Os presets do build escrevem --framer-font-family no proprio elemento,
   entao o remap precisa acontecer no mesmo nivel — dai o seletor universal. */

body,
body *,
body *::before,
body *::after {
  --framer-font-family: var(--ds-font-sans) !important;
  --framer-font-family-bold: var(--ds-font-sans) !important;
  --framer-font-family-italic: var(--ds-font-sans) !important;
  --framer-font-family-bold-italic: var(--ds-font-sans) !important;
  --framer-blockquote-font-family: var(--ds-font-sans) !important;
  --framer-link-font-family: var(--ds-font-sans) !important;
  --framer-link-hover-font-family: var(--ds-font-sans) !important;
  --framer-link-current-font-family: var(--ds-font-sans) !important;
  --framer-code-font-family: var(--ds-font-mono) !important;
}

/* ---------- 5. Peso unico 300 (secoes 0.1 e 2.2) ------------------------
   Hierarquia por tamanho, cor e tracking — nunca por peso.
   Excecao documentada: a display, que existe so em 600. */

body,
body * {
  --framer-font-weight: 300 !important;
  --framer-font-weight-bold: 300 !important;
  --framer-font-weight-italic: 300 !important;
  --framer-font-weight-bold-italic: 300 !important;
  --framer-link-font-weight: 300 !important;
}

/* ---------- 6. Escala de titulos (secao 2.3) ----------------------------
   Quanto maior o titulo, mais apertado o line-height e mais negativo o
   tracking. Tamanhos do build preservados; ritmo trocado pelo do sistema. */

/* 64px e 54px — display */
.framer-styles-preset-gfedbh:not(.rich-text-wrapper),
.framer-styles-preset-gfedbh.rich-text-wrapper h2,
.framer-styles-preset-v3j499:not(.rich-text-wrapper),
.framer-styles-preset-v3j499.rich-text-wrapper h3 {
  /* a declaracao explicita e necessaria: o titulo herda font-family de um
     ancestral, entao trocar so a custom property nao chega nele */
  font-family: var(--ds-font-display) !important;
  --framer-font-family: var(--ds-font-display) !important;
  --framer-font-family-italic: var(--ds-font-display) !important;
  --framer-font-weight: 600 !important;
  --framer-font-weight-italic: 600 !important;
  --framer-font-style: normal !important;
  --framer-font-style-italic: normal !important;
  --framer-letter-spacing: -.05em !important;
  --framer-line-height: .98em !important;
  text-wrap: balance;
}

/* 40px */
.framer-styles-preset-1s7q5sa:not(.rich-text-wrapper),
.framer-styles-preset-1s7q5sa.rich-text-wrapper h4 {
  --framer-letter-spacing: -.045em !important;
  --framer-line-height: 1.04em !important;
  text-wrap: balance;
}

/* 34px */
.framer-styles-preset-qs87xn:not(.rich-text-wrapper),
.framer-styles-preset-qs87xn.rich-text-wrapper h5 {
  --framer-letter-spacing: -.04em !important;
  --framer-line-height: 1.06em !important;
  text-wrap: balance;
}

/* 28px */
.framer-styles-preset-stq0xt:not(.rich-text-wrapper),
.framer-styles-preset-stq0xt.rich-text-wrapper h6 {
  --framer-letter-spacing: -.035em !important;
  --framer-line-height: 1.12em !important;
  text-wrap: balance;
}

/* 20px */
.framer-styles-preset-djryrw:not(.rich-text-wrapper),
.framer-styles-preset-djryrw.rich-text-wrapper h6 {
  --framer-letter-spacing: -.03em !important;
  --framer-line-height: 1.2em !important;
}

/* ---------- 7. Corpo e rotulos (secoes 2.4 e 2.5) ----------------------- */

/* corpo 16px */
.framer-styles-preset-fmg8gh:not(.rich-text-wrapper),
.framer-styles-preset-fmg8gh.rich-text-wrapper p,
.framer-styles-preset-975rle:not(.rich-text-wrapper),
.framer-styles-preset-975rle.rich-text-wrapper p,
.framer-styles-preset-7we164:not(.rich-text-wrapper),
.framer-styles-preset-7we164.rich-text-wrapper p,
.framer-styles-preset-w49adz:not(.rich-text-wrapper),
.framer-styles-preset-w49adz.rich-text-wrapper p {
  --framer-letter-spacing: -.01em !important;
}

/* apoio 20px */
.framer-styles-preset-aar78j:not(.rich-text-wrapper),
.framer-styles-preset-aar78j.rich-text-wrapper p,
.framer-styles-preset-1gna3xi:not(.rich-text-wrapper),
.framer-styles-preset-1gna3xi.rich-text-wrapper p {
  --framer-letter-spacing: -.02em !important;
  --framer-line-height: 1.6em !important;
}

/* rotulos pequenos (12-14px) — tracking aberto */
.framer-styles-preset-5x41r3:not(.rich-text-wrapper),
.framer-styles-preset-5x41r3.rich-text-wrapper p,
.framer-styles-preset-1nxlmmj:not(.rich-text-wrapper),
.framer-styles-preset-1nxlmmj.rich-text-wrapper p,
.framer-styles-preset-1b6pegl:not(.rich-text-wrapper),
.framer-styles-preset-1b6pegl.rich-text-wrapper p {
  --framer-letter-spacing: .01em !important;
}

/* ---------- 8. Cores — remap do build para a paleta do sistema (secao 1)
   Os valores originais vivem em style inline; o casamento e pelo valor. */

/* texto secundario #6C7275 -> text-muted */
[style*="rgb(108, 114, 117)"] { --framer-text-color: var(--ds-text-muted) !important; }
[style*="#6C7275"]            { --framer-text-color: var(--ds-text-muted) !important; }

/* texto terciario #343839 -> slate 600 */
[style*="rgb(52, 56, 57)"]    { --framer-text-color: #475569 !important; }

/* branco puro -> tinta sobre escuro do sistema */
[style*="rgb(255, 255, 255)"] { --framer-text-color: var(--ds-text-on-dark) !important; }

/* acento de link #0099FF -> brand-400 (o azul legivel sobre escuro) */
[style*="rgb(0, 153, 255)"] {
  --framer-link-text-color: var(--ds-brand-400) !important;
  --framer-link-hover-text-color: var(--ds-brand-300) !important;
}

/* superficies escuras */
[style*="background-color: rgb(0, 0, 0)"]    { background-color: var(--ds-surface-dark) !important; }
[style*="background-color: rgb(20, 23, 24)"] { background-color: var(--ds-ink) !important; }
[style*="background-color: rgb(35, 38, 39)"] { background-color: var(--ds-surface-raised) !important; }

/* hairlines sobre escuro (secao 1.3) */
[style*="rgb(136, 136, 136, 0.2)"] { border-color: rgba(255, 255, 255, .12) !important; }

/* ---------- 9. Botao (secao 7.1) ----------------------------------------
   Variante light do sistema: corpo branco, tinta #041a3d, raio .85rem. */

.framer-svQ5D {
  border-radius: var(--ds-r-btn) !important;
  transition: box-shadow .35s var(--ds-ease-out-expo),
              translate .35s var(--ds-ease-out-expo);
}

.framer-svQ5D:hover {
  box-shadow: var(--ds-shadow-brand);
}

.framer-svQ5D .framer-text {
  --framer-text-color: #041a3d !important;
}

/* ---------- 10. Foco visivel (secao 10) --------------------------------- */

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ds-brand-500);
  outline-offset: 3px;
  border-radius: var(--ds-r-sm);
}

/* sobre superficie escura o anel branco le melhor */
.framer-svQ5D:focus-visible {
  outline-color: #fff;
}

/* ---------- 11. Movimento (secao 6.11) ---------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .framer-svQ5D {
    transition: none;
  }
  .framer-svQ5D:hover {
    box-shadow: none;
    outline: 2px solid currentColor;
  }
}