@charset "utf-8";
/* =============================================================================
   Cristiane Rosa · Psicopedagoga
   Sistema visual derivado da identidade oficial: creme, rosa acinzentado,
   taupe e oliva, costurados pelo filete âmbar. A "espinha de margem" — o
   filete de caderno que corre pela lateral — estrutura e assina a página.
   ========================================================================== */

@layer reset, tokens, base, layout, components, sections, motion, utils;

/* ─────────────────────────────────────────────────────────── reset ──────── */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  img, picture, svg, video { display: block; max-width: 100%; }
  img { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; }
  ul, ol { list-style: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
  h1, h2, h3, h4 { font-weight: inherit; font-size: inherit; }
  summary::-webkit-details-marker { display: none; }
}

/* ─────────────────────────────────────────────────────────── tokens ─────── */
@layer tokens {
  @property --thread { syntax: "<number>"; inherits: true; initial-value: 0; }
  @property --draw   { syntax: "<number>"; inherits: false; initial-value: 0; }

  :root {
    color-scheme: light only;

    /* Cor — amostrada da identidade oficial (midia1/2/3).
       O logotipo entrega quatro famílias: creme, rosa acinzentado, taupe (o "R")
       e oliva (o ramo). O âmbar é o filete fino que costura as formas. */
    --paper:      #FBF6F3;   /* creme oficial da marca                       */
    --paper-2:    #F6EDE7;   /* papel recuado, cartões                       */
    --paper-3:    #F0E2D9;   /* filetes sobre papel                          */
    --ink:        #2F2C24;   /* tinta oliva-taupe profunda — texto principal  */
    --ink-2:      #57503F;   /* texto secundário            (7.5:1 no papel)  */
    --muted:      #7A6B5C;   /* taupe legível               (4.8:1 no papel)  */
    --taupe:      #9C8B7B;   /* o taupe do "R" — filetes e ornamentos         */
    --rose:       #A87068;   /* rosa de exibição            (3.8:1 no papel)  */
    --rose-deep:  #8F5C55;   /* rosa acessível              (5.1:1 no papel)  */
    --rose-brand: #BB9189;   /* o rosa do logotipo — ornamentos               */
    --rose-mist:  #DDB6AB;   /* a mancha rosada da papelaria                  */
    --rose-veil:  #F3E3DC;
    --sage:       #9D977D;   /* o oliva da papelaria                          */
    --sage-deep:  #6B6A52;
    --forest:     #2C2B23;   /* âncoras escuras, oliva profundo               */
    --forest-2:   #383626;
    --amber:      #EDA357;   /* o filete âmbar — só traço, nunca texto        */
    --gold-text:  #736457;   /* sobrelinhas legíveis, também sobre --paper-2   */
    --gold-soft:  #CDBFA8;   /* taupe claro, sobre fundo escuro               */

    --on-dark:      #F4EDE4;
    --on-dark-2:    #C6BCA9;
    --on-dark-rose: #DDB6AB;

    /* Tipografia */
    --serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
    --sans:  "Instrument Sans", ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;

    --fs-micro: clamp(.688rem, .66rem + .12vw, .75rem);
    --fs-sm:    clamp(.813rem, .78rem + .16vw, .875rem);
    --fs-base:  clamp(1rem, .96rem + .2vw, 1.075rem);
    --fs-lead:  clamp(1.09rem, 1rem + .45vw, 1.3rem);
    --fs-h3:    clamp(1.25rem, 1.1rem + .7vw, 1.6rem);
    --fs-h2:    clamp(1.95rem, 1.4rem + 2.4vw, 3.35rem);
    --fs-h1:    clamp(2.9rem, 1.7rem + 5.4vw, 6.1rem);

    /* Métrica e espaço */
    --wrap: 1220px;
    --pad: clamp(1.25rem, 5vw, 4rem);
    --gutter: clamp(0px, 14vw - 7rem, 12.5rem); /* coluna da margem, 0 no mobile */
    --sec-y: clamp(4.5rem, 9vw, 9.5rem);
    --r-sm: 4px;
    --r-md: 10px;
    --r-lg: 18px;

    --line: color-mix(in oklab, var(--taupe) 58%, transparent);
    --line-soft: color-mix(in oklab, var(--ink) 12%, transparent);
    --line-dark: color-mix(in oklab, var(--gold-soft) 26%, transparent);

    --shadow-sm: 0 1px 2px -1px rgb(46 50 39 / .12), 0 2px 8px -4px rgb(46 50 39 / .1);
    --shadow-md: 0 12px 34px -22px rgb(46 50 39 / .45), 0 2px 8px -6px rgb(46 50 39 / .3);
    --shadow-lg: 0 34px 70px -46px rgb(46 50 39 / .58);

    --ease: cubic-bezier(.22, .68, .28, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);

    /* O menu fica ABAIXO da barra: assim o botão de fechar continua visível e clicável */
    --z-spine: 1; --z-sticky: 20; --z-menu: 35; --z-nav: 40; --z-fab: 30;
  }

  /* Espaço P3 quando disponível: o âmbar da marca ganha o brilho que tem
     no impresso, sem alterar as cores que carregam texto. */
  @supports (color: oklch(0% 0 0)) {
    @media (color-gamut: p3) {
      :root {
        --amber:      oklch(78% .125 66);
        --rose-brand: oklch(66.5% .048 30);
        --rose-mist:  oklch(80% .053 38);
      }
    }
  }
}

/* ───────────────────────────────────────────────────────────── base ─────── */
@layer base {
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--fs-base);
    font-weight: 400;
    line-height: 1.65;
    overflow-x: clip;
    /* Pauta de caderno quase imperceptível: dá textura ao papel sem virar enfeite.
       Rola junto com a página (background-attachment: fixed trava no iOS). */
    background-image: repeating-linear-gradient(
      to bottom,
      transparent 0 33px,
      color-mix(in oklab, var(--ink) 3.2%, transparent) 33px 34px
    );
  }

  ::selection { background: var(--rose-mist); color: var(--ink); }

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

  strong { font-weight: 600; color: var(--ink); }
  em { font-style: italic; }
  i { font-style: normal; color: var(--taupe); padding-inline: .18em; }

  .skip {
    position: absolute; left: 50%; top: 0; translate: -50% -120%;
    z-index: 100; padding: .75rem 1.25rem;
    background: var(--forest); color: var(--on-dark);
    border-radius: 0 0 var(--r-md) var(--r-md); font-size: var(--fs-sm);
    transition: translate .2s var(--ease);
  }
  .skip:focus-visible { translate: -50% 0; }

  .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
  .ico { width: 1.15em; height: 1.15em; flex: none; }
}

/* ─────────────────────────────────────────────────────────── layout ─────── */
@layer layout {
  .wrap {
    width: min(var(--wrap), 100% - var(--pad) * 2);
    margin-inline: auto;
  }

  /* Grade de duas colunas: margem (cabeça corrente) + corpo do texto */
  .section__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  @media (min-width: 1080px) {
    .section__grid {
      grid-template-columns: var(--gutter) minmax(0, 1fr);
      gap: clamp(2.5rem, 4vw, 4.5rem);
    }
  }

  .section { padding-block: var(--sec-y); }
  .section > .wrap { position: relative; }
  :where(.section) { scroll-margin-top: 5.5rem; }

  .section__body { min-width: 0; }

  /* ── A espinha: filete de margem de caderno.
        Só aparece depois do herói — a abertura é a capa, o resto é o caderno. ── */
  .spine {
    position: fixed;
    inset-block: 0;
    left: calc(50% - min(var(--wrap), 100vw - var(--pad) * 2) / 2 + var(--gutter));
    width: 1px;
    z-index: var(--z-spine);
    pointer-events: none;
    opacity: 0;
    transition: opacity .6s var(--ease);
    background: linear-gradient(
      to bottom,
      transparent 0,
      color-mix(in oklab, var(--taupe) 52%, transparent) 8vh,
      color-mix(in oklab, var(--taupe) 52%, transparent) 92vh,
      transparent 100%
    );
  }
  .spine[data-on] { opacity: 1; }
  .spine__thread {
    position: absolute;
    inset: 0 auto 0 -1px;
    width: 3px;
    background: linear-gradient(to bottom, var(--rose-brand), var(--amber));
    transform-origin: top;
    scale: 1 var(--thread, 0);
    border-radius: 2px;
  }
  @media (max-width: 1079px) { .spine { display: none; } }

  /* Cabeça corrente: o nome da seção vive na margem, como numa página de livro */
  .runner {
    font-family: var(--sans);
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-text);
  }
  .runner > span { display: inline-flex; align-items: center; gap: .6rem; }
  .runner > span::before {
    content: ""; width: 1.6rem; height: 1px;
    background: var(--taupe); opacity: .85;
  }
  @media (min-width: 1080px) {
    .runner { position: sticky; top: 7.5rem; align-self: start; text-align: right; padding-right: 1.5rem; }
    .runner > span { flex-direction: row-reverse; }
  }
}

/* ─────────────────────────────────────────────────────── components ─────── */
@layer components {

  /* ── Títulos ── */
  .h2 {
    font-family: var(--serif);
    font-size: var(--fs-h2);
    font-weight: 400;
    font-variation-settings: "SOFT" 32, "WONK" 1;
    line-height: 1.06;
    letter-spacing: -.021em;
    text-wrap: balance;
    color: var(--ink);
  }
  .h2--light { color: var(--on-dark); }

  .eyebrow {
    display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
    font-size: var(--fs-micro); font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--gold-text);
  }
  .eyebrow .rule { width: 2.2rem; height: 1px; background: var(--taupe); opacity: .85; }
  .eyebrow--light { color: var(--gold-soft); }

  .head { max-width: 44ch; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
  /* em (e não ch) para a medida do título: acompanha o próprio corpo da fonte */
  .head .h2 { max-width: 11em; }
  .head__sub {
    margin-top: 1.35rem;
    font-size: var(--fs-lead);
    line-height: 1.6;
    color: var(--ink-2);
    text-wrap: pretty;
  }

  .mini-title {
    font-family: var(--sans);
    font-size: var(--fs-micro); font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--gold-soft);
    padding-bottom: .8rem;
    border-bottom: 1px solid var(--line-dark);
    margin-bottom: 1.4rem;
  }

  /* ── Botões ── */
  .btn {
    --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line);
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    min-height: 48px; padding: .8rem 1.4rem;
    background: var(--btn-bg); color: var(--btn-fg);
    border: 1px solid var(--btn-bd);
    border-radius: 999px;
    font-size: var(--fs-sm); font-weight: 600; letter-spacing: .01em;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .22s var(--ease), color .22s var(--ease),
                border-color .22s var(--ease), box-shadow .22s var(--ease);
  }
  .btn .ico { transition: translate .25s var(--ease); }

  .btn--primary, .btn--wa {
    --btn-bg: var(--rose-deep); --btn-fg: #FFF9F6; --btn-bd: var(--rose-deep);
    box-shadow: var(--shadow-sm);
  }
  .btn--primary:hover, .btn--wa:hover {
    --btn-bg: #863B46; --btn-bd: #863B46;
    box-shadow: var(--shadow-md);
  }
  .btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: color-mix(in oklab, var(--ink) 24%, transparent); }
  .btn--ghost:hover { --btn-bg: var(--paper-2); --btn-bd: var(--ink); }
  .btn--ghost:hover .ico { translate: 3px 0; }
  .btn--lg { min-height: 56px; padding: 1rem 1.9rem; font-size: var(--fs-base); }

  .link {
    display: inline-flex; align-items: center; gap: .4rem;
    color: var(--rose-deep); font-weight: 600;
    border-bottom: 1px solid color-mix(in oklab, var(--rose-deep) 40%, transparent);
    padding-bottom: 1px;
    transition: border-color .2s var(--ease), color .2s var(--ease);
  }
  .link:hover { border-color: var(--rose-deep); color: #863B46; }
  .link:hover .ico { translate: 3px 0; }
  .link .ico { transition: translate .25s var(--ease); }

  /* ── Navegação ── */
  .nav {
    position: fixed; inset: 0 0 auto; z-index: var(--z-nav);
    padding: clamp(.6rem, 1.4vw, 1rem) var(--pad);
    transition: background-color .3s var(--ease), box-shadow .3s var(--ease),
                backdrop-filter .3s var(--ease), border-color .3s var(--ease);
    border-bottom: 1px solid transparent;
  }
  .nav[data-stuck] {
    background: color-mix(in oklab, var(--paper) 84%, transparent);
    backdrop-filter: blur(14px) saturate(1.5);
    border-bottom-color: var(--line-soft);
    box-shadow: 0 10px 30px -28px rgb(46 50 39 / .7);
  }
  .nav__bar {
    width: min(var(--wrap), 100%);
    margin-inline: auto;
    display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  }

  .brand { display: inline-flex; align-items: center; gap: .75rem; margin-right: auto; }
  .brand__mark { width: 40px; flex: none; }
  .brand__mark img { width: 100%; height: auto; }
  .brand__text { display: grid; line-height: 1.1; }
  .brand__text strong {
    font-family: var(--serif); font-size: 1.14rem; font-weight: 500;
    font-variation-settings: "SOFT" 40, "WONK" 1; letter-spacing: -.012em;
  }
  .brand__text em {
    font-family: var(--sans); font-style: normal;
    font-size: .625rem; font-weight: 600; letter-spacing: .2em;
    text-transform: uppercase; color: var(--gold-text);
  }

  .nav__links { display: none; gap: clamp(1rem, 2vw, 1.9rem); }
  .nav__links a {
    position: relative; white-space: nowrap;
    font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2);
    padding-block: .4rem; transition: color .2s var(--ease);
  }
  .nav__links a::after {
    content: ""; position: absolute; inset: auto 0 0; height: 1px;
    background: var(--rose-deep); scale: 0 1; transform-origin: left;
    transition: scale .28s var(--ease);
  }
  .nav__links a:hover { color: var(--ink); }
  .nav__links a:hover::after, .nav__links a[aria-current]::after { scale: 1 1; }
  .nav__links a[aria-current] { color: var(--rose-deep); }

  .nav__cta { display: none; }
  .nav__toggle {
    display: grid; place-items: center; width: 46px; height: 46px;
    border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
    color: var(--ink); transition: background-color .2s var(--ease);
  }
  .nav__toggle:hover { background: var(--paper-2); }
  .nav__toggle .ico { width: 20px; height: 20px; }

  @media (min-width: 1120px) {
    .nav__links { display: flex; }
    .nav__cta { display: inline-flex; }
    .nav__toggle { display: none; }
  }
  /* Faixa intermediária: cabe o botão ao lado do hambúrguer, mas não os links. */
  @media (min-width: 720px) and (max-width: 1119.98px) {
    .nav__cta { display: inline-flex; }
  }

  .menu {
    position: fixed; inset: 0; z-index: var(--z-menu);
    display: grid; gap: 2rem;
    /* "safe" impede que o conteúdo seja cortado no topo em telas baixas */
    align-content: safe center;
    overflow-y: auto; overscroll-behavior: contain;
    padding: 6.5rem var(--pad) calc(var(--pad) + env(safe-area-inset-bottom));
    background-color: var(--paper);
    background-image: radial-gradient(120% 80% at 80% 0%, var(--rose-veil), transparent 60%);
  }
  .menu[hidden] { display: none; }
  .menu nav { display: grid; gap: .25rem; }
  .menu nav a {
    font-family: var(--serif); font-size: clamp(1.8rem, 8vw, 2.6rem); font-weight: 400;
    font-variation-settings: "SOFT" 40, "WONK" 1; letter-spacing: -.02em;
    padding-block: .35rem; border-bottom: 1px solid var(--line-soft);
  }
  .menu nav a:last-child { border-bottom: 0; }
  .menu .btn { justify-self: start; }

  /* ── Botão flutuante ── */
  .fab {
    position: fixed; right: var(--pad); bottom: clamp(1rem, 3vw, 1.75rem);
    z-index: var(--z-fab);
    display: inline-flex; align-items: center; gap: .55rem;
    min-height: 52px; padding: .85rem 1.3rem;
    background: var(--forest); color: var(--on-dark);
    border-radius: 999px; box-shadow: var(--shadow-lg);
    font-size: var(--fs-sm); font-weight: 600;
    opacity: 0; translate: 0 1.5rem; pointer-events: none;
    transition: opacity .35s var(--ease), translate .35s var(--ease), background-color .25s var(--ease);
  }
  .fab .ico { width: 1.35em; height: 1.35em; color: var(--on-dark-rose); }
  .fab[data-show] { opacity: 1; translate: 0 0; pointer-events: auto; }
  .fab:hover { background: var(--forest-2); }
  @media (max-width: 560px) { .fab span { display: none; } .fab { padding: .9rem; } }

  /* ── Cartões de serviço ── */
  .cards {
    display: grid; gap: clamp(1rem, 2vw, 1.5rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
  }
  .card {
    container-type: inline-size;
    display: flex; flex-direction: column; gap: .9rem;
    padding: clamp(1.5rem, 3vw, 2.1rem);
    background: var(--paper-2);
    border: 1px solid var(--line-soft);
    border-top: 1px solid var(--amber);
    border-radius: 2px 2px var(--r-lg) var(--r-lg);
    transition: background-color .3s var(--ease), border-color .3s var(--ease),
                box-shadow .3s var(--ease);
  }
  .card:hover { background: #FBF2EA; box-shadow: var(--shadow-md); border-color: var(--line); }
  .card__ico {
    display: grid; place-items: center; width: 3rem; height: 3rem;
    border-radius: 999px;
    background: var(--rose-veil); color: var(--rose-deep);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--rose-deep) 14%, transparent);
  }
  .card__ico .ico { width: 1.6rem; height: 1.6rem; }
  .card h3 {
    font-family: var(--serif); font-size: var(--fs-h3); font-weight: 500;
    font-variation-settings: "SOFT" 34; line-height: 1.18; letter-spacing: -.015em;
  }
  .card > p { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.62; text-wrap: pretty; }
  .card__list { display: grid; gap: .5rem; padding-block: .35rem; }
  .card__list li {
    position: relative; padding-left: 1.1rem;
    font-size: var(--fs-sm); color: var(--ink-2);
  }
  .card__list li::before {
    content: ""; position: absolute; left: 0; top: .62em;
    width: 5px; height: 5px; rotate: 45deg;
    background: var(--rose);
  }
  .card__pra {
    margin-top: auto; padding-top: 1rem;
    border-top: 1px solid var(--line-soft);
    font-size: var(--fs-sm); color: var(--muted); text-wrap: pretty;
  }
  .card__pra strong { color: var(--gold-text); }

  /* ── FAQ ── */
  .faq { border-top: 1px solid var(--line-soft); max-width: 62ch; }
  .qa { border-bottom: 1px solid var(--line-soft); }
  .qa summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    padding-block: 1.4rem; cursor: pointer; list-style: none;
    font-family: var(--serif); font-size: var(--fs-h3); font-weight: 400;
    font-variation-settings: "SOFT" 30; line-height: 1.28; letter-spacing: -.012em;
    transition: color .2s var(--ease);
  }
  .qa summary:hover { color: var(--rose-deep); }
  .qa summary .ico {
    width: 1.4rem; height: 1.4rem; flex: none; color: var(--gold-text);
    transition: rotate .3s var(--ease), color .2s var(--ease);
  }
  .qa[open] summary .ico { rotate: 135deg; color: var(--rose-deep); }
  .qa[open] summary { color: var(--rose-deep); }
  .qa__c { padding-bottom: 1.6rem; padding-right: clamp(0rem, 4vw, 3rem); }
  .qa__c p { color: var(--ink-2); text-wrap: pretty; }
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    .qa::details-content {
      block-size: 0; overflow: clip; opacity: 0;
      transition: block-size .4s var(--ease-out), opacity .3s var(--ease), content-visibility .4s allow-discrete;
    }
    .qa[open]::details-content { block-size: auto; opacity: 1; }
  }
}

/* ───────────────────────────────────────────────────────── sections ─────── */
@layer sections {

  /* ══ Ondas da papelaria ══
     A forma orgânica e o filete âmbat que corre ao lado dela são o gesto que
     se repete no cartão, no story e no logotipo. Aqui entram bem apagados:
     dão o clima da marca sem disputar com o texto. */
  .onda {
    position: absolute; z-index: 0;
    pointer-events: none;
    width: clamp(11rem, 24%, 20rem); height: auto;
  }
  .onda__forma { fill: currentColor; opacity: .55; }
  .onda__traco { stroke: var(--amber); stroke-width: 1.6; opacity: .38; }

  .onda--topo {
    top: 0; right: 0;
    color: color-mix(in oklab, var(--sage) 26%, transparent);
  }
  .onda--contato {
    bottom: 0; right: 0;
    width: clamp(10rem, 30%, 17rem);
    color: color-mix(in oklab, var(--sage-deep) 42%, transparent);
  }
  .onda--contato .onda__traco { opacity: .34; }

  /* ══ Hero ══ */
  .hero {
    position: relative;
    overflow: clip;
    padding-block: clamp(7.5rem, 15vh, 11rem) clamp(3.5rem, 7vw, 6rem);
    background-image:
      radial-gradient(70% 55% at 88% 6%, var(--rose-veil) 0%, transparent 62%),
      radial-gradient(52% 45% at 4% 92%, color-mix(in oklab, var(--sage) 16%, transparent) 0%, transparent 60%);
  }
  .hero > .wrap { position: relative; z-index: 1; }
  .hero__grid {
    display: grid; gap: clamp(2.75rem, 6vw, 4.5rem);
    align-items: center;
  }
  @media (min-width: 900px) {
    .hero__grid { grid-template-columns: minmax(0, 1.32fr) minmax(0, .88fr); gap: clamp(2.5rem, 5vw, 5rem); }
  }

  .hero__title {
    margin-top: 1.6rem;
    font-family: var(--serif);
    font-size: var(--fs-h1);
    font-weight: 300;
    font-variation-settings: "SOFT" 46, "WONK" 1;
    line-height: .93;
    letter-spacing: -.038em;
    color: var(--ink);
  }
  .hero__title .line { display: block; }
  .hero__title .line--mark { position: relative; width: fit-content; }
  .hero__title .dot { color: var(--rose); }
  .hero__title .line--em {
    display: block; margin-top: .78em;
    font-size: clamp(1.15rem, .55rem + 2.1vw, 2.05rem);
    font-weight: 300; font-style: italic;
    font-variation-settings: "SOFT" 60, "WONK" 1;
    line-height: 1.16; letter-spacing: -.017em;
    color: var(--rose-deep);
  }
  /* Traço abaixo da linha de base, livre das descendentes do "p":
     precisa ler como um sublinhado feito à mão, nunca como um risco. */
  .underline {
    position: absolute; left: -1%; bottom: -.235em;
    width: 102%; height: .2em; overflow: visible;
  }
  .underline path {
    fill: none; stroke: var(--amber); stroke-width: 2.7;
    stroke-linecap: round; opacity: .9;
    stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--draw));
  }

  .hero__lede {
    max-width: 42ch; margin-top: clamp(1.5rem, 3vw, 2.1rem);
    font-size: var(--fs-lead); line-height: 1.58; color: var(--ink-2);
    text-wrap: pretty;
  }
  .hero__actions {
    display: flex; flex-wrap: wrap; gap: .75rem;
    margin-top: clamp(1.75rem, 3.5vw, 2.4rem);
  }
  .hero__trust {
    display: grid; gap: .85rem;
    margin-top: clamp(2.25rem, 4.5vw, 3.25rem);
    padding-top: clamp(1.5rem, 3vw, 2rem);
    border-top: 1px solid var(--line);
    max-width: 40rem;
  }
  @media (min-width: 620px) { .hero__trust { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
  .hero__trust li {
    display: grid; gap: .18rem;
    font-size: var(--fs-sm); font-weight: 600; color: var(--ink);
    line-height: 1.35;
  }
  .hero__trust span {
    font-weight: 400; font-size: var(--fs-micro); color: var(--muted);
    letter-spacing: .01em;
  }

  /* Retrato em arco — ecoa as curvas do cartão sem copiar o desenho */
  .hero__figure { position: relative; justify-self: center; width: min(100%, 27rem); }
  .portrait {
    position: relative;
    border-radius: 14rem 14rem var(--r-md) var(--r-md);
    overflow: hidden;
    background: var(--paper-2);
    box-shadow: var(--shadow-lg);
  }
  .portrait img { width: 100%; }
  .portrait::after {
    content: ""; position: absolute; inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35);
    background: linear-gradient(to top, color-mix(in oklab, var(--paper) 45%, transparent) 0%, transparent 32%);
  }
  /* Moldura dourada deslocada — detalhe de papelaria fina.
     A altura vem do aspect-ratio do retrato (4:5), então a moldura acompanha
     a foto e nunca invade a legenda. */
  .hero__figure::before {
    content: ""; position: absolute; z-index: -1;
    top: -1.15rem; left: 1.15rem; right: -1.15rem;
    aspect-ratio: 4 / 5;
    border: 1px solid var(--amber);
    border-radius: 14rem 14rem var(--r-md) var(--r-md);
    opacity: .5;
  }
  .portrait__tag {
    display: grid; gap: .3rem; margin-top: 1.35rem; text-align: center;
  }
  .portrait__quote {
    font-family: var(--serif); font-style: italic; font-weight: 400;
    font-size: clamp(1.1rem, .9rem + .7vw, 1.4rem);
    font-variation-settings: "SOFT" 60, "WONK" 1;
    color: var(--rose-deep); letter-spacing: -.01em;
  }
  .portrait__name {
    font-size: var(--fs-micro); font-weight: 600; letter-spacing: .13em;
    text-transform: uppercase; color: var(--muted);
  }

  /* ══ Sinais ══ */
  .section--sinais { background: linear-gradient(to bottom, transparent, var(--paper-2) 22%, var(--paper-2) 78%, transparent); }

  .sinais { border-top: 1px solid var(--line); }
  .sinais__legend {
    display: none;
    font-size: var(--fs-micro); font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: var(--gold-text);
    padding-block: 1rem .35rem;
  }
  .sinal {
    display: grid; gap: .5rem;
    padding-block: clamp(1.3rem, 2.4vw, 1.7rem);
    border-bottom: 1px solid var(--line-soft);
  }
  .sinal dt {
    font-family: var(--serif); font-style: italic; font-weight: 400;
    font-size: clamp(1.15rem, 1rem + .85vw, 1.65rem);
    font-variation-settings: "SOFT" 55, "WONK" 1;
    line-height: 1.24; letter-spacing: -.016em;
    color: var(--rose-deep);
    text-wrap: balance;
  }
  .sinal dd { font-size: var(--fs-sm); line-height: 1.62; color: var(--ink-2); text-wrap: pretty; }
  @media (min-width: 860px) {
    .sinais__legend, .sinal {
      display: grid;
      grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
      gap: clamp(1.5rem, 3.5vw, 3.5rem);
      align-items: baseline;
    }
    .sinal dd { padding-top: .25rem; }
  }
  .sinais__close {
    display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem;
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
    font-size: var(--fs-lead); color: var(--ink);
  }

  /* ══ Sobre ══ */
  .section--sobre {
    background: var(--forest);
    background-image:
      radial-gradient(60% 50% at 92% 4%, color-mix(in oklab, var(--sage-deep) 42%, transparent), transparent 65%),
      radial-gradient(46% 42% at 2% 96%, color-mix(in oklab, var(--rose-deep) 26%, transparent), transparent 62%);
    color: var(--on-dark-2);
  }
  .section--sobre .runner { color: var(--gold-soft); }
  .section--sobre .runner > span::before { background: var(--gold-soft); }

  .sobre { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
  @media (min-width: 940px) {
    .sobre { grid-template-columns: minmax(0, 1.05fr) minmax(0, .85fr); align-items: start; }
  }
  .sobre__texto > .h2 { margin-block: 1.4rem clamp(1.5rem, 3vw, 2rem); }
  .sobre__texto p { color: var(--on-dark-2); line-height: 1.72; text-wrap: pretty; }
  .sobre__texto p + p { margin-top: 1.1rem; }
  .sobre__texto strong { color: var(--on-dark); font-weight: 600; }
  .sobre__texto em { color: var(--on-dark-rose); }

  .pull {
    position: relative;
    margin-top: clamp(2rem, 4vw, 2.75rem);
    padding-left: clamp(1.25rem, 3vw, 2rem);
    padding-right: clamp(0rem, 6vw, 3.5rem);
    border-left: 2px solid var(--amber);
  }
  /* O ramo do logotipo, exatamente onde a marca o usa: ao lado do lema. */
  .pull__ramo {
    position: absolute; right: 0; top: 50%;
    translate: 0 -50%;
    width: clamp(1.35rem, 2.6vw, 1.75rem); height: auto;
    opacity: .6;
  }
  @media (max-width: 780px) { .pull__ramo { display: none; } }
  .pull p {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.5rem);
    font-variation-settings: "SOFT" 70, "WONK" 1;
    line-height: 1.1; letter-spacing: -.026em;
    color: var(--on-dark-rose);
  }
  .pull cite {
    display: block; margin-top: .85rem; font-style: normal;
    font-size: var(--fs-micro); font-weight: 600; letter-spacing: .13em;
    text-transform: uppercase; color: var(--gold-soft);
  }

  .sobre__foto {
    width: min(100%, 15rem); margin-bottom: 2.25rem;
    border-radius: var(--r-lg); overflow: hidden;
    border: 1px solid var(--line-dark);
    box-shadow: var(--shadow-lg);
  }
  @media (min-width: 940px) { .sobre__foto { width: min(100%, 13.5rem); margin-left: auto; } }

  .creds { display: grid; }
  .creds li {
    display: grid; gap: .2rem;
    padding-block: 1rem;
    border-bottom: 1px solid var(--line-dark);
  }
  .creds li:last-child { border-bottom: 0; }
  .creds__ano {
    font-size: var(--fs-micro); font-weight: 600; letter-spacing: .14em;
    color: var(--gold-soft);
  }
  .creds__nome { font-size: var(--fs-sm); font-weight: 600; color: var(--on-dark); line-height: 1.4; }
  .creds__inst { font-size: var(--fs-micro); color: var(--on-dark-2); opacity: .85; }
  .creds__now .creds__ano { color: var(--on-dark-rose); }
  .creds__now .creds__nome::after {
    content: ""; display: inline-block; vertical-align: middle;
    width: 6px; height: 6px; margin-left: .5rem; border-radius: 999px;
    background: var(--on-dark-rose);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--on-dark-rose) 25%, transparent);
  }

  /* ══ Percurso ══ */
  .percurso { display: grid; }
  .etapa {
    position: relative;
    display: grid; gap: .5rem 1.5rem;
    grid-template-columns: auto minmax(0, 1fr);
    padding-block: clamp(1.5rem, 3vw, 2.25rem);
  }
  .etapa::before {
    content: ""; position: absolute;
    left: calc(clamp(2.6rem, 6vw, 4.2rem) / 2 - .5px);
    top: 0; bottom: 0; width: 1px;
    background: var(--line);
  }
  .etapa:first-child::before { top: clamp(1.5rem, 3vw, 2.25rem); }
  .etapa:last-child::before { bottom: calc(100% - clamp(1.5rem, 3vw, 2.25rem) - 2.6rem); }
  .etapa__n {
    position: relative; z-index: 1;
    display: grid; place-items: center;
    width: clamp(2.6rem, 6vw, 4.2rem); height: clamp(2.6rem, 6vw, 4.2rem);
    border-radius: 999px;
    background: var(--paper); border: 1px solid var(--line);
    font-family: var(--serif); font-size: clamp(.85rem, .7rem + .5vw, 1.15rem);
    font-weight: 500; font-variation-settings: "SOFT" 20;
    color: var(--gold-text); letter-spacing: .02em;
  }
  .etapa__c { padding-top: .35rem; }
  .etapa__c h3 {
    font-family: var(--serif); font-size: var(--fs-h3); font-weight: 500;
    font-variation-settings: "SOFT" 34; line-height: 1.16; letter-spacing: -.017em;
    color: var(--ink);
  }
  .etapa__meta {
    margin-top: .3rem; margin-bottom: .75rem;
    font-size: var(--fs-micro); font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted);
  }
  .etapa__c > p:last-child {
    max-width: 56ch;   /* ~70 caracteres por linha */
    font-size: var(--fs-sm); line-height: 1.65; color: var(--ink-2); text-wrap: pretty;
  }
  .etapa__c em { color: var(--rose-deep); font-style: italic; }

  /* ══ Serviços ══ */
  .section--servicos { background: linear-gradient(to bottom, transparent, var(--paper-2) 30%); }

  /* ══ Contato ══ */
  .section--contato {
    padding-block: 0 var(--sec-y);
    background: linear-gradient(to bottom, var(--paper-2) 0 30%, var(--paper) 30%);
  }
  .contato {
    position: relative;
    overflow: clip;
    display: grid; gap: clamp(2.5rem, 5vw, 4rem);
    padding: clamp(2.25rem, 5vw, 4.25rem);
    border-radius: var(--r-lg);
    background: var(--forest);
    background-image:
      radial-gradient(58% 62% at 96% 8%, color-mix(in oklab, var(--rose-deep) 34%, transparent), transparent 64%),
      radial-gradient(50% 50% at 0% 100%, color-mix(in oklab, var(--sage-deep) 40%, transparent), transparent 62%);
    color: var(--on-dark-2);
    box-shadow: var(--shadow-lg);
  }
  @media (min-width: 900px) {
    .contato { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(2.5rem, 5vw, 5rem); }
  }
  /* Monograma como marca d'água — presente, nunca protagonista. */
  .contato__marca {
    position: absolute; z-index: 0;
    right: clamp(-2rem, -1vw, -1rem); bottom: clamp(-2.5rem, -2vw, -1.5rem);
    width: clamp(9rem, 20%, 14rem); height: auto;
    opacity: .12;
  }
  .contato > :not(.onda):not(.contato__marca) { position: relative; z-index: 1; }
  .contato__copy > .h2 { margin-block: 1.2rem 1.35rem; }
  .contato__lede { max-width: 40ch; line-height: 1.68; margin-bottom: 2rem; text-wrap: pretty; }
  .contato__nota {
    margin-top: 1.1rem; font-size: var(--fs-micro);
    letter-spacing: .1em; text-transform: uppercase; color: var(--gold-soft);
  }
  .contato .btn--wa { --btn-bg: var(--on-dark-rose); --btn-fg: #2A1416; --btn-bd: var(--on-dark-rose); }
  .contato .btn--wa:hover { --btn-bg: #F2CFCC; --btn-bd: #F2CFCC; }

  .contato__lista { display: grid; gap: .25rem; }
  .contato__lista li { border-bottom: 1px solid var(--line-dark); }
  .contato__lista li:last-child { border-bottom: 0; }
  .contato__lista a, .contato__lista div {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    gap: .1rem 1rem; align-items: center;
    padding: 1.05rem .5rem;
    border-radius: var(--r-sm);
    transition: background-color .22s var(--ease);
  }
  .contato__lista a:hover { background: rgb(255 255 255 / .05); }
  .contato__lista .ico { grid-row: span 2; width: 1.5rem; height: 1.5rem; color: var(--gold-soft); }
  .contato__rot {
    font-size: var(--fs-micro); font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: var(--gold-soft);
  }
  .contato__val { font-size: var(--fs-sm); color: var(--on-dark); line-height: 1.45; overflow-wrap: anywhere; }
  .contato__val small { font-size: var(--fs-micro); color: var(--on-dark-2); opacity: .8; }

  /* ══ Rodapé ══ */
  .rodape { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(4.5rem, 7vw, 4rem); border-top: 1px solid var(--line-soft); }
  .rodape__in { display: grid; gap: 1.75rem; }
  @media (min-width: 820px) {
    .rodape__in { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
    .rodape__fim { grid-column: 1 / -1; }
  }
  .rodape__nome { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }
  .rodape__nome strong { font-family: var(--serif); font-size: 1.15rem; font-weight: 500; font-variation-settings: "SOFT" 40; color: var(--ink); }
  .rodape__links { display: flex; flex-wrap: wrap; gap: 0 1.4rem; margin-block: -.55rem; }
  .rodape__links a {
    display: inline-flex; align-items: center; min-height: 44px;
    font-size: var(--fs-sm); color: var(--ink-2);
    box-shadow: 0 1px 0 transparent;
    transition: color .2s var(--ease), box-shadow .2s var(--ease);
  }
  .rodape__links a:hover { color: var(--rose-deep); box-shadow: 0 1px 0 var(--rose-deep); }
  .rodape__fim {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem;
    padding-top: 1.5rem; border-top: 1px solid var(--line-soft);
    font-size: var(--fs-micro); color: var(--muted);
  }
  .rodape__aviso { max-width: 46ch; opacity: .85; }
}

/* ─────────────────────────────────────────────────────────── motion ─────── */
@layer motion {
  /* Entrada do herói: a linha se assenta e o traço dourado é desenhado.
     É o único momento coreografado da página. */
  @keyframes settle {
    from { opacity: 0; translate: 0 .34em; rotate: -1.1deg; filter: blur(5px); }
    to   { opacity: 1; translate: 0 0; rotate: 0deg; filter: blur(0); }
  }
  @keyframes draw { to { --draw: 1; } }
  @keyframes rise {
    from { opacity: 0; translate: 0 1.4rem; }
    to   { opacity: 1; translate: 0 0; }
  }

  .hero__title .line,
  .hero__lede,
  .hero__actions,
  .hero__trust,
  .hero .eyebrow,
  .hero__figure {
    animation: settle .85s var(--ease-out) backwards;
  }
  .hero .eyebrow           { animation-delay: .05s; }
  .hero__title .line:nth-child(1) { animation-delay: .14s; }
  .hero__title .line:nth-child(2) { animation-delay: .24s; }
  .hero__title .line:nth-child(3) { animation-delay: .36s; }
  .hero__lede              { animation-delay: .46s; }
  .hero__actions           { animation-delay: .54s; }
  .hero__trust             { animation-delay: .62s; }
  .hero__figure            { animation: rise 1.1s var(--ease-out) .2s backwards; }

  .underline path { animation: draw .9s var(--ease-out) .72s both; }

  /* Revelação por rolagem.
     Conduzida por IntersectionObserver e não por animation-timeline: view():
     numa timeline de view() os elementos próximos ao fim do documento nunca
     completam o intervalo e ficam presos meio transparentes. */
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      opacity: 0; translate: 0 1.4rem;
      transition: opacity .7s var(--ease-out), translate .7s var(--ease-out);
    }
    .reveal[data-seen] { opacity: 1; translate: 0 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
    }
    .underline path { --draw: 1; }
    .reveal { opacity: 1; translate: none; }
    .spine__thread { display: none; }
  }
}

/* ──────────────────────────────────────────────────────────── utils ─────── */
@layer utils {
  .visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  /* Trava a rolagem do corpo enquanto o menu móvel estiver aberto */
  body:has(.menu:not([hidden])) { overflow: hidden; }
  /* Esconde o botão flutuante quando a seção de contato está à vista */
  body:has(.menu:not([hidden])) .fab { opacity: 0; pointer-events: none; }
}

/* ═══════════════════════════════════════════════════════════ blog ════════
   As páginas de artigo reaproveitam o mesmo sistema: papel, tinta oliva,
   Fraunces no display e o filete âmbar como único acento.
   ====================================================================== */
@layer sections {

  /* Barra fixa nas páginas internas: sempre com fundo, porque o conteúdo
     começa logo abaixo dela. */
  .nav--interna {
    background: color-mix(in oklab, var(--paper) 88%, transparent);
    backdrop-filter: blur(14px) saturate(1.5);
    border-bottom-color: var(--line-soft);
  }

  .migalhas {
    display: flex; align-items: center; gap: .1rem;
    font-size: var(--fs-micro); font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted);
    margin-block: -.5rem clamp(1.5rem, 3.5vw, 2.5rem);
  }
  .migalhas a {
    display: inline-flex; align-items: center; min-height: 32px;
    transition: color .2s var(--ease);
  }
  .migalhas a:hover { color: var(--rose-deep); }
  .migalhas i { color: var(--taupe); }

  /* ── Capa do blog ── */
  .blog-capa {
    position: relative;
    overflow: clip;
    padding-block: clamp(7rem, 14vh, 10rem) clamp(2.5rem, 5vw, 4rem);
    background-image:
      radial-gradient(66% 52% at 90% 4%, var(--rose-veil) 0%, transparent 60%),
      radial-gradient(48% 42% at 2% 96%, color-mix(in oklab, var(--sage) 15%, transparent) 0%, transparent 58%);
  }
  .blog-capa > .wrap { position: relative; z-index: 1; }
  .blog-capa__titulo {
    margin-top: 1.4rem;
    font-family: var(--serif);
    font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.2rem);
    font-weight: 300;
    font-variation-settings: "SOFT" 46, "WONK" 1;
    line-height: .98; letter-spacing: -.032em;
    text-wrap: balance;
  }
  .blog-capa__lede {
    max-width: 54ch; margin-top: clamp(1.4rem, 3vw, 2rem);
    font-size: var(--fs-lead); line-height: 1.6;
    color: var(--ink-2); text-wrap: pretty;
  }

  /* ── Lista de artigos ── */
  .blog-lista { padding-top: clamp(2rem, 4vw, 3rem); }
  .grupo + .grupo { margin-top: clamp(3rem, 6vw, 5rem); }
  .grupo__titulo {
    font-size: var(--fs-micro); font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--gold-text);
    padding-bottom: .85rem;
    border-bottom: 1px solid var(--line);
  }
  .posts { display: grid; }
  .post { border-bottom: 1px solid var(--line-soft); }
  .post > a {
    display: grid; gap: .45rem;
    padding-block: clamp(1.35rem, 2.6vw, 1.9rem);
    max-width: 40rem;
  }
  .post__titulo {
    font-family: var(--serif);
    font-size: clamp(1.2rem, 1rem + .95vw, 1.75rem);
    font-weight: 400; font-variation-settings: "SOFT" 34, "WONK" 1;
    line-height: 1.2; letter-spacing: -.018em;
    color: var(--ink);
    transition: color .2s var(--ease);
  }
  .post > a:hover .post__titulo { color: var(--rose-deep); }
  .post__resumo { max-width: 33rem; font-size: var(--fs-sm); line-height: 1.62; color: var(--ink-2); text-wrap: pretty; }
  .post__meta {
    font-size: var(--fs-micro); font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  }

  /* ── Página de artigo ── */
  .artigo { padding-block: clamp(7rem, 13vh, 9.5rem) clamp(3rem, 6vw, 5rem); }


  .artigo__titulo {
    margin-top: 1.1rem;
    font-family: var(--serif);
    font-size: clamp(2rem, 1.3rem + 2.9vw, 3.5rem);
    font-weight: 300;
    font-variation-settings: "SOFT" 46, "WONK" 1;
    line-height: 1.02; letter-spacing: -.03em;
    text-wrap: balance;
  }
  .artigo__resumo {
    margin-top: clamp(1.1rem, 2.4vw, 1.6rem);
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: clamp(1.15rem, 1rem + .8vw, 1.55rem);
    font-variation-settings: "SOFT" 58, "WONK" 1;
    line-height: 1.32; letter-spacing: -.014em;
    color: var(--rose-deep);
    text-wrap: pretty;
  }
  .artigo__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: .2rem;
    margin-top: clamp(1.4rem, 3vw, 2rem);
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
    font-size: var(--fs-micro); font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  }

  .artigo__corpo { margin-top: clamp(2.25rem, 5vw, 3.25rem); }
  .artigo__corpo > * + * { margin-top: 1.15rem; }
  .artigo__corpo p { font-size: 1.075rem; line-height: 1.72; color: var(--ink-2); text-wrap: pretty; }
  .artigo__corpo h2 {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    font-family: var(--serif);
    font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2rem);
    font-weight: 400; font-variation-settings: "SOFT" 36, "WONK" 1;
    line-height: 1.14; letter-spacing: -.02em; color: var(--ink);
    text-wrap: balance;
  }
  .artigo__corpo h3 {
    margin-top: clamp(1.8rem, 3.5vw, 2.4rem);
    font-family: var(--serif);
    font-size: var(--fs-h3); font-weight: 500;
    font-variation-settings: "SOFT" 30;
    line-height: 1.2; letter-spacing: -.014em; color: var(--ink);
  }
  .artigo__corpo strong { color: var(--ink); font-weight: 600; }
  .artigo__corpo em { color: var(--ink); }
  .artigo__corpo a {
    color: var(--rose-deep); font-weight: 600;
    box-shadow: 0 1px 0 color-mix(in oklab, var(--rose-deep) 40%, transparent);
    transition: box-shadow .2s var(--ease);
  }
  .artigo__corpo a:hover { box-shadow: 0 1px 0 var(--rose-deep); }
  .artigo__corpo ul, .artigo__corpo ol { display: grid; gap: .6rem; margin-top: 1.1rem; }
  .artigo__corpo li {
    position: relative; padding-left: 1.5rem;
    font-size: 1.02rem; line-height: 1.66; color: var(--ink-2);
  }
  .artigo__corpo ul li::before {
    content: ""; position: absolute; left: .1rem; top: .68em;
    width: 5px; height: 5px; rotate: 45deg; background: var(--rose);
  }
  .artigo__corpo ol { counter-reset: passo; }
  .artigo__corpo ol li { counter-increment: passo; }
  .artigo__corpo ol li::before {
    content: counter(passo); position: absolute; left: 0; top: .04em;
    font-family: var(--serif); font-size: .82em; font-weight: 500;
    color: var(--gold-text);
  }
  .artigo__corpo blockquote {
    margin-top: 1.6rem; padding-left: 1.25rem;
    border-left: 2px solid var(--amber);
    font-family: var(--serif); font-style: italic;
    font-size: 1.2rem; color: var(--ink);
  }

  /* ── FAQ do artigo ── */
  .artigo__faq { margin-top: clamp(2.75rem, 5vw, 4rem); }
  .artigo__faq .faq { border-top: 0; }
  .artigo__faq .qa summary { font-size: var(--fs-h3); padding-block: 1.15rem; }
  .artigo__faq .qa summary .ico { rotate: 90deg; transition: rotate .3s var(--ease); }
  .artigo__faq .qa[open] summary .ico { rotate: 270deg; }
  .mini-title--papel { color: var(--gold-text); border-bottom-color: var(--line); }

  /* ── Chamada no fim do artigo ── */
  .cta-artigo {
    margin-top: clamp(2.75rem, 5vw, 4rem);
    padding: clamp(1.6rem, 4vw, 2.5rem);
    border-radius: var(--r-lg);
    border: 1px solid var(--line-soft);
    border-top: 1px solid var(--amber);
    background: var(--paper-2);
  }
  .cta-artigo__olho {
    font-family: var(--serif); font-size: var(--fs-h3); font-weight: 500;
    font-variation-settings: "SOFT" 34; letter-spacing: -.015em;
    color: var(--ink); margin-bottom: .6rem;
  }
  .cta-artigo p { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.62; }
  .cta-artigo .btn { margin-top: 1.35rem; }

  /* ── Relacionados ── */
  .relacionados { margin-top: clamp(2.75rem, 5vw, 4rem); }
  .relacionados ul { display: grid; gap: 0; }
  .relacionados li { border-bottom: 1px solid var(--line-soft); }
  .relacionados a { display: grid; gap: .25rem; padding-block: 1.1rem; }
  .rel__cat {
    font-size: var(--fs-micro); font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text);
  }
  .rel__tit {
    font-family: var(--serif); font-size: 1.15rem; font-weight: 400;
    font-variation-settings: "SOFT" 34; line-height: 1.28; color: var(--ink);
    transition: color .2s var(--ease);
  }
  .relacionados a:hover .rel__tit { color: var(--rose-deep); }
}

/* ── Ajustes do blog: identidade, autoria e navegação por assunto ───────── */
@layer sections {

  /* A coluna de leitura fica ancorada na espinha, como no resto do site,
     em vez de flutuar centralizada num vazio. */
  .artigo { position: relative; overflow: clip; }
  .artigo > .wrap { position: relative; z-index: 1; }
  .artigo__col { max-width: 39rem; }   /* ~72 caracteres por linha */

  .artigo .runner { color: var(--gold-text); }

  /* ── Bloco de autora: quem escreveu, com rosto ── */
  .autora {
    display: grid; gap: 1.1rem;
    margin-top: clamp(2.75rem, 5vw, 4rem);
    padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
    border-top: 1px solid var(--line);
  }
  @media (min-width: 560px) {
    .autora { grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem; align-items: start; }
  }
  .autora__foto {
    width: 5rem; height: 5rem; border-radius: 999px;
    object-fit: cover; object-position: center 18%;
    border: 1px solid var(--line);
  }
  .autora__nome {
    font-family: var(--serif); font-size: 1.3rem; font-weight: 500;
    font-variation-settings: "SOFT" 36; letter-spacing: -.015em; color: var(--ink);
  }
  .autora__cargo {
    font-size: var(--fs-micro); font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; color: var(--gold-text); margin-top: .15rem;
  }
  .autora__bio {
    margin-top: .7rem; font-size: var(--fs-sm); line-height: 1.62; color: var(--ink-2);
    text-wrap: pretty;
  }
  .autora__bio a {
    color: var(--rose-deep); font-weight: 600; white-space: nowrap;
    box-shadow: 0 1px 0 color-mix(in oklab, var(--rose-deep) 40%, transparent);
    transition: box-shadow .2s var(--ease);
  }
  .autora__bio a:hover { box-shadow: 0 1px 0 var(--rose-deep); }

  /* ── Sumário de assuntos na margem do índice ── */
  .sumario { font-size: var(--fs-sm); }
  .sumario__titulo {
    font-size: var(--fs-micro); font-weight: 600; letter-spacing: .16em;
    text-transform: uppercase; color: var(--gold-text);
    padding-bottom: .7rem; border-bottom: 1px solid var(--line); margin-bottom: .35rem;
  }
  .sumario ul { display: grid; }
  .sumario a {
    display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
    min-height: 40px; padding-block: .35rem;
    color: var(--ink-2); line-height: 1.3;
    transition: color .2s var(--ease);
  }
  .sumario a:hover { color: var(--rose-deep); }
  .sumario a span {
    font-size: var(--fs-micro); font-variant-numeric: tabular-nums;
    color: var(--muted); flex: none;
  }
  @media (min-width: 1080px) {
    .sumario { position: sticky; top: 7.5rem; align-self: start; }
    /* A margem padrão (100px) é curta para nomes como "Raciocínio
       lógico-matemático": aqui ela precisa de mais espaço. */
    .blog-lista .section__grid {
      grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr);
      gap: clamp(2rem, 3.5vw, 3.5rem);
    }
  }
  @media (max-width: 1079.98px) {
    .sumario {
      margin-bottom: 1rem;
      padding-bottom: .5rem;
    }
    .sumario ul { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0 1.5rem; }
  }

  /* ── Grupos com contagem ── */
  .grupo__titulo {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  }
  .grupo__titulo span {
    font-weight: 400; letter-spacing: .08em; color: var(--muted);
    font-variant-numeric: tabular-nums;
  }
  :where(.grupo) { scroll-margin-top: 7rem; }

  /* A lista agora vive na coluna de conteúdo, então pode ocupar a largura dela. */
  .post > a { max-width: 42rem; }
}

/* ── Pontes da home para os artigos ─────────────────────────────────────── */
@layer sections {
  /* display:flex (e não inline-flex) joga o link para a própria linha, mesmo
     estando dentro do parágrafo, e mantém o alvo de toque em 28px. */
  .sinal__link, .qa__link {
    display: flex; width: fit-content; align-items: center; gap: .3rem;
    font-size: var(--fs-micro); font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--rose-deep);
    min-height: 28px;
    transition: gap .2s var(--ease);
  }
  .sinal__link::after, .qa__link::after {
    content: "→"; font-size: 1.15em; line-height: 1;
  }
  .sinal__link:hover, .qa__link:hover { gap: .55rem; }
  .sinal__link { margin-top: .5rem; }
  .qa__link {
    margin-top: 1rem; text-transform: none; letter-spacing: .01em;
    font-size: var(--fs-sm);
  }
}