/* ============================================================================
   Pansare — Site Design System (single file)
   Derivado de content/brand/sistema-simbolico-visual-v01.md e brand-docs.css.
   Lógica: campo · articulação · núcleo · movimento · permanência.
   Organização: @layer tokens → base → components → home → utilities.
   ========================================================================== */

@layer tokens, base, components, home, utilities;

/* ----------------------------------------------------------------------------
   TOKENS — fonte única de verdade visual
   -------------------------------------------------------------------------- */
@layer tokens {
  :root {
    /* Cor — paleta canônica da marca */
    --paper:        #FFF9F3;  /* campo claro, base editorial */
    --paper-soft:   #F4ECFF;  /* transição suave */
    --lavender:     #E8D7FF;  /* atmosfera, sensibilidade */
    --violet:       #7B2FF2;  /* cor identitária principal */
    --violet-deep:  #4B1FA5;  /* presença, gradientes densos */
    --blue:         #2459D6;  /* estrutura, precisão, profundidade */
    --cyan:         #29C6F6;  /* ativação, pulso, energia digital */
    --graphite:     #1A1724;  /* contraste, densidade consultiva */
    --ink:          #221E2E;  /* texto corrido */
    --muted:        #686071;  /* texto de apoio */

    --line:         rgba(123, 47, 242, .16);
    --line-strong:  rgba(123, 47, 242, .28);
    --card:         rgba(255, 255, 255, .72);
    --card-solid:   rgba(255, 255, 255, .86);

    /* Gradientes de marca */
    --grad-brand:   linear-gradient(105deg, var(--violet), var(--blue));
    --grad-pulse:   linear-gradient(90deg, transparent, var(--violet), var(--cyan), transparent);
    --grad-dark:    linear-gradient(135deg, var(--graphite), #3F1F86 54%, var(--blue));
    --field-bg:
      radial-gradient(circle at 82% 6%, rgba(123, 47, 242, .16), transparent 36%),
      radial-gradient(circle at 10% 92%, rgba(41, 198, 246, .13), transparent 38%),
      linear-gradient(135deg, var(--paper) 0%, var(--paper) 44%, var(--paper-soft) 100%);

    /* Tipografia — três camadas: pensamento / impacto / técnica */
    --font-display: "Space Grotesk", "Inter", "Segoe UI", system-ui, sans-serif;
    --font-body:    "Inter", "Segoe UI", system-ui, sans-serif;
    --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Escala tipográfica fluida */
    --fs-display:   clamp(3.4rem, 7vw, 6.6rem);
    --fs-h2:        clamp(2.2rem, 4.6vw, 4.2rem);
    --fs-h3:        clamp(1.35rem, 1.8vw, 1.75rem);
    --fs-lead:      clamp(1.18rem, 1.7vw, 1.6rem);
    --fs-body:      1.08rem;
    --fs-small:     .9rem;
    --fs-label:     .72rem;

    /* Espaço */
    --space-1: .5rem;
    --space-2: .875rem;
    --space-3: 1.25rem;
    --space-4: 2rem;
    --space-5: 3rem;
    --space-6: 4.5rem;
    --space-7: 6.5rem;
    --space-8: 9rem;

    /* Forma */
    --radius-sm: 14px;
    --radius-md: 24px;
    --radius-lg: 34px;
    --radius-pill: 999px;

    /* Profundidade */
    --shadow-soft: 0 18px 55px rgba(26, 23, 36, .10);
    --shadow-card: 0 14px 38px rgba(68, 38, 115, .07);
    --shadow-lift: 0 28px 90px rgba(26, 23, 36, .14);
    --shadow-motion-core: 0 22px 44px rgba(36, 89, 214, .18);
    --shadow-motion-band: 0 22px 44px rgba(41, 198, 246, .30);
    --ink-on-brand: #fff;
    --grad-brand-interactive: linear-gradient(105deg, var(--violet) 0%, var(--blue) 46%, var(--cyan) 72%, var(--violet) 100%);
    --shadow-button-primary: 0 12px 30px rgba(123, 47, 242, .28);
    --shadow-button-primary-hover: 0 18px 40px rgba(36, 89, 214, .32);
    --shadow-button-ghost-hover: 0 12px 24px rgba(26, 23, 36, .10);
    --button-inverse-bg: rgba(255, 255, 255, .12);
    --button-inverse-border: rgba(255, 255, 255, .42);
    --button-inverse-shadow-hover: 0 14px 30px rgba(18, 11, 4, .20);

    /* Layout */
    --container: 1200px;
    --gutter: clamp(20px, 4vw, 48px);
    /* Coluna do símbolo ao lado do texto (hero, faixa Método) — escala fluida,
       mantendo o padrão texto↔símbolo constante em todas as resoluções. */
    --symbol-col: clamp(96px, 26vw, 360px);

    --ease: cubic-bezier(.2, .7, .2, 1);
  }
}

/* ----------------------------------------------------------------------------
   BASE — reset, documento, tipografia raiz
   -------------------------------------------------------------------------- */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

  body {
    margin: 0;
    min-height: 100vh;
    background: var(--field-bg);
    background-attachment: fixed;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.6;
    font-feature-settings: "cv05", "ss01";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; }
  p { margin: 0; }
  a { color: inherit; text-decoration: none; }
  img, svg { display: block; max-width: 100%; }
  ::selection { background: var(--violet); color: #fff; }

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

/* ----------------------------------------------------------------------------
   COMPONENTS — blocos reutilizáveis do sistema
   -------------------------------------------------------------------------- */
@layer components {

  /* Layout primitives ------------------------------------------------------ */
  .container {
    width: min(var(--container), 100% - (var(--gutter) * 2));
    margin-inline: auto;
  }
  .section { padding-block: var(--space-7); }
  .section--tight { padding-block: var(--space-6); }

  /* Tipografia de marca ---------------------------------------------------- */
  .eyebrow,
  .label,
  .kicker {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: var(--fs-label);
    font-weight: 500;
    color: var(--violet);
  }
  .kicker { display: inline-block; margin-bottom: var(--space-3); }

  .display {
    font-size: var(--fs-display);
    line-height: .94;
    letter-spacing: -.04em;
    font-weight: 600;
  }
  .h2 {
    font-size: var(--fs-h2);
    line-height: 1.02;
    letter-spacing: -.035em;
  }
  .h3 {
    font-size: var(--fs-h3);
    line-height: 1.12;
    letter-spacing: -.02em;
  }
  .lead {
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    line-height: 1.4;
    letter-spacing: -.01em;
    color: var(--muted);
  }
  .gradient-text {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* Navegação -------------------------------------------------------------- */
  .nav {
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(18px);
    background: rgba(255, 249, 243, .72);
    border-bottom: 1px solid var(--line);
  }
  .nav__inner {
    width: min(var(--container), 100% - (var(--gutter) * 2));
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-3);
  }
  /* Lockup de marca — componente único (site + admin).
     Símbolo ao lado do nome, escala fluida via clamp (sem saltos por breakpoint).
     Orientações: horizontal (default) e --stacked. Variante admin: sufixo "adm".
     Sizing por custom props locais (--bm-*) para as variantes sobrescreverem. */
  .brand-mark {
    --bm-symbol: clamp(28px, 1.2vw + 22px, 34px);
    --bm-word:   clamp(1.32rem, .55vw + 1.16rem, 1.72rem);
    --bm-gap:    var(--space-2);
    display: inline-flex;
    align-items: center;
    gap: var(--bm-gap);
    font: 700 var(--bm-word)/1 var(--font-display);
    letter-spacing: -.075em;
    text-transform: lowercase;
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .brand-mark img {
    width: var(--bm-symbol);
    height: var(--bm-symbol);
    flex: 0 0 var(--bm-symbol);
  }
  /* Sufixo "adm" — variante administrativa (cor de ativação) */
  .brand-mark__suffix {
    color: var(--cyan);
    -webkit-text-fill-color: var(--cyan);
    letter-spacing: -.04em;
  }
  /* Stacked — alta adaptabilidade em contextos de pouca largura */
  .brand-mark--stacked {
    --bm-symbol: clamp(44px, 9vw, 88px);
    --bm-gap: var(--space-1);
    flex-direction: column;
    text-align: center;
  }
  .nav__links {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--fs-small);
    color: var(--muted);
  }
  .nav__links a { transition: color .2s var(--ease); }
  .nav__links a:hover { color: var(--violet); }

  /* Botões ----------------------------------------------------------------- */
  .button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: .8em 1.4em;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: var(--fs-small);
    letter-spacing: -.01em;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-position .5s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
  }
  .button--primary {
    background: var(--grad-brand-interactive);
    background-size: 200% 100%;
    background-position: 0 50%;
    color: var(--ink-on-brand);
    box-shadow: var(--shadow-button-primary);
  }
  .button--primary:hover, .nav__links .button--primary:hover { color: var(--ink-on-brand); transform: translateY(-2px) scale(1.01); background-position: 100% 50%; box-shadow: var(--shadow-button-primary-hover); }
  .button--primary:active { transform: translateY(0) scale(.99); }
  .button--ghost {
    background: var(--card-solid);
    border-color: var(--line-strong);
    color: var(--graphite);
  }
  .button--ghost:hover { transform: translateY(-2px); border-color: var(--violet); background: var(--paper-soft); box-shadow: var(--shadow-button-ghost-hover); }
  .button--ghost:active { transform: translateY(0); }
  .button--inverse {
    background: var(--button-inverse-bg);
    border-color: var(--button-inverse-border);
    color: var(--ink-on-brand);
  }
  .button--inverse:hover {
    transform: translateY(-2px);
    background: var(--ink-on-brand);
    border-color: var(--ink-on-brand);
    color: var(--violet-deep);
    box-shadow: var(--button-inverse-shadow-hover);
  }
  .button--inverse:active { transform: translateY(0); }
  .actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

  /* Cards ------------------------------------------------------------------ */
  .card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    box-shadow: var(--shadow-card);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  }
  .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--line-strong); }
  .card--link { color: inherit; }
  .card--link:hover { border-color: var(--violet); transform: translateY(-3px); }
  .card__more { margin-top: auto; color: var(--violet); font-size: var(--fs-small); font-weight: 600; }
  .content-empty { color: var(--muted); grid-column: 1 / -1; }
  .card .h3 { margin-block: var(--space-2) var(--space-1); }
  .card p { color: var(--muted); }

  .card__num {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: .15em;
    color: var(--violet);
  }
  .card__icon { width: 38px; height: 38px; margin-bottom: var(--space-3); }

  /* Case na home — card como evidência: disciplinas + chamada própria. */
  .card--case { display: flex; flex-direction: column; }
  .card--case .card__more { margin-top: var(--space-3); }
  .case-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-3); }
  .case-card__tags .tag { font-size: .62rem; padding: .35em .7em; text-transform: none; letter-spacing: .04em; }

  /* Grades ----------------------------------------------------------------- */
  .grid { display: grid; gap: var(--space-3); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }

  /* Cabeçalho de seção ----------------------------------------------------- */
  .section-head {
    display: grid;
    grid-template-columns: minmax(0, .4fr) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
    margin-bottom: var(--space-5);
  }

  /* Faixa de destaque (dark / cinematográfica) ----------------------------- */
  .band {
    background: var(--grad-dark);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: clamp(var(--space-4), 5vw, var(--space-6));
    box-shadow: var(--shadow-lift);
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--symbol-col);
    gap: clamp(var(--space-3), 4vw, var(--space-5));
    align-items: center;
    position: relative;
    overflow: hidden;
  }
  .band .eyebrow { color: var(--cyan); }
  .band .lead { color: rgba(255, 255, 255, .82); }
  /* H2 acompanha a coluna (ao lado do símbolo) em qualquer largura. */
  .band .h2 { font-size: clamp(1.8rem, 4.5vw, 4.2rem); overflow-wrap: break-word; }
  .band__visual { display: flex; justify-content: center; }
  .band__visual img { width: 64%; filter: drop-shadow(0 22px 44px rgba(41, 198, 246, .3)); }

  /* Linha de pulso --------------------------------------------------------- */
  .pulse-line { height: 1px; border: 0; background: var(--grad-pulse); margin-block: var(--space-4); }

  /* Rodapé ----------------------------------------------------------------- */
  .footer {
    border-top: 1px solid var(--line);
    padding-block: var(--space-5);
    color: var(--muted);
    font-size: var(--fs-small);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: space-between;
    align-items: center;
  }
}

