/* ============================================================
   DYNEXA — 06 PAGINAS INTERNAS
   Componentes usados fora da home.
   ============================================================ */

/* ------------------------------------------------------------
   Cabecalho de pagina interna
   ------------------------------------------------------------ */
.page-hero {
  position: relative;
  isolation: isolate;
  background: var(--navy-950);
  color: var(--text-invert);
  overflow: hidden;
  padding-top: calc(var(--header-h) + clamp(2rem, 1rem + 3vw, 4rem));
  padding-bottom: clamp(2.5rem, 1.2rem + 3.4vw, 4.5rem);
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(66% 116% at 92% 0%, rgba(201,151,31,.24), transparent 58%),
    linear-gradient(to right,  rgba(233,237,244,.05) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(to bottom, rgba(233,237,244,.05) 1px, transparent 1px) 0 0 / 72px 72px;
  mask-image: radial-gradient(140% 100% at 28% 0%, #000 16%, transparent 78%);
  -webkit-mask-image: radial-gradient(140% 100% at 28% 0%, #000 16%, transparent 78%);
}
.page-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: end;
}
@media (max-width: 940px) { .page-hero__inner { grid-template-columns: 1fr; align-items: start; } }

.page-hero__title {
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.026em;
  color: var(--white);
  max-width: 20ch;
  margin-top: var(--sp-4);
}
.page-hero__text {
  margin-top: var(--sp-5);
  max-width: 58ch;
  font-size: var(--fs-lead);
  line-height: 1.58;
  color: var(--text-invert-muted);
}
.page-hero__aside {
  border-left: 1px solid var(--rule-invert);
  padding-left: var(--sp-5);
}
.page-hero__aside dt {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-400);
}
.page-hero__aside dd {
  margin-top: .35rem;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-invert-muted);
}
.page-hero__aside dd + dt { margin-top: var(--sp-4); }
@media (max-width: 940px) {
  .page-hero__aside { border-left: 0; border-top: 1px solid var(--rule-invert); padding: var(--sp-5) 0 0; }
}

/* ------------------------------------------------------------
   Breadcrumb
   ------------------------------------------------------------ */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-invert-muted);
}
.breadcrumb a { color: var(--text-invert-muted); }
.breadcrumb a:hover { color: var(--gold-300); }
.breadcrumb li { display: flex; align-items: center; gap: .5rem; }
.breadcrumb li + li::before { content: '/'; opacity: .45; }
.breadcrumb [aria-current] { color: var(--gold-400); }

/* ------------------------------------------------------------
   Publico-alvo
   ------------------------------------------------------------ */
.audience {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.audience li {
  background: var(--sand);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.audience b {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--navy-900);
}
.audience span { font-size: var(--fs-xs); line-height: 1.55; color: var(--text-muted); }

/* ------------------------------------------------------------
   Sub-temas de uma especialidade
   ------------------------------------------------------------ */
.subthemes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
@media (max-width: 760px) { .subthemes { grid-template-columns: 1fr; } }

.subtheme {
  background: var(--bg);
  padding: clamp(1.4rem, 1rem + 1.2vw, 2.2rem);
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: .4rem var(--sp-4);
  transition: background var(--dur-2) var(--ease);
}
.subtheme:hover { background: var(--white); }
.subtheme__num {
  grid-row: span 2;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .1em;
  color: var(--accent);
  padding-top: .42rem;
}
.subtheme h3 { font-size: 1.16rem; }
.subtheme p { font-size: var(--fs-sm); line-height: 1.62; color: var(--text-muted); }

/* ------------------------------------------------------------
   Callout — nota destacada
   ------------------------------------------------------------ */
.callout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-5);
  align-items: start;
  padding: clamp(1.4rem, 1rem + 1.4vw, 2.2rem);
  background: var(--sand);
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--gold-700);
}
.callout__mark {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}
.callout h3 { font-size: 1.28rem; color: var(--navy-900); }
.callout p { margin-top: .6rem; font-size: var(--fs-sm); line-height: 1.65; color: var(--text-muted); max-width: 74ch; }
@media (max-width: 620px) {
  .callout { grid-template-columns: 1fr; }
  .callout__mark { writing-mode: horizontal-tb; transform: none; }
}

/* ------------------------------------------------------------
   Cards de navegacao cruzada
   ------------------------------------------------------------ */
.crosslinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
}
.crosslink {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--rule);
  transition: border-color var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease);
}
.crosslink:hover {
  border-color: var(--gold-400);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.crosslink b { font-family: var(--font-display); font-size: 1.1rem; font-weight: 500; }
.crosslink span { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.55; }

/* ------------------------------------------------------------
   Acordeao (FAQ)
   ------------------------------------------------------------ */
.faq { border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-5) 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 500;
  color: var(--navy-900);
  transition: color var(--dur-1) var(--ease);
}
.faq__q:hover { color: var(--accent); }
.faq__icon { position: relative; width: 15px; height: 15px; flex: none; margin-top: .38rem; }
.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: var(--accent);
  transition: transform var(--dur-2) var(--ease);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__item.is-open .faq__icon::after { transform: rotate(0); }

.faq__a {
  overflow: hidden;
  height: 0;
  transition: height var(--dur-3) var(--ease-out);
}
.faq__a > div { padding-bottom: var(--sp-5); }
.faq__a p { font-size: var(--fs-sm); line-height: 1.68; color: var(--text-muted); max-width: 76ch; }
.no-js .faq__a { height: auto; }

/* ------------------------------------------------------------
   Lista de servicos (pagina de portfolio)
   ------------------------------------------------------------ */
.service-list { border-top: 1px solid var(--rule); }
.service {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 4fr) minmax(0, 6fr) auto;
  gap: var(--sp-5);
  align-items: baseline;
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--rule);
  transition: background var(--dur-2) var(--ease);
}
.service:hover { background: var(--paper-2); }
.service__num {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .1em;
  color: var(--accent);
}
.service h2,
.service h3 { font-size: 1.28rem; }
.service p { font-size: var(--fs-sm); line-height: 1.64; color: var(--text-muted); }
.service__go { position: relative; }
@media (max-width: 900px) {
  .service { grid-template-columns: 3rem 1fr; gap: var(--sp-3) var(--sp-4); }
  .service p, .service__go { grid-column: 2; }
}

/* ------------------------------------------------------------
   Equipe
   ------------------------------------------------------------ */
.people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--sp-6);
}
.person__photo {
  aspect-ratio: 4 / 5;
  background: linear-gradient(150deg, var(--navy-900), var(--navy-700));
  border: 1px solid var(--rule);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.person__photo::after {
  content: '';
  position: absolute; inset: auto 0 0 0; height: 3px;
  background: linear-gradient(90deg, var(--gold-700), var(--gold-400));
}
.person__photo img { width: 100%; height: 100%; object-fit: cover; }
.person__photo span {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-invert-muted);
  text-align: center;
  padding: var(--sp-4);
  line-height: 1.9;
}
.person h3 { margin-top: var(--sp-4); font-size: 1.25rem; }
.person__role {
  display: block;
  margin-top: .3rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
}
.person p { margin-top: .8rem; font-size: var(--fs-sm); line-height: 1.62; color: var(--text-muted); }

/* ------------------------------------------------------------
   Lista de conteudo / blog
   ------------------------------------------------------------ */
.posts { border-top: 1px solid var(--rule); }
.post {
  display: grid;
  grid-template-columns: minmax(0, 9fr) minmax(0, 3fr);
  gap: var(--sp-5);
  align-items: baseline;
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.post:hover h3 { color: var(--accent); }
.post h3 { font-size: 1.35rem; transition: color var(--dur-1) var(--ease); }
.post p { margin-top: .55rem; font-size: var(--fs-sm); line-height: 1.62; color: var(--text-muted); max-width: 70ch; }
.post__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: right;
}
@media (max-width: 720px) {
  .post { grid-template-columns: 1fr; }
  .post__meta { text-align: left; order: -1; }
}

.empty-state {
  border: 1px dashed var(--rule-strong);
  padding: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
  text-align: center;
  background: var(--paper-2);
}
.empty-state p { color: var(--text-muted); max-width: 54ch; margin-inline: auto; }

/* ------------------------------------------------------------
   Texto corrido (juridico, institucional)
   ------------------------------------------------------------ */
.prose { max-width: 72ch; }
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
  font-size: 1.6rem;
}
.prose h3 { margin-top: var(--sp-6); font-size: 1.2rem; }
.prose p, .prose li { color: var(--graphite); line-height: 1.75; }
.prose ul { margin-top: var(--sp-4); }
.prose ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-top: .6rem;
}
.prose ul li::before {
  content: '';
  position: absolute;
  left: 0; top: .72em;
  width: 6px; height: 1px;
  background: var(--accent);
}
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink); }
.prose__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ------------------------------------------------------------
   Faixa de CTA final
   ------------------------------------------------------------ */
