/* ==================================================== fontes */

/* gerado por scripts/prep-assets.py — não editar à mão */
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/CormorantGaramond-italic-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/CormorantGaramond-normal-300.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/CormorantGaramond-normal-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/Poppins-normal-300.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/Poppins-normal-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/Poppins-normal-500.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ==================================================== base */

/* ============================================================ tokens
   Paleta e tipografia definidas pela própria Franciely no manual de marca. */
:root{
  color-scheme: only light;
  --cream:#F5F1EA;
  --paper:#FFFDF9;
  --sand:#EBE4D8;
  --ink:#4A433D;
  --clay:#7A726A;
  --moss:#5F6F52;
  --moss-deep:#47543C;   /* faixas inteiras: texto creme passa AA com folga */
  --on-moss:#EFEADF;
  --on-moss-dim:rgba(239,234,223,.78);
  --hair:rgba(122,114,106,.16);
  --hair-moss:rgba(239,234,223,.2);

  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Poppins',system-ui,-apple-system,sans-serif;

  --shell:min(1160px, 100% - 2.5rem);
  --gap-sec:clamp(4rem,8vw,7rem);
  --r-card:24px;
  --shadow:0 1px 2px rgba(74,67,61,.04), 0 14px 34px -20px rgba(74,67,61,.18);
}
/* a marca é bege: tema claro assumido de propósito, nas duas direções */
:root[data-theme="dark"],:root[data-theme="light"]{color-scheme:only light}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--cream);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--cream);color:var(--clay);
  font-family:var(--sans);font-weight:300;font-size:1rem;line-height:1.78;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:400;color:var(--ink);
  text-wrap:balance;line-height:1.14}
p{margin:0}
figure,figcaption{margin:0}   /* o UA stylesheet dá margin-inline:40px em figure */
ol,ul{margin:0;padding:0;list-style:none}

:where(a,button,summary):focus-visible{outline:2px solid var(--moss);outline-offset:3px}

/* ============================================================ utilidades */
.shell{width:var(--shell);margin-inline:auto}
.eyebrow{
  font-size:.6875rem;text-transform:uppercase;letter-spacing:.24em;font-weight:400;
  color:var(--moss);display:flex;align-items:center;gap:.6rem;
}
.leaf{width:14px;height:14px;flex:none;color:var(--moss)}
.eyebrow .leaf{width:14px;height:14px;flex:none}

.sec{padding-block:var(--gap-sec)}
.sec-head{display:flex;flex-direction:column;gap:.9rem;max-width:34rem;
  margin-bottom:clamp(2.25rem,4vw,3.25rem)}
.sec-head h2{font-size:clamp(1.8rem,3.3vw,2.6rem)}
.sec-head p{font-size:1.0625rem}
.sec-head.mid{margin-inline:auto;text-align:center;align-items:center;max-width:38rem}
.sec-head.mid .eyebrow{justify-content:center}

/* faixas de cor */
.on-moss{background:var(--moss-deep);color:var(--on-moss-dim);position:relative;overflow:hidden}
.on-moss h2,.on-moss h3{color:var(--on-moss)}
.on-moss .eyebrow{color:var(--on-moss);opacity:.82}
.on-moss .leaf{color:var(--on-moss)}
.band-paper{background:var(--paper)}
.band-sand{background:var(--sand)}

/* cards de canto macio — sem barra de acento; a folha é o marcador */
.card{
  background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-card);
  padding:clamp(1.5rem,2.4vw,2rem);box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:.8rem;
}
.on-moss .card{background:rgba(239,234,223,.07);border-color:var(--hair-moss);box-shadow:none}

