/* ==========================================================================
   Studio Artemis — main.css
   Figma: i23qiP70wQhTOjyhYLT9LM · Home desktop 8160:163
   ========================================================================== */

:root {
  /* Cores — variáveis do Figma (get_variable_defs 8160:163) */
  --gray-0: #ffffff;
  --gray-200: #cecece;
  --gray-300: #b5b5b5;
  --gray-400: #9d9d9d;
  --gray-500: #848485;
  --gray-800: #3a3a3c;
  --gray-900: #212123;
  --black-100: #111111;
  --black-200: #09090b;
  --blue-300: #87baff;
  --blue-400: #5499ff;
  --green-300: #93ffd0;
  --green-400: #5dffb8;
  --magenta-300: #e88fff;
  --orange-200: #ffd5c0;
  --orange-300: #ffb48e;
  --orange-400: #ff8c53;

  /* Tipografia */
  --font-display: "Exo", sans-serif;
  --font-body: "Cabin", sans-serif;
  --font-serif: "Instrument Serif", serif;

  /* Tokens estruturais — extraídos do Figma deste projeto (Fase 0.5) */
  --frame-w: 1440px;
  --content-w: 1376px;
  --section-px: clamp(16px, calc(32 / 1440 * 100vw), 32px); /* 32px exatos no frame 1440 */
  --section-py: 120px;
  --content-gap: 32px;

  /* Header fixo: 80px no topo (8165:2338), 60px após o scroll (8165:2339) */
  --header-h: 80px;
  --header-h-scrolled: 60px;
}

/* Mobile (frame 8635:1583, 375 de largura) — vale até 767px.
   Seções: respiro lateral 16 (o clamp de --section-px já dá 16) e vertical 60;
   header de 60 (8635:3579) também no estado inicial. */
@media (max-width: 767px) {
  :root {
    --section-py: 60px;
    --header-h: 60px;
  }
  .page-post { --header-h: 64px; } /* post: header com selo (8693:2102) */
}

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

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* âncoras (#estudos, abas do Blog) */

body {
  margin: 0;
  background: var(--black-200);
  color: var(--gray-0);
  font-family: var(--font-body);
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: pretty; /* sem palavra viúva no site todo (pedido do cliente); herdado por todo texto. Firefox: reforço no main.js */
}

main { padding-top: var(--header-h); overflow-x: clip; } /* altura do header fixo (estado inicial) · clip: rede contra rolagem lateral das entradas (não cria contêiner de rolagem, sticky continua) */
section[id] { scroll-margin-top: var(--header-h-scrolled); } /* âncoras (#estudos, abas do Blog) param logo abaixo do header fixo */
.is-preview main { padding-top: 0; } /* preview isolado de seção (tools/build.py --preview) */

p, h1, h2, h3 { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }

.container {
  width: 100%;
  max-width: calc(var(--content-w) + 2 * var(--section-px));
  margin-inline: auto;
  padding-inline: var(--section-px);
}

:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Componentes de seção compartilhados (padrão recorrente no Figma)
   - .eyebrow       → Instrument Serif italic 20/1.3 (ex.: 8183:975, 8195:1067)
   - .section-title → Exo SemiBold 40/1.2, trecho em <em> cinza (ex.: 8183:309, 8294:503)
   - .section-head  → coluna eyebrow + título, gap 16 (ex.: 8213:369, 8195:1064)
   - .body-lg       → Cabin 18/1.5 gray-300 (ex.: 8294:505)
   -------------------------------------------------------------------------- */
.section-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }

.eyebrow {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
  color: var(--gray-300);
}
.eyebrow--400 { color: var(--gray-400); }

.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.2;
  color: var(--gray-0);
  text-wrap: pretty;
}
.section-title em { font-style: normal; color: var(--gray-500); }
.section-title--em-300 em { color: var(--gray-300); }
.section-title--em-400 em { color: var(--gray-400); }

.body-lg { font-size: 18px; line-height: 1.5; color: var(--gray-300); }

/* --------------------------------------------------------------------------
   Botão — componente (8160:172 / 8160:173)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 17px 23px; /* 18/24 do Figma − 1px do stroke inside */
  border: 1px solid var(--gray-800);
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--gray-0);
  background: transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { border-color: var(--gray-500); }