.cta-band {
  position: relative;
  isolation: isolate;
  background: var(--navy-950);
  color: var(--text-invert);
  overflow: hidden;
  padding-block: clamp(3rem, 1.5rem + 4vw, 5.5rem);
}
.cta-band::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 120% at 88% 10%, rgba(201,151,31,.22), transparent 58%);
}
.cta-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-6) var(--sp-8);
  align-items: center;
}
@media (max-width: 820px) { .cta-band__inner { grid-template-columns: 1fr; } }
.cta-band h2 { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.5rem); color: var(--white); max-width: 22ch; }
.cta-band p { margin-top: var(--sp-4); max-width: 56ch; color: var(--text-invert-muted); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* ------------------------------------------------------------
   Pagina 404
   ------------------------------------------------------------ */
.notfound {
  min-height: 72vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-top: var(--header-h);
}
.notfound__code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 3rem + 9vw, 11rem);
  line-height: .9;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--rule-gold);
}

/* ------------------------------------------------------------
   Sinais — "quando procurar a Dynexa"
   Bloco escuro: quebra a sequencia de caixas claras da pagina
   e da respiro visual no meio do conteudo tecnico.
   ------------------------------------------------------------ */
.signals {
  position: relative;
  isolation: isolate;
  background: var(--navy-950);
  color: var(--text-invert);
  overflow: hidden;
  padding-block: clamp(3rem, 1.8rem + 3.4vw, 5.5rem);
}
.signals::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(58% 110% at 90% 0%, rgba(201,151,31,.20), transparent 56%),
    linear-gradient(to right,  rgba(233,237,244,.045) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(to bottom, rgba(233,237,244,.045) 1px, transparent 1px) 0 0 / 64px 64px;
  mask-image: radial-gradient(140% 100% at 40% 0%, #000 22%, transparent 82%);
  -webkit-mask-image: radial-gradient(140% 100% at 40% 0%, #000 22%, transparent 82%);
}
.signals h2 { color: var(--white); max-width: 20ch; }
.signals__intro { margin-top: var(--sp-4); max-width: 58ch; color: var(--text-invert-muted); }

.signal-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  margin-top: var(--sp-7);
}
@media (max-width: 820px) { .signal-list { grid-template-columns: 1fr; } }

.signal-list li {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--rule-invert);
  font-size: var(--fs-sm);
  line-height: 1.58;
  color: var(--text-invert);
}
.signal-list li::before {
  content: '';
  width: 9px;
  height: 9px;
  margin-top: .48rem;
  border: 1px solid var(--gold-400);
  border-radius: 50%;
}

/* ------------------------------------------------------------
   Entregaveis + base normativa (mesma secao, duas colunas)
   ------------------------------------------------------------ */
.outputs {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 1rem + 3.5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 900px) { .outputs { grid-template-columns: 1fr; } }

.deliverables { border-top: 1px solid var(--rule); }
.deliverables li {
  display: grid;
  grid-template-columns: 1.35rem 1fr;
  gap: var(--sp-4);
  align-items: start;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--graphite);
}
.deliverables li svg {
  width: 14px;
  height: 14px;
  margin-top: .34rem;
  color: var(--accent);
  flex: none;
}

.legal-basis {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--accent);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
}
.legal-basis h3 {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
}
.legal-basis ul { margin-top: var(--sp-4); }
.legal-basis li {
  padding: .55rem 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: .74rem;
  line-height: 1.55;
  letter-spacing: .01em;
  color: var(--slate);
}
.legal-basis li:last-child { border-bottom: 0; }
.legal-basis p {
  margin-top: var(--sp-4);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-muted);   /* --mist reprova em texto pequeno (2.77:1) */
}

/* ------------------------------------------------------------
   Ritmo mais denso nas paginas internas.
   A home tem blocos grandes e pede ar; as internas sao texto —
   o mesmo espaçamento ali le como pagina vazia.
   ------------------------------------------------------------ */
.interna { --section-y: clamp(3rem, 1.8rem + 3.6vw, 5.75rem); }
.interna .section-head { padding-bottom: var(--sp-6); }

/* ------------------------------------------------------------
   Beneficios — efeito no negocio, nao escopo tecnico
   ------------------------------------------------------------ */
.benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}
@media (max-width: 760px) { .benefits { grid-template-columns: 1fr; } }

.benefit {
  background: var(--bg);
  padding: clamp(1.4rem, 1rem + 1.2vw, 2.1rem);
  display: flex;
  flex-direction: column;
  gap: .6rem;
  transition: background var(--dur-2) var(--ease);
}
.benefit:hover { background: var(--white); }
.benefit__mark {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule-gold);
  border-radius: 50%;
  color: var(--accent);
  margin-bottom: .3rem;
}
.benefit__mark svg { width: 12px; height: 12px; }
.benefit h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--navy-900);
}
.benefit p { font-size: var(--fs-sm); line-height: 1.62; color: var(--text-muted); }