/* ============================================================ botões */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;flex:none;
  font-family:var(--sans);font-weight:500;font-size:.8125rem;letter-spacing:.06em;
  text-decoration:none;cursor:pointer;border-radius:999px;
  padding:.95rem 1.7rem;border:1px solid var(--moss);background:var(--moss);color:#FBF9F4;
  transition:background .28s ease,border-color .28s ease,color .28s ease,transform .28s ease;
}
.btn:hover{background:var(--moss-deep);border-color:var(--moss-deep);transform:translateY(-1px)}
.btn svg{width:16px;height:16px;flex:none}
.btn-cream{background:var(--on-moss);border-color:var(--on-moss);color:var(--moss-deep)}
.btn-cream:hover{background:#fff;border-color:#fff;color:var(--moss-deep)}
.btn-line{background:transparent;border-color:rgba(239,234,223,.55);color:var(--on-moss)}
.btn-line:hover{background:rgba(239,234,223,.12);border-color:var(--on-moss);color:var(--on-moss)}

/* ============================================================ movimento
   O reveal só existe quando há JavaScript. Sem a classe .js — script quebrado,
   bloqueado, ou antes de rodar — o conteúdo aparece normalmente. Sem essa
   guarda, uma falha de JS deixaria a página inteira invisível. */
.js .rise{opacity:0;transform:translateY(16px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1)}
.js .rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* precisa casar a especificidade de `.js .rise`, senão o opacity:0 vence
     e quem pede menos movimento fica com a página em branco */
  .js .rise{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

@media (max-width:760px){
  :root{--shell:min(1160px, 100% - 2rem);--r-card:20px}
}

/* ==================================================== home */

/* ---------------------------------------------------------------- hero */
  /* a foto é retrato: esticá-la para cobrir uma faixa landscape ampliaria
     demais e cortaria o rosto — por isso ela entra contida na coluna */
  .hero {
    position: relative; overflow: hidden; background: var(--moss-deep);
    padding-block: clamp(3rem, 6vw, 5rem) clamp(5rem, 9vw, 7.5rem);
  }
  .hero-grid {
    position: relative; display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
    gap: clamp(2rem, 5vw, 4rem); align-items: center;
  }
  .hero-fig { position: relative }
  .hero-fig img {
    width: 100%; height: auto; aspect-ratio: 1 / 1.12; object-fit: cover;
    border-radius: 28px;
  }
  .hero-fig::after {   /* véu quente, para a foto assentar no verde */
    content: ''; position: absolute; inset: 0; border-radius: 28px; pointer-events: none;
    background: linear-gradient(200deg, rgba(71, 84, 60, 0) 45%, rgba(71, 84, 60, .35) 100%);
  }
  .hero-in {
    /* 38rem: abaixo disso os dois CTAs não cabem lado a lado e quebram linha */
    position: relative; max-width: 38rem; display: flex; flex-direction: column; gap: 1.5rem;
  }
  .hero-in .eyebrow { color: var(--on-moss); opacity: .85 }
  .hero-in .leaf { color: var(--on-moss) }
  .hero h1 {
    font-size: clamp(2.1rem, 4.4vw, 3.5rem); line-height: 1.1; color: var(--on-moss);
    font-weight: 300; letter-spacing: -.005em;
  }
  .hero h1 em { font-style: italic; color: #fff }
  .hero-lede {
    font-size: 1.0625rem; line-height: 1.85; color: rgba(239, 234, 223, .88); max-width: 40ch;
  }
  .hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .4rem }

  /* marca botânica de fundo */
  .watermark {
    position: absolute; pointer-events: none; opacity: .07;
    background-color: var(--on-moss);
    left: -16%; top: -18%; width: min(560px, 58vw); aspect-ratio: 620 / 786;
    -webkit-mask: url('/monograma.png') center/contain no-repeat;
    mask: url('/monograma.png') center/contain no-repeat;
  }
  .watermark-moss { right: -14%; top: -10%; left: auto; width: min(620px, 70vw) }
  .watermark-esq { left: -12%; bottom: -24%; top: auto; right: auto; width: min(520px, 64vw) }

  /* ------------------------------------------------------- credibilidade */
  .creds { position: relative; z-index: 3; margin-top: clamp(-4.5rem, -5vw, -3rem) }
  .creds-card {
    background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-card);
    box-shadow: var(--shadow); display: grid; grid-template-columns: repeat(4, 1fr);
    overflow: hidden;
  }
  .creds-card li {
    padding: 1.5rem 1.35rem; display: flex; flex-direction: column; gap: .25rem;
    text-align: center; border-left: 1px solid var(--hair);
  }
  .creds-card li:first-child { border-left: 0 }
  .creds-k { font-family: var(--serif); font-size: 1.3125rem; color: var(--ink); line-height: 1.2 }
  .creds-v {
    font-size: .625rem; text-transform: uppercase; letter-spacing: .18em; opacity: .75;
  }

  /* --------------------------------------------------------------- sobre */
  .about {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2rem, 5vw, 4rem); align-items: center;
  }
  .about-invertido { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) }
  .about-body { display: flex; flex-direction: column; gap: 1.35rem }
  .about-body h2 { font-size: clamp(1.8rem, 3.3vw, 2.6rem); margin-bottom: .2rem }
  .about-body p { font-size: 1.0625rem; line-height: 1.88; max-width: 56ch }
  .formacao {
    font-size: .9375rem !important; padding-top: 1.1rem; border-top: 1px solid var(--hair);
    opacity: .9;
  }
  .sig {
    font-family: var(--serif); font-style: italic; font-size: 1.4375rem; color: var(--moss);
    padding-top: .2rem;
  }
  .about-fig img {
    width: 100%; height: auto; aspect-ratio: 1 / 1.18; object-fit: cover;
    border-radius: 28px; box-shadow: var(--shadow);
  }

  /* ---------------------------------------------------------- como trabalho */
  .metodo {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
  }
  .metodo h3 { font-size: 1.3125rem }
  .metodo p { font-size: .9375rem; line-height: 1.8 }

  /* ------------------------------------------------------------ para quem */
  .chips { display: flex; flex-wrap: wrap; gap: .7rem }
  .chips li {
    display: flex; align-items: center; gap: .55rem; border: 1px solid var(--hair);
    border-radius: 999px; padding: .7rem 1.2rem; background: var(--paper);
    font-size: .9375rem; color: var(--ink);
    transition: border-color .25s ease, background .25s ease;
  }
  .chips li:hover { border-color: var(--moss); background: #fff }

  .nota {
    margin-top: clamp(1.75rem, 3vw, 2.5rem); display: flex; gap: 1rem; align-items: flex-start;
    max-width: 68ch; padding: 1.4rem 1.6rem; background: rgba(95, 111, 82, .07);
    border-radius: 18px;
  }
  .nota p { font-size: .9375rem; line-height: 1.8 }
  .nota .leaf { transform: translateY(5px) }

  /* --------------------------------------------------------- como funciona */
  .passos {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
  }
  .passos-n {
    width: 2.1rem; height: 2.1rem; border-radius: 999px; background: rgba(95, 111, 82, .12);
    color: var(--moss); display: grid; place-items: center; font-size: .8125rem;
    font-weight: 500; font-variant-numeric: tabular-nums;
  }
  .passos h3 { font-size: 1.25rem }
  .passos p { font-size: .9375rem; line-height: 1.8 }

  /* ----------------------------------------------------------- princípios */
  .tenets {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
  }
  .tenets h3 { font-size: 1.1875rem; display: flex; align-items: center; gap: .55rem }
  .tenets p { font-size: .875rem; line-height: 1.78 }
  .etica {
    margin-top: clamp(2rem, 3.5vw, 2.75rem); font-size: .8125rem; line-height: 1.7;
    max-width: 72ch; opacity: .85;
  }

  /* -------------------------------------------------------------- dúvidas */
  .faq { display: flex; flex-direction: column; gap: .85rem; max-width: 56rem; margin-inline: auto }
  .faq details {
    background: var(--cream); border: 1px solid var(--hair); border-radius: 18px;
    transition: border-color .25s ease, background .25s ease;
  }
  .faq details[open] { background: var(--paper); border-color: rgba(95, 111, 82, .3) }
  .faq summary {
    display: flex; align-items: center; gap: 1rem; cursor: pointer; list-style: none;
    padding: 1.15rem 1.5rem; font-family: var(--serif); font-size: 1.1875rem;
    color: var(--ink); line-height: 1.4;
  }
  .faq summary::-webkit-details-marker { display: none }
  .faq summary::after {
    content: ''; margin-left: auto; flex: none; width: .8rem; height: .8rem;
    border-right: 1.5px solid var(--moss); border-bottom: 1.5px solid var(--moss);
    transform: rotate(45deg) translateY(-3px); transition: transform .3s ease;
  }
  .faq details[open] summary::after { transform: rotate(225deg) translateY(-1px) }
  .faq-a { padding: 0 1.5rem 1.4rem; font-size: .9375rem; line-height: 1.85; max-width: 66ch }

  /* ----------------------------------------------------------------- blog */
  .posts {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
  }
  .posts a { text-decoration: none; transition: transform .3s cubic-bezier(.22, 1, .36, 1) }
  .posts a:hover { transform: translateY(-3px) }
  .posts-cat {
    align-self: flex-start; font-size: .625rem; text-transform: uppercase; letter-spacing: .16em;
    color: var(--moss); background: rgba(95, 111, 82, .1); border-radius: 999px;
    padding: .32rem .8rem;
  }
  .posts h3 { font-size: 1.25rem; line-height: 1.3 }
  .posts-meta { font-size: .8125rem; opacity: .72; margin-top: auto }
  .posts-all {
    margin-top: 2.25rem; display: inline-flex; align-items: center; gap: .5rem;
    font-size: .8125rem; color: var(--moss); text-decoration: none;
  }
  .posts-all:hover { text-decoration: underline; text-underline-offset: 4px }

  /* -------------------------------------------------------------- agendar */
  .close { text-align: center }
  .close-in {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.4rem;
    max-width: 46rem; margin-inline: auto;
  }
  .close .eyebrow { justify-content: center }
  .close h2 { font-size: clamp(1.9rem, 4vw, 3rem); color: var(--on-moss); font-weight: 300 }
  .close p { font-size: 1.0625rem; max-width: 46ch }

  /* ---------------------------------------------------------- responsivo */
  @media (max-width: 1040px) {
    .about, .about-invertido { grid-template-columns: 1fr; gap: 2.5rem }
    .about-fig { max-width: 420px; margin-inline: auto }
    /* na trajetória a foto vem antes no HTML; no empilhado o texto lidera */
    .about-invertido .about-fig { order: 2 }
    .metodo, .tenets { grid-template-columns: repeat(2, minmax(0, 1fr)) }
    .posts { grid-template-columns: 1fr 1fr }
  }
  @media (max-width: 760px) {
    .hero-grid { grid-template-columns: 1fr; gap: 2.25rem }
    .hero-fig { order: -1 }
    /* a foto de origem é 3:4; um recorte landscape aqui decapitaria o retrato —
       mantém proporção quase quadrada e ancora no rosto */
    .hero-fig img {
      aspect-ratio: 1 / 1.02; object-position: 50% 14%; border-radius: 22px;
    }
    .hero-fig::after { border-radius: 22px }
    /* a marca d'água do hero cairia atrás da topbar, virando rabisco solto */
    .hero .watermark { display: none }
    .hero-cta { width: 100% }
    .hero-cta .btn { flex: 1 1 auto }
    .creds-card { grid-template-columns: 1fr 1fr }
    .creds-card li:nth-child(3) { border-left: 0 }
    .creds-card li:nth-child(n + 3) { border-top: 1px solid var(--hair) }
    .metodo, .passos, .posts { grid-template-columns: 1fr }
  }
  @media (max-width: 430px) {
    .tenets { grid-template-columns: 1fr }
  }

/* ==================================================== blog */

.capa {
    background: var(--moss-deep); color: var(--on-moss-dim);
    padding-block: clamp(3rem, 6vw, 4.5rem) clamp(3.5rem, 7vw, 5rem);
  }
  .capa .eyebrow { color: var(--on-moss); opacity: .85; margin-bottom: 1rem }
  .capa .leaf { color: var(--on-moss) }
  .capa h1 {
    font-size: clamp(1.9rem, 4vw, 3rem); color: var(--on-moss); font-weight: 300;
    max-width: 20ch;
  }
  .capa-sub { margin-top: 1.1rem; max-width: 52ch; font-size: 1.0625rem }

  .lista {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
  }
  .lista a { text-decoration: none; transition: transform .3s cubic-bezier(.22, 1, .36, 1) }
  .lista a:hover { transform: translateY(-3px) }
  .cat {
    align-self: flex-start; font-size: .625rem; text-transform: uppercase; letter-spacing: .16em;
    color: var(--moss); background: rgba(95, 111, 82, .1); border-radius: 999px;
    padding: .32rem .8rem;
  }
  .lista h2 { font-size: 1.375rem; line-height: 1.3 }
  .lista p { font-size: .9375rem; line-height: 1.8 }
  .meta { font-size: .8125rem; opacity: .72; margin-top: auto }

  .vazio {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 1.1rem; max-width: 42ch; margin-inline: auto;
    padding-block: clamp(1rem, 4vw, 3rem);
  }
  .vazio h2 { font-size: clamp(1.5rem, 3vw, 2.1rem) }

  @media (max-width: 760px) {
    .lista { grid-template-columns: 1fr }
  }

/* ==================================================== post */

.col { max-width: 44rem }
  .cabeca { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.25rem) }
  .voltar {
    /* block para ficar sozinho na linha: como inline-block, a etiqueta de
       categoria subia e colava ao lado do "← Todos os textos".
       fit-content mantém o clique só sobre o texto, não na linha toda. */
    display: block; width: fit-content;
    margin-bottom: 1.75rem; font-size: .8125rem;
    color: var(--moss); text-decoration: none;
  }
  .voltar:hover { text-decoration: underline; text-underline-offset: 4px }
  /* escopadas no .cabeca: sem escopo, estas duas sobrescreviam as .cat e .meta
     da lista do blog (vêm depois no arquivo) e a data deixava de encostar no
     rodapé do card. Resíduo de duas páginas diferentes no mesmo CSS. */
  .cabeca .cat {
    display: inline-block; font-size: .625rem; text-transform: uppercase; letter-spacing: .16em;
    color: var(--moss); background: rgba(95, 111, 82, .1); border-radius: 999px;
    padding: .32rem .8rem; margin-bottom: 1rem;
  }
  .cabeca h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 300; line-height: 1.16 }
  .cabeca .meta { margin-top: 1rem; font-size: .8125rem; opacity: .75 }

  .corpo { padding-bottom: clamp(2.5rem, 5vw, 3.5rem); font-size: 1.0625rem; line-height: 1.9 }
  .corpo p { margin-bottom: 1.4rem }
  .corpo h2 { font-size: 1.6rem; margin: 2.5rem 0 1rem }
  .corpo h3 { font-size: 1.3rem; margin: 2rem 0 .8rem }
  .corpo ul, .corpo ol { margin: 0 0 1.4rem 1.2rem }
  /* disc em todo li fazia a lista numerada sair com bolinhas */
  .corpo li { margin-bottom: .5rem }
  .corpo ul li { list-style: disc }
  .corpo ol li { list-style: decimal }
  .corpo blockquote {
    margin: 1.8rem 0; padding-left: 1.25rem; border-left: 2px solid var(--moss);
    font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--ink);
  }
  .corpo a { color: var(--moss) }
  .corpo img { border-radius: 18px; margin: 1.8rem 0 }

  .cta {
    margin-bottom: clamp(3rem, 6vw, 4.5rem); padding: 1.75rem 2rem;
    background: rgba(95, 111, 82, .07); border-radius: 20px;
    display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem;
  }
  .cta p { font-size: 1rem; max-width: 48ch }