/* ----------------------------------------------------------------------------
   HOME — composições específicas da página inicial
   -------------------------------------------------------------------------- */
@layer home {

  /* Hero — campo + núcleo -------------------------------------------------- */
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--symbol-col);
    gap: clamp(var(--space-3), 4vw, var(--space-6));
    align-items: center;
    padding-block: var(--space-7) var(--space-6);
  }
  .hero h1 { margin-block: var(--space-3) var(--space-4); overflow-wrap: break-word; }
  /* H1 do hero acompanha a coluna (ao lado do símbolo) em qualquer largura. */
  .hero .display { font-size: clamp(2rem, 6vw, 6.6rem); }
  .hero .lead { max-width: 46ch; }

  /* Símbolo do hero — núcleo de sentido como ilustração de conceito (não lockup).
     Padrão único: texto ao lado do símbolo em TODAS as resoluções. A coluna do
     símbolo escala por clamp (--symbol-col) e tudo dentro do palco é % dele —
     a proporção texto↔símbolo é constante. O símbolo vive num CAMPO sutil de
     articulação (atmosfera + geometria fantasma, conforme a base da marca). */
  .hero__stage {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
  }
  /* Atmosfera — halo de profundidade (preenche o palco) */
  .hero__stage::before {
    content: "";
    position: absolute;
    inset: -6%;
    background: radial-gradient(circle at 50% 48%, rgba(123, 47, 242, .16), rgba(41, 198, 246, .07) 46%, transparent 70%);
  }
  /* Geometria fantasma — cubo/campo tridimensional de articulação */
  .hero__stage::after {
    content: "";
    position: absolute;
    inset: 13%;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    rotate: 12deg;
  }
  .hero__symbol {
    position: relative;
    z-index: 1;
    width: 64%;
    filter: drop-shadow(0 22px 44px rgba(36, 89, 214, .18));
    animation: float 7s var(--ease) infinite;
  }

  /* Sobre — retrato + trajetória ------------------------------------------ */
  .about {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: var(--space-6);
    align-items: center;
  }
  .about__portrait {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
  }
  .about__portrait img { width: 100%; height: 100%; object-fit: cover; }
  .about__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
  .tag {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--violet);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    padding: .45em .95em;
  }

  /* Tira tipográfica — impacto -------------------------------------------- */
  .type-strip { text-align: center; }
  .type-strip__word {
    font-family: var(--font-display);
    font-size: clamp(4.5rem, 18vw, 16rem);
    line-height: .8;
    letter-spacing: -.06em;
    font-weight: 600;
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-block: var(--space-3);
  }
  .type-strip .lead { max-width: 60ch; margin-inline: auto; }

  /* Bloco de conversa / CTA final ----------------------------------------- */
  .contact { text-align: center; }
  .contact .h2 { max-width: 18ch; margin-inline: auto; }

  /* Artigos na home — índice editorial (texto-forte), distinto da grade de cases. */
  .article-list { display: flex; flex-direction: column; }
  .article-row {
    display: grid;
    grid-template-columns: minmax(140px, .26fr) minmax(0, 1fr);
    gap: var(--space-3) var(--space-5);
    padding-block: var(--space-5);
    border-top: 1px solid var(--line);
    color: inherit;
  }
  .article-row:last-child { border-bottom: 1px solid var(--line); }
  .article-row__kicker {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: var(--fs-label);
    color: var(--violet);
  }
  .article-row__title {
    font-size: clamp(1.5rem, 2.5vw, 2.15rem);
    line-height: 1.08;
    letter-spacing: -.025em;
    transition: color .2s var(--ease);
  }
  .article-row__excerpt { margin-top: var(--space-2); max-width: 62ch; color: var(--muted); }
  .article-row .card__more { display: inline-block; margin-top: var(--space-3); }
  .article-row--link:hover .article-row__title { color: var(--violet); }
}