.btn--primary { background: var(--gray-0); color: var(--black-200); }
.btn--primary:hover { background: var(--gray-200); border-color: var(--gray-800); }

/* --------------------------------------------------------------------------
   Header (8165:2338) · versão scroll (8165:2339)
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: var(--black-200);
  box-shadow: inset 0 -1px 0 var(--gray-900); /* stroke inside 1px */
  transition: height .25s ease, box-shadow .25s ease;
}
/* Após o scroll: fixo, sem stroke, logo e padding menores (py 16, logo 120×28) */
.site-header.is-scrolled { height: var(--header-h-scrolled); box-shadow: none; }
/* Barra: container (8165:2315 / 8635:3289) + botão "Menu" do mobile (8635:3577) */
.site-header__bar { display: flex; align-items: center; }
.site-header__inner {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-header__logo img { width: 137px; height: 32px; transition: width .25s ease, height .25s ease; }
.site-header.is-scrolled .site-header__logo img { width: 120px; height: 28px; }
.site-header__actions { display: flex; align-items: center; gap: 24px; }
.site-nav { display: flex; align-items: center; gap: 24px; }
.site-nav a,
.site-header__cta {
  font-size: 16px;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--gray-0);
  transition: color .2s ease;
}
.site-nav a { font-weight: 400; }
.site-nav a:hover { color: var(--gray-300); }
.site-header__sep { width: 4px; height: 4px; background: var(--gray-500); }
.site-header__cta { font-weight: 600; }
.site-header__cta:hover { color: var(--gray-300); }

/* Variante Blog (8340:2124): logo sem ™ 125×32 + selo "BLOG" (8314:2527, gap 24); nav com "Início" */
.site-header__brand { display: flex; align-items: center; gap: 24px; }
.site-header__logo picture { display: block; }
.site-header--blog .site-header__logo img { width: 125px; height: 32px; }
.site-header--blog.is-scrolled .site-header__logo img { width: 109.375px; height: 28px; } /* mesma escala 32 → 28 da versão scroll (8165:2339) */
/* 8314:2542 · Tag: p 2/6, blue-300 · texto 8314:2526 Cabin Bold 12/1.3 maiúsculo black-200 */
.site-header__tag {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  background: var(--blue-300);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--black-200);
}
.site-header__tag span { display: block; }