/* ==================================================== privacidade */

.texto { max-width: 44rem }
  .texto h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); margin: 1rem 0 2rem; font-weight: 300 }
  .texto h2 { font-size: 1.375rem; margin: 2.25rem 0 .75rem }
  .texto p { font-size: 1rem; line-height: 1.9; margin-bottom: 1rem }
  .texto a { color: var(--moss) }
  .rodape-nota {
    margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--hair);
    font-size: .875rem !important; opacity: .85;
  }

/* ==================================================== topbar */

.top {
    position: sticky; top: 0; z-index: 40;
    background: rgba(245, 241, 234, .9);
    backdrop-filter: blur(12px) saturate(1.15);
    transition: box-shadow .3s ease, background .3s ease;
  }
  .top[data-stuck='1'] {
    background: rgba(255, 253, 249, .94);
    box-shadow: 0 1px 0 var(--hair), 0 8px 24px -18px rgba(74, 67, 61, .3);
  }
  .top-in {
    width: var(--shell); margin-inline: auto;
    display: flex; align-items: center; gap: 1.5rem; min-height: 4.75rem;
  }
  .brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex: none }
  /* o monograma F/R só é legível acima de ~110px; no topo vai um ramo desenhado */
  .brand-mark { width: 22px; height: 29px; color: var(--moss); flex: none }
  .brand-txt { display: flex; flex-direction: column; line-height: 1.1 }
  .brand-name {
    font-family: var(--serif); font-size: 1.1875rem; color: var(--ink); letter-spacing: .04em;
  }
  .brand-role {
    font-size: .5625rem; text-transform: uppercase; letter-spacing: .22em; color: var(--clay);
  }
  .nav { margin-left: auto; display: flex; gap: 1.75rem }
  .nav a { font-size: .8125rem; text-decoration: none; color: var(--clay); transition: color .25s ease }
  .nav a:hover { color: var(--moss) }
  .top .btn { padding: .7rem 1.3rem; font-size: .75rem }

  @media (max-width: 860px) {
    .nav { display: none }
    .top .btn { margin-left: auto }
  }
  @media (max-width: 430px) {
    .brand-role { display: none }
  }