/* ------------------------------------------------------------
   Responsaveis pela especialidade
   ------------------------------------------------------------ */
.experts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-5);
  /* sem teto, dois cards esticam para 580px cada e o texto vira linha longa */
  max-width: 880px;
}
.expert {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--sp-4);
  align-items: start;
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--accent);
}
.expert__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  background: linear-gradient(150deg, var(--navy-900), var(--navy-700));
  overflow: hidden;
  display: grid;
  place-items: center;
}
.expert__photo img { width: 100%; height: 100%; object-fit: cover; }
.expert__photo span {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--gold-300);   /* 7.1:1 sobre o navy — e sinaliza pendencia */
  text-align: center;
  line-height: 1.75;
  padding: .3rem;
}
.expert h3 { font-size: 1.08rem; }
.expert__role {
  display: block;
  margin-top: .22rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}
.expert p { margin-top: .6rem; font-size: var(--fs-xs); line-height: 1.58; color: var(--text-muted); }
@media (max-width: 420px) { .expert { grid-template-columns: 72px 1fr; } }

/* ------------------------------------------------------------
   Como contratar + formulario (secao final das paginas internas)
   ------------------------------------------------------------ */
.hire {
  position: relative;
  isolation: isolate;
  background: var(--navy-950);
  color: var(--text-invert);
  overflow: hidden;
  padding-block: clamp(3rem, 1.8rem + 3.6vw, 5.5rem);
}
.hire::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(58% 110% at 8% 0%, rgba(201,151,31,.20), transparent 58%);
}
.hire__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 1rem + 3.5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 1000px) { .hire__inner { grid-template-columns: 1fr; } }

.hire h2 { color: var(--white); max-width: 18ch; }
.hire__intro { margin-top: var(--sp-4); color: var(--text-invert-muted); max-width: 46ch; }

.steps { margin-top: var(--sp-7); }
.steps li {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--rule-invert);
}
.steps li:last-child { border-bottom: 1px solid var(--rule-invert); }
.steps .n {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .12em;
  color: var(--gold-400);
  padding-top: .22rem;
}
.steps h3 { font-size: 1.06rem; font-family: var(--font-body); font-weight: 600; color: var(--white); }
.steps p { margin-top: .4rem; font-size: var(--fs-xs); line-height: 1.6; color: var(--text-invert-muted); }

.hire__aside {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule-invert);
  font-size: var(--fs-sm);
  color: var(--text-invert-muted);
}
.hire__aside a { color: var(--gold-300); }
.hire__aside a:hover { color: var(--gold-200); }

/* ------------------------------------------------------------
   Artigo
   ------------------------------------------------------------ */
/* Titulo de artigo nao e titulo de pagina: e mais longo e precisa de corpo
   menor e medida mais larga, senao vira parede de 7 linhas. */
.article__head { max-width: none; }
.article__head .page-hero__title {
  font-size: clamp(1.6rem, 1rem + 2vw, 2.55rem);
  line-height: 1.14;
  letter-spacing: -.02em;
  max-width: none;   /* a coluna do grid ja limita */
}
.article__dek {
  margin-top: var(--sp-4);
  font-family: var(--font-display);
  font-size: 1.06rem;
  line-height: 1.55;
  color: var(--text-invert-muted);
  max-width: none;
}
.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem var(--sp-4);
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule-invert);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-invert-muted);
}
.byline strong { color: var(--gold-400); font-weight: 500; }
.byline span::before { content: '·'; margin-right: .9em; opacity: .5; }

.article-body { max-width: 68ch; }
.article-body > * + * { margin-top: var(--sp-4); }
.article-body h2 {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
  font-size: 1.55rem;
  color: var(--navy-900);
}
.article-body p { color: var(--graphite); line-height: 1.78; }
.article-body strong { color: var(--ink); }
.article-body ul { margin-top: var(--sp-4); }
.article-body li {
  position: relative;
  padding-left: 1.5rem;
  margin-top: .7rem;
  color: var(--graphite);
  line-height: 1.7;
}
.article-body li::before {
  content: '';
  position: absolute;
  left: 0; top: .78em;
  width: 7px; height: 1px;
  background: var(--accent);
}

.author-box {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: var(--sp-5);
  align-items: start;
  margin-top: var(--sp-8);
  padding: var(--sp-5);
  background: var(--sand);
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--accent);
  max-width: 68ch;
}
.author-box__photo {
  aspect-ratio: 4 / 5;
  background: linear-gradient(150deg, var(--navy-900), var(--navy-700));
  display: grid;
  place-items: center;
  overflow: hidden;
}
.author-box__photo img { width: 100%; height: 100%; object-fit: cover; }
.author-box__photo span {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-300);
  text-align: center;
  line-height: 1.7;
}
.author-box h2 { font-size: 1.12rem; }
.author-box__role {
  display: block;
  margin-top: .2rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}
.author-box p { margin-top: .6rem; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-muted); }

/* categoria na listagem */
.post__cat {
  display: inline-block;
  padding: .2rem .5rem;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ------------------------------------------------------------
   Layout do artigo: corpo + coluna lateral fixa
   O corpo tem medida de leitura de 68ch; sem a lateral, sobrava
   meia tela vazia a direita.
   ------------------------------------------------------------ */
/* Pagina de artigo usa container proprio, mais estreito. A regra fica em
   `main` para o header continuar na largura padrao do site. Assim cabecalho,
   texto e coluna lateral tem a mesma medida e nao sobra faixa vazia. */
.artigo main { --container: 1120px; }

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 68ch) minmax(0, 300px);
  gap: clamp(1.75rem, 1rem + 2.4vw, 3.5rem);
  align-items: start;
  justify-content: space-between;
}
.article-layout > .article-body  { grid-column: 1; grid-row: 1; max-width: none; }
.article-layout > .article-aside { grid-column: 2; grid-row: 1; }

@media (max-width: 1000px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  /* no mobile o indice vem antes do texto, onde e util */
  .article-layout > .article-aside { grid-column: 1; grid-row: 1; }
  .article-layout > .article-body  { grid-column: 1; grid-row: 2; }
}

.article-aside { position: sticky; top: calc(var(--header-h-compact) + 1.5rem); }
@media (max-width: 1000px) { .article-aside { position: static; } }

.toc {
  border-top: 2px solid var(--accent);
  padding-top: var(--sp-4);
}
.toc h2 {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
}
.toc ol { margin-top: var(--sp-4); counter-reset: toc; }
.toc li { counter-increment: toc; border-bottom: 1px solid var(--rule); }
.toc a {
  display: grid;
  grid-template-columns: 1.8rem 1fr;
  gap: .3rem;
  padding: .62rem 0;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text-muted);
  transition: color var(--dur-1) var(--ease);
}
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--accent);
  padding-top: .18rem;
}
.toc a:hover { color: var(--navy-800); }

.aside-cta {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  background: var(--navy-950);
  color: var(--text-invert);
  border-top: 2px solid var(--gold-500);
}
.aside-cta p {
  font-family: var(--font-display);
  font-size: 1.06rem;
  line-height: 1.4;
  color: var(--white);
}
.aside-cta span {
  display: block;
  margin-top: .55rem;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-invert-muted);
}
.aside-cta .btn { margin-top: var(--sp-4); width: 100%; }

/* ancora nao pode ficar sob o header fixo */
.article-body h2 { scroll-margin-top: calc(var(--header-h-compact) + 1.5rem); }

/* ------------------------------------------------------------
   Banner do artigo: texto a esquerda, capa a direita
   ------------------------------------------------------------ */
.article-hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.75rem, 1rem + 2.6vw, 3.5rem);
  align-items: end;
  margin-top: var(--sp-6);
}
@media (max-width: 900px) {
  .article-hero { grid-template-columns: 1fr; gap: var(--sp-6); }
}

.cover {
  margin: 0;
  border: 1px solid var(--rule-invert);
  background: var(--navy-900);
  line-height: 0;
  overflow: hidden;
}
.cover img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
@media (max-width: 900px) { .cover img { aspect-ratio: 16 / 9; } }

/* miniatura na listagem */
.post {
  grid-template-columns: 200px minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--sp-5) var(--sp-6);
}
.post__thumb {
  display: block;
  border: 1px solid var(--rule);
  background: var(--navy-950);
  line-height: 0;
  overflow: hidden;
}
.post__thumb img {
  width: 100%; height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform var(--dur-3) var(--ease-out);
}
.post:hover .post__thumb img { transform: scale(1.04); }
.post__meta { padding-top: .2rem; }

@media (max-width: 860px) {
  .post { grid-template-columns: 140px minmax(0, 1fr); }
  .post__meta { grid-column: 2; text-align: left; order: 3; }
}
@media (max-width: 560px) {
  .post { grid-template-columns: 1fr; }
  .post__meta { grid-column: 1; }
}