/* 768–1023: com a MktOps no menu (5 links; 6 no Blog, com "Início") os gaps de 24 não cabem — 16 em todas as variantes */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-header__brand,
  .site-header__actions,
  .site-nav { gap: 16px; }
  /* texto do botão editável (Dados do site): se não couber, encolhe com reticências em vez de passar da tela */
  .site-header__actions { min-width: 0; }
  .site-header__cta { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
/* 768–899 no Blog: logo + selo (192) + 6 links não cabem — o selo sai, como no celular */
@media (min-width: 768px) and (max-width: 899px) {
  .site-header--blog .site-header__tag { display: none; }
}
@media (min-width: 768px) and (max-width: 819px) {
  .site-header--blog .site-nav { gap: 12px; } /* 6 links: com 16 sobravam 5 px entre o logo e o menu em 768 */
}

/* Botão "Menu" e gaveta só existem no mobile (≤767) */
.site-header__toggle,
.site-header__drawer { display: none; }

/* Gaveta aberta: trava a rolagem da página */
html.has-menu-open,
html.has-menu-open body { overflow: hidden; }

/* --------------------------------------------------------------------------
   Header mobile (≤767) · 8635:3579 (375×60) · scroll 8662:2937 · menu 8662:2946
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* 8635:3579: p 16, logo 120×28 nos dois estados; stroke inferior só no topo (8662:2937 sem stroke) */
  .site-header__logo img,
  .site-header--blog .site-header__logo img,
  .site-header.is-scrolled .site-header__logo img { width: 120px; height: 28px; }
  .site-header__actions { display: none; } /* 8635:3291 (hidden) */
  /* Blog mobile 8673:4443 = instância do header da Home: logo com ™ (<source> do <picture>), sem selo */
  .site-header__tag { display: none; }

  /* Post mobile 8693:2102 "Header blog" (375×64): logo sem ™ 125×32 + selo, gap 16; rolando volta aos 60 do 8662:2937 */
  .site-header--tag-m .site-header__tag { display: flex; }
  .site-header--tag-m .site-header__brand { gap: 16px; }
  .site-header--tag-m:not(.is-scrolled) .site-header__logo img { width: 125px; height: 32px; }

  /* 8635:3577 / 8635:3568 · "Menu" Cabin Regular 18/1.5 */
  .site-header__toggle,
  .site-header__close {
    position: relative;
    display: block;
    flex: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font-body);
    font-variation-settings: "wdth" 100;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    white-space: nowrap;
    color: var(--gray-0);
    cursor: pointer;
    transition: color .2s ease;
  }
  .site-header__toggle { min-width: 44px; text-align: right; transition: color .2s ease, opacity .3s ease; } /* caixa de texto 44×27 do Figma (texto à direita) */
  html.has-menu-open .site-header__toggle { opacity: 0; } /* com a gaveta aberta, "Fechar" substitui "Menu" (não vaza ao lado do painel) */
  .site-header__close { min-width: 51px; text-align: right; }  /* 8662:2952 · 51×27 */
  .site-header__toggle span { display: block; }
  .site-header__toggle::after,
  .site-header__close::after { content: ""; position: absolute; inset: -9px -8px; } /* área de toque ≥ 44px */
  .site-header__toggle:hover,
  .site-header__close:hover { color: var(--gray-300); }

  /* Gaveta (8662:2946): overlay cobrindo a altura da tela, entra da esquerda para a direita */
  .site-header__drawer {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: block;
    visibility: hidden;
    transition: visibility 0s linear .3s;
  }
  .site-header__drawer.is-open { visibility: visible; transition-delay: 0s; }
  .site-header__backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--black-200) 60%, transparent);
    opacity: 0;
    transition: opacity .3s ease;
  }
  .site-header__drawer.is-open .site-header__backdrop { opacity: 1; }
  .site-header__panel {
    position: absolute;
    inset: 0 auto 0 0;
    width: min(325px, calc(100% - 50px)); /* 325 no frame de 375 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--black-100);
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.2, .7, .2, 1);
  }
  .site-header__drawer.is-open .site-header__panel { transform: none; }

  /* 8662:2947 · Close Button 325×60: p 16 + stroke inferior de 1 (no layout), "Fechar" à direita (8662:2952) */
  .site-header__panel-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 16px;
    border-bottom: 1px solid var(--gray-900);
  }

  /* 8662:2938 / 8662:2939 · links Cabin 16/1.5, gap 24, à direita */
  .site-header__menu {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 16px;
  }
  .site-header__menu a {
    position: relative;
    display: block;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    text-align: right;
    color: var(--gray-0);
    transition: color .2s ease;
  }
  .site-header__menu a::after { content: ""; position: absolute; inset: -10px 0; } /* área de toque 44px */
  .site-header__menu a:hover { color: var(--gray-300); }

  /* 8662:2965 · Email and Description: p 16, gap 8, stroke superior inside */
  .site-header__contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    box-shadow: inset 0 1px 0 var(--gray-900);
    text-align: right;
  }
  .site-header__contact-label { /* 8662:2966 · Instrument Serif Italic 18/1.3 */
    height: 23px;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.3;
    color: var(--gray-300);
  }
  .site-header__contact-email { /* 8662:2967 · Exo SemiBold 16/1.2 — clique copia o e-mail */
    position: relative;
    display: block;
    min-height: 23px; /* 23 do Figma; e-mail longo do Customizer quebra em vez de estourar a gaveta (320 → 238 úteis) */
    overflow-wrap: anywhere;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
    color: var(--gray-0);
    transition: color .2s ease;
  }
  .site-header__contact-email::after { content: ""; position: absolute; inset: -11px 0; } /* área de toque 45px */
  .site-header__contact-email:hover { color: var(--gray-300); }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header__logo img,
  .site-header__toggle,
  .site-header__drawer,
  .site-header__backdrop,
  .site-header__panel { transition: none; }
}