/* ==================================================== rodape */

.foot {
    background: var(--ink); color: rgba(245, 241, 234, .7);
    padding-block: clamp(3rem, 6vw, 4.25rem);
  }
  .foot-in {
    display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.5rem clamp(2rem, 5vw, 4rem); align-items: start;
  }
  .foot-mark {
    display: block;   /* span é inline: sem isso width/height não se aplicam */
    width: 120px; height: 151px; background-color: rgba(245, 241, 234, .55);
    margin-bottom: 1.2rem;
    -webkit-mask: url('/monograma.png') center/contain no-repeat;
    mask: url('/monograma.png') center/contain no-repeat;
  }
  .foot-quote {
    font-family: var(--serif); font-style: italic; font-size: 1.3125rem;
    color: var(--cream); line-height: 1.45; max-width: 24ch;
  }
  .foot h2 {
    font-family: var(--sans); font-size: .6875rem; font-weight: 500; text-transform: uppercase;
    letter-spacing: .18em; color: var(--cream); margin-bottom: .9rem;
  }
  .foot li { font-size: .9375rem; padding-block: .26rem }
  .foot a { text-decoration: none; border-bottom: 1px solid rgba(245, 241, 234, .2) }
  .foot a:hover { border-bottom-color: var(--cream); color: var(--cream) }
  .foot-bar {
    margin-top: clamp(2.5rem, 5vw, 3.25rem); padding-top: 1.6rem;
    border-top: 1px solid rgba(245, 241, 234, .15);
    display: flex; flex-direction: column; gap: .75rem;
  }
  .foot-bar p { font-size: .75rem; line-height: 1.7; max-width: 88ch; opacity: .9 }
  .foot-alert { color: var(--cream) }

  @media (max-width: 1040px) {
    .foot-in { grid-template-columns: 1fr 1fr }
    .foot-in > :first-child { grid-column: 1 / -1 }
  }
  @media (max-width: 560px) {
    .foot-in { grid-template-columns: 1fr }
  }

/* ==================================================== capa do post */
.capa-post{
  width:100%;height:auto;border-radius:20px;margin-bottom:clamp(1.5rem,3vw,2.25rem);
  box-shadow:var(--shadow);
}

/* ============================================ formatação vinda do editor
   Tudo que a barra do painel oferece precisa ter aparência definida aqui,
   senão ela usa um botão e o texto sai quebrado no site. */
.corpo u{text-decoration:underline;text-underline-offset:2px}
.corpo s{color:var(--clay);opacity:.75}
.corpo small{font-size:.875rem;color:var(--clay)}
.corpo .lead,.corpo p.lead{
  font-family:var(--serif);font-size:1.375rem;line-height:1.55;color:var(--ink);
}
.corpo hr{
  border:0;height:1px;background:var(--hair);
  margin-block:clamp(2rem,4vw,3rem);
}
/* tabela larga rola dentro de si mesma; sem isso a página inteira rolaria de
   lado no celular */
.corpo table{
  display:block;overflow-x:auto;width:100%;border-collapse:collapse;
  margin-block:1.8rem;font-size:.9375rem;
}
.corpo th,.corpo td{
  border:1px solid var(--hair);padding:.7rem .9rem;text-align:left;vertical-align:top;
}
.corpo th{background:rgba(95,111,82,.07);font-weight:500;color:var(--ink)}