/* ----------------------------------------------------------------------------
   UTILITIES — motion de entrada e helpers
   -------------------------------------------------------------------------- */
@layer utilities {
  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
  }

  @keyframes rise {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .reveal { animation: rise .7s var(--ease) both; }
  .reveal-1 { animation-delay: .05s; }
  .reveal-2 { animation-delay: .15s; }
  .reveal-3 { animation-delay: .25s; }

  .text-center { text-align: center; }
  .mx-auto { margin-inline: auto; }
}

/* ----------------------------------------------------------------------------
   RESPONSIVO
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  /* hero e faixa Método mantêm texto ao lado do símbolo (sem colapso) — a coluna
     --symbol-col já reduz fluidamente. */
  .section-head { grid-template-columns: 1fr; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .about { grid-template-columns: 1fr; }
  .about__portrait { max-width: 420px; }
  .nav__links a:not(.button) { display: none; }
}

@media (max-width: 600px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .article-row { grid-template-columns: 1fr; gap: var(--space-2); }
  .content__cta { flex-direction: column; align-items: flex-start; }
  /* hero e faixa Método: o padrão texto↔símbolo é fluido (base), sem regra
     específica aqui. Só comprime o respiro vertical do hero no mobile. */
  .hero { padding-block: var(--space-5) var(--space-4); }
  .hero h1 { margin-block: var(--space-2) var(--space-3); }
  /* Faixa Método: padding menor no mobile para o texto respirar ao lado do símbolo. */
  .band { padding: var(--space-3); }
}

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

/* CMS — extensões do design system Pansare */
@layer components {
  .admin-shell { width: min(var(--container), 100% - (var(--gutter) * 2)); margin-inline: auto; }
  /* Header unificado (CMS + manual): barra sticky full-width com container interno. */
  .admin-header{position:sticky;top:0;z-index:30;background:rgba(255,249,243,.9);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
  .admin-header__inner{width:min(var(--container),100% - (var(--gutter) * 2));min-height:80px;margin-inline:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-4)}
  /* Marca no header admin: usa o componente .brand-mark (+ sufixo adm). Só o alinhamento no grid é local. */
  .admin-header__inner .brand-mark{justify-self:start}
  .admin-nav,.admin-account,.item-actions{display:flex;align-items:center;gap:var(--space-2)}.admin-nav{justify-content:center;gap:var(--space-4);min-width:0}.admin-account{justify-self:end}.admin-nav a{color:var(--muted);font-size:var(--fs-small);white-space:nowrap}.admin-nav a:hover,.admin-nav .is-current,.text-button{color:var(--violet)}
  .admin-header__toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;margin-left:auto;padding:0;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card);cursor:pointer}.admin-header__toggle span{display:block;width:20px;height:2px;margin-inline:auto;background:var(--ink);transition:transform .25s var(--ease),opacity .2s var(--ease)}
  .admin-subnav{border-bottom:1px solid var(--line);background:rgba(255,255,255,.5)}.admin-subnav>div{width:min(var(--container),100% - (var(--gutter) * 2));min-height:52px;margin-inline:auto;display:flex;align-items:center;gap:var(--space-3);overflow-x:auto}.admin-subnav span{padding-right:var(--space-3);border-right:1px solid var(--line);font:500 var(--fs-label) var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--violet);white-space:nowrap}.admin-subnav a{color:var(--muted);font-size:var(--fs-small);white-space:nowrap}.admin-subnav a:hover,.admin-subnav .is-current{color:var(--ink);font-weight:600}
  .admin-nav__contextual,.admin-nav__logout{display:none}
  .text-button{border:0;padding:0;background:none;cursor:pointer;font:500 var(--fs-small) var(--font-body)}.user-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--radius-pill);background:var(--grad-brand);color:#fff;font:600 .9rem var(--font-mono);text-transform:uppercase}
  .admin-intro{max-width:760px;padding:var(--space-7) 0 var(--space-5)}.admin-intro h1{margin-top:var(--space-2);font-size:var(--fs-h2);line-height:1.02;letter-spacing:-.04em}.admin-intro p:last-child{margin-top:var(--space-3);color:var(--muted);font-size:var(--fs-lead)}
  .dashboard-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);padding-bottom:var(--space-7)}.dashboard-card{min-height:260px;display:flex;flex-direction:column;padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--card);box-shadow:var(--shadow-card);transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)}.dashboard-card:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:var(--shadow-lift)}.dashboard-card>span,.item span,.empty{font:500 var(--fs-label) var(--font-mono);text-transform:uppercase;letter-spacing:.16em;color:var(--violet)}.dashboard-card strong{margin:auto 0 var(--space-2);font:600 clamp(3rem,7vw,4.75rem)/.9 var(--font-display);letter-spacing:-.075em}.dashboard-card--brand{background:linear-gradient(135deg,rgba(244,236,255,.92),rgba(255,255,255,.82))}.dashboard-card--brand strong{font-size:clamp(2rem,4vw,2.8rem);letter-spacing:-.055em}.dashboard-card p{color:var(--muted);font-size:var(--fs-small)}.dashboard-card em{margin-top:var(--space-3);color:var(--violet);font-style:normal;font-weight:600}
  .admin-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,.9fr);gap:var(--space-3);padding-bottom:var(--space-7)}.editor,.library{padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--card);box-shadow:var(--shadow-card)}.form-head,.library-head{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);margin-bottom:var(--space-4)}.editor h2,.library h2{font-size:var(--fs-h3)}
  .editor label{display:block;margin:0 0 var(--space-3);font:500 var(--fs-small) var(--font-body)}.editor input,.editor textarea,.editor select,.login-card input{width:100%;margin-top:var(--space-1);padding:.8rem 1rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:rgba(255,255,255,.78);color:var(--ink);font:inherit}.editor input:focus,.editor textarea:focus,.editor select:focus{outline:0;border-color:var(--violet);box-shadow:0 0 0 3px rgba(123,47,242,.12)}.form-pair{display:grid;grid-template-columns:1fr 110px;gap:var(--space-2)}.check{display:flex!important;align-items:center;gap:var(--space-2);color:var(--muted)!important}.check input{width:auto!important;margin:0!important;accent-color:var(--violet)}.save{width:100%;border:0;border-radius:var(--radius-pill);padding:.9rem 1.2rem;background:var(--grad-brand);color:#fff;cursor:pointer;font:600 var(--fs-small) var(--font-body);box-shadow:0 12px 25px rgba(75,31,165,.2)}.save:hover{transform:translateY(-2px)}
  .toolbar{display:flex;gap:2px;padding:var(--space-1);border:1px solid var(--line);border-bottom:0;border-radius:var(--radius-sm) var(--radius-sm) 0 0;background:rgba(244,236,255,.62)}.toolbar button{border:0;border-radius:8px;padding:.45rem .7rem;background:transparent;color:var(--ink);cursor:pointer}.toolbar button:hover{background:var(--lavender)}.rich-editor{min-height:330px;padding:var(--space-3);border:1px solid var(--line);border-radius:0 0 var(--radius-sm) var(--radius-sm);background:rgba(255,255,255,.78);line-height:1.75;outline:none}.rich-editor:empty:before{content:attr(data-placeholder);color:var(--muted)}.rich-editor img{max-width:100%;border-radius:var(--radius-sm)}.cover-preview{width:100%;max-height:280px;object-fit:cover;margin-top:var(--space-2);border-radius:var(--radius-sm)}.item{display:flex;justify-content:space-between;gap:var(--space-2);padding:var(--space-3) 0;border-top:1px solid var(--line)}.item:first-child{border-top:0}.item h3{margin-top:.2rem;font-size:1rem;line-height:1.25}
  .login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--space-3)}.login-shell{width:min(100%,410px)}.login-card{width:100%;position:relative;padding:clamp(1.5rem,5vw,2rem);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--card-solid);box-shadow:var(--shadow-soft);overflow:hidden}.login-card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--grad-brand)}.login-card__header{margin-bottom:var(--space-4)}.login-card .brand-mark{margin-bottom:var(--space-3)}.login-home{display:block;margin-top:var(--space-3);text-align:center;font-size:var(--fs-small);color:var(--muted)}.login-home:hover{color:var(--violet)}.login-card h1{margin-top:var(--space-1);font-size:clamp(1.5rem,4vw,1.85rem);line-height:1.08;letter-spacing:-.04em}.login-card__header>p:not(.eyebrow){margin-top:var(--space-2);color:var(--muted);font-size:var(--fs-small);line-height:1.45}.login-card label{display:block;margin-bottom:var(--space-2);font-size:var(--fs-small)}.login-card .save{margin-top:var(--space-1)}
  /* Responsivo admin — fonte única (drawer abaixo de 960px). */
  @media(max-width:960px){
    .admin-header__inner{display:flex;min-height:64px}
    .admin-header__toggle{display:flex}
    .admin-account{display:none}
    .admin-nav{position:fixed;inset:64px 0 auto;z-index:29;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:var(--space-2) var(--gutter) var(--space-4);background:var(--card-solid);border-bottom:1px solid var(--line);box-shadow:var(--shadow-soft);opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .2s var(--ease),transform .25s var(--ease),visibility .2s}
    .admin-nav>a{padding:var(--space-2) 0;font-size:var(--fs-body);border-bottom:1px solid var(--line)}
    .admin-nav__contextual{display:block}.admin-nav__contextual a{display:block;padding:var(--space-2) 0 var(--space-2) var(--space-4);font-size:var(--fs-small);color:var(--muted);border-bottom:1px solid var(--line)}.admin-nav__contextual a:hover,.admin-nav__contextual a.is-current{color:var(--violet);font-weight:600}
    .admin-nav__logout{display:block;margin-top:var(--space-2);text-align:left}
    .admin-subnav{display:none}
    body.admin-nav-open{overflow:hidden}
    body.admin-nav-open::before{content:"";position:fixed;inset:64px 0 0;z-index:28;background:rgba(26,23,36,.34);backdrop-filter:blur(2px)}
    body.admin-nav-open .admin-nav{opacity:1;visibility:visible;transform:none}
    body.admin-nav-open .admin-header__toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
    body.admin-nav-open .admin-header__toggle span:nth-child(2){opacity:0}
    body.admin-nav-open .admin-header__toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
    .dashboard-cards,.admin-layout{grid-template-columns:1fr}
    .admin-intro{padding:var(--space-6) 0 var(--space-4)}
  }
  @media(max-width:600px){
    .admin-header__inner{gap:var(--space-2)}
    .form-pair{grid-template-columns:1fr}
  }
}

/* Refinamento responsivo do manual administrativo. */
@layer utilities {
  .doc-main{padding:var(--space-4) 0 var(--space-7)}
  .doc-main .hero{grid-template-columns:minmax(0,1fr) minmax(280px,.58fr);gap:clamp(2rem,5vw,5rem);min-height:clamp(420px,58vh,650px);margin-bottom:var(--space-5)}
  .doc-main .hero h1{max-width:12ch;font-size:clamp(3.2rem,5.3vw,5.7rem);line-height:.93;letter-spacing:-.07em}
  .doc-main .hero .lead{max-width:38rem;font-size:clamp(1.05rem,1.5vw,1.35rem)}
  .doc-main .hero-card{align-self:center}.doc-main .hero-card .quote{font-size:clamp(1.35rem,2.5vw,2.35rem);line-height:1.13}
  .doc-main .section{margin-top:var(--space-6)}.doc-main .section-head{grid-template-columns:minmax(150px,.3fr) minmax(0,1fr);gap:var(--space-4)}
  .doc-main .section h2{max-width:18ch}.doc-main .card,.doc-main .panel,.doc-main .copy-block{padding:var(--space-3)}
  .doc-main .table{display:grid;grid-template-columns:.45fr 1fr 1fr;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--card)}
  .doc-main .table>div{padding:var(--space-2);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.doc-main .table>div:nth-child(3n){border-right:0}.doc-main .table>div:nth-last-child(-n+3){border-bottom:0}
  .doc-main .swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}.doc-main .swatch{min-height:150px;padding:var(--space-2);border:1px solid var(--line);border-radius:var(--radius-md);display:flex;flex-direction:column;justify-content:flex-end;background:var(--c)}.doc-main .swatch.dark{color:#fff}
  .doc-main .pill-row{display:flex;flex-wrap:wrap;gap:var(--space-2)}.doc-main .pill{padding:.55rem .85rem;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--card);font-size:var(--fs-small)}
  .doc-main .logo-row{display:flex;align-items:center;gap:var(--space-3)}.doc-main .logo-row img{width:56px;height:56px}.doc-main .logo-word{font:700 clamp(3rem,6vw,5rem)/.9 var(--font-display);letter-spacing:-.075em}.doc-main .dark-band{padding:var(--space-5)}
  @media(max-width:960px){
    .doc-main{padding:var(--space-3) 0 var(--space-6)}.doc-main .hero{grid-template-columns:1fr;gap:var(--space-3);min-height:0;margin-bottom:var(--space-5)}.doc-main .hero h1{max-width:13ch;font-size:clamp(2.7rem,12vw,4rem)}.doc-main .hero .lead{font-size:1rem}.doc-main .hero-card{width:100%}.symbol-stage{min-height:220px}.doc-main .section{margin-top:var(--space-5)}.doc-main .section-head{grid-template-columns:1fr;gap:var(--space-2)}.doc-main .section h2{max-width:none;font-size:clamp(2rem,9vw,3rem)}.doc-main .grid-2,.doc-main .grid-3,.doc-main .grid-4{grid-template-columns:1fr}.doc-main .table{grid-template-columns:1fr}.doc-main .table>div{border-right:0}.doc-main .table>div:nth-last-child(-n+3){border-bottom:1px solid var(--line)}.doc-main .table>div:last-child{border-bottom:0}.doc-main .swatches{grid-template-columns:repeat(2,1fr)}.toc{grid-template-columns:1fr}.doc-main .dark-band{padding:var(--space-4)}
  }
}

/* ----------------------------------------------------------------------------
   CONTEÚDO — telas de detalhe (artigo e case)
   Mesmo sistema de tokens; divergem em layout e ritmo de leitura.
   Artigo = coluna editorial estreita (ideia em circulação).
   Case   = largura ampla com ficha de disciplinas (evidência da prática).
   -------------------------------------------------------------------------- */
@layer components {
  .content-header { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(18px); background: rgba(255, 249, 243, .72); border-bottom: 1px solid var(--line); }
  .content-header__inner { width: min(var(--container), 100% - (var(--gutter) * 2)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-3); }

  .content { width: min(var(--container), 100% - (var(--gutter) * 2)); margin-inline: auto; padding-block: var(--space-6) var(--space-7); }
  .content__back { display: inline-flex; align-items: center; gap: .4em; font-family: var(--font-mono); font-size: var(--fs-small); color: var(--muted); transition: color .2s var(--ease); }
  .content__back:hover { color: var(--violet); }
  .content__head { margin-top: var(--space-4); }
  .content__title { font-size: var(--fs-display); line-height: .96; letter-spacing: -.04em; font-weight: 600; margin-top: var(--space-3); }
  .content__lead { margin-top: var(--space-4); }
  .content__meta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-4); font: 500 var(--fs-label)/1 var(--font-mono); text-transform: uppercase; letter-spacing: .18em; color: var(--violet); }
  .content__ficha { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
  .content__cover { width: 100%; border-radius: var(--radius-lg); margin-top: var(--space-5); box-shadow: var(--shadow-soft); }

  .content__body { margin-top: var(--space-5); font-size: var(--fs-body); line-height: 1.75; }
  .content__body h2 { font-size: var(--fs-h3); letter-spacing: -.02em; margin-top: var(--space-5); margin-bottom: var(--space-2); }
  .content__body p { margin-top: var(--space-3); }
  .content__body ul { margin-top: var(--space-3); padding-left: 1.2em; }
  .content__body li { margin-top: .4em; }
  .content__body img { border-radius: var(--radius-md); margin-block: var(--space-4); }
  .content__body figure { margin-block: var(--space-5); }
  .content__body figure img { width: 100%; margin-block: 0; }
  .content__body figcaption { margin-top: var(--space-2); font: 500 var(--fs-small) var(--font-mono); letter-spacing: .02em; color: var(--muted); text-align: center; }
  /* Figuras de marca: símbolo em respiro e tríade de ícones (não fotográficas). */
  .content__body .figure--symbol img { width: min(220px, 55%); margin-inline: auto; border-radius: 0; }
  .content__body .figure-icons { display: flex; justify-content: center; gap: var(--space-5); padding-block: var(--space-3); }
  .content__body .figure-icons img { width: 60px; border-radius: 0; }

  .content__cta { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .content__cta p { color: var(--muted); max-width: 38ch; }

  /* Artigo — foco na leitura, medida estreita. */
  .content--artigo { max-width: 760px; }
  .content--artigo .content__title { font-size: var(--fs-h2); line-height: 1.02; }

  /* Case — cabeçalho largo, corpo legível, capa como evidência. */
  .content--case .content__head { max-width: 920px; }
  .content--case .content__body { max-width: 760px; }
}

/* Manual de marca: utiliza exclusivamente os tokens e componentes Pansare. */
@layer components {
  .doc-main{width:min(var(--container),100% - (var(--gutter) * 2));margin:auto;padding:var(--space-7) 0}.doc-main .hero{display:grid;grid-template-columns:1.1fr .65fr;gap:var(--space-6);align-items:center;margin-bottom:var(--space-7)}.doc-main .hero-card,.doc-main .card,.doc-main .panel,.doc-main .copy-block{padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--card);box-shadow:var(--shadow-card)}.doc-main .hero h1{font-size:var(--fs-display);line-height:.94;letter-spacing:-.075em}.doc-main .lead{margin-top:var(--space-4);max-width:870px;color:var(--muted);font-size:var(--fs-lead);line-height:1.4}.doc-main .section{margin-top:var(--space-7)}.doc-main .section-head{display:grid;grid-template-columns:.38fr 1fr;gap:var(--space-5);margin-bottom:var(--space-4)}.doc-main .section h2{font-size:var(--fs-h2);line-height:1;letter-spacing:-.055em}.doc-main .section h3{font-size:var(--fs-h3);line-height:1.1}.doc-main .grid-2,.doc-main .grid-3,.doc-main .grid-4{display:grid;gap:var(--space-3)}.doc-main .grid-2{grid-template-columns:repeat(2,1fr)}.doc-main .grid-3{grid-template-columns:repeat(3,1fr)}.doc-main .grid-4{grid-template-columns:repeat(4,1fr)}.doc-main .card p,.doc-main .panel p,.doc-main .copy-block p,.doc-main .body-text{margin-top:var(--space-2);color:var(--muted)}.symbol-stage{display:grid;place-items:center;min-height:360px}.symbol-stage img{max-width:80%;filter:drop-shadow(0 22px 44px rgba(36,89,214,.16))}.toc{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--space-2);margin-top:var(--space-4)}.toc a{padding:var(--space-2);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card)}.toc a strong{display:block;margin-top:.25rem;line-height:1.2}.dark-band{background:var(--grad-dark)!important;color:#fff}.dark-band p,.dark-band .lead{color:rgba(255,255,255,.8)}@media(max-width:960px){.doc-main .hero,.doc-main .section-head,.doc-main .grid-2,.doc-main .grid-3,.doc-main .grid-4{grid-template-columns:1fr}.toc{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.doc-main{padding-block:var(--space-5)}.toc{grid-template-columns:1fr}}
}

@layer components {
  .brand-motion { display: block; aspect-ratio: 1; border: 0; overflow: hidden; background: transparent; pointer-events: none; }
  .brand-mark .brand-motion--mark { width: var(--bm-symbol); height: var(--bm-symbol); flex: 0 0 var(--bm-symbol); }
  .band__visual .brand-motion--band { width: 64%; filter: drop-shadow(var(--shadow-motion-band)); }
}

@layer home {
  .hero__stage .brand-motion--hero { position: relative; z-index: 1; width: 64%; height: 64%; filter: drop-shadow(var(--shadow-motion-core)); }
}
@layer tokens {
  :root {
    --motion-mobile-size: clamp(84px, 24vw, 116px);
    --fs-label-compact: clamp(.58rem, 2.9vw, .68rem);
    --tracking-label-compact: .15em;
  }
}
@layer home {
  @media (max-width: 600px) {
    .hero {
      grid-template-columns: minmax(0, 1fr) var(--motion-mobile-size);
      gap: var(--space-2);
      padding-block: var(--space-4);
    }
    .hero__copy { display: contents; }
    .hero .eyebrow,
    .hero .display,
    .hero .actions { grid-column: 1 / -1; }
    .hero .eyebrow {
      margin: 0;
      font-size: var(--fs-label-compact);
      letter-spacing: var(--tracking-label-compact);
      white-space: nowrap;
    }
    .hero .display { margin-block: var(--space-2) var(--space-3); }
    .hero__lead { grid-column: 1; align-self: center; }
    .hero__stage {
      grid-column: 2;
      grid-row: 3;
      width: var(--motion-mobile-size);
      justify-self: end;
      align-self: center;
    }
    .hero__stage .brand-motion--hero { width: 92%; height: 92%; }
  }
}
@layer home {
  @media (max-width: 600px) {
    .band {
      grid-template-columns: minmax(0, 1fr) var(--motion-mobile-size);
      gap: var(--space-2);
    }
    .band__copy { display: contents; }
    .band .eyebrow,
    .band .h2,
    .band .pulse-line,
    .band .actions { grid-column: 1 / -1; }
    .band__lead { grid-column: 1; align-self: center; }
    .band__visual {
      grid-column: 2;
      grid-row: 3;
      width: var(--motion-mobile-size);
      justify-self: end;
      align-self: center;
    }
    .band__visual .brand-motion--band { width: 92%; }
  }
}
@layer tokens {
  :root {
    --brand-mark-mobile-symbol: clamp(36px, 9vw, 42px);
    --brand-mark-mobile-word: clamp(1.5rem, 5vw, 1.75rem);
  }
}
@layer components {
  @media (max-width: 600px) {
    .nav .brand-mark {
      --bm-symbol: var(--brand-mark-mobile-symbol);
      --bm-word: var(--brand-mark-mobile-word);
      --bm-gap: var(--space-2);
    }
  }
}
@layer components {
  .band__accent { color: var(--cyan); }
  .band__accent--soft { color: var(--lavender); }
}
@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
}
@layer components {
  .save.button--primary {
    background: var(--grad-brand-interactive);
    background-size: 200% 100%;
    background-position: 0 50%;
    color: var(--ink-on-brand);
    box-shadow: var(--shadow-button-primary);
  }
  .save.button--primary:hover {
    color: var(--ink-on-brand);
    transform: translateY(-2px) scale(1.01);
    background-position: 100% 50%;
    box-shadow: var(--shadow-button-primary-hover);
  }
  .save.button--primary:active { transform: translateY(0) scale(.99); }
}
@layer components {
  .login-actions { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
  .login-actions .save { width: auto; margin-top: 0; padding: .72em 1.1em; }
  .login-actions .login-home { display: inline-flex; margin: 0; text-align: start; }
}
@layer components {
  .admin-subnav .admin-subnav__home {
    padding-right: var(--space-3);
    border-right: 1px solid var(--line);
    font: 500 var(--fs-label) var(--font-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--violet);
    white-space: nowrap;
  }
  .admin-subnav .admin-subnav__home:hover { color: var(--violet-deep); }
  @media (max-width: 960px) {
    .admin-nav__contextual .admin-nav__home { padding-left: 0; color: var(--violet); }
  }
}