/* Martin Marketing & Design · página de artigo do blog
   Carregado só nos artigos. Leitura confortável: coluna de 720 px, texto de 18 px, índice fixo ao lado. */

.ahero { position: relative; background: var(--bg); color: var(--fg); padding-top: calc(var(--hd-h) + clamp(24px, 4vh, 56px)); }
.ahero nav { margin-bottom: var(--s-4); }
.ameta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.ahero .h1 { margin-top: var(--s-3); max-width: 20ch; font-size: clamp(2.25rem, 3.8vw + .4rem, 4.25rem); line-height: 1.02; }
.ahero .lead { margin-top: var(--s-3); max-width: 64ch; }
.aby { display: flex; align-items: center; gap: 14px; margin-top: var(--s-4); line-height: 1.35; }
.aby b { font-family: var(--font-display); font-weight: 550; }
img.quote__av { object-fit: cover; background: var(--mist); }
.ahero__art { margin-top: clamp(32px, 5vw, 64px); aspect-ratio: 12 / 5; border-radius: var(--r-xl); }

.abody { display: grid; grid-template-columns: 232px minmax(0, 720px); justify-content: space-between; gap: clamp(32px, 6vw, 96px); align-items: start; padding-block: clamp(48px, 6vw, 88px) var(--section); }
/* o índice nunca passa da altura da tela: em artigos longos, a lista rola por dentro */
.atoc { position: sticky; top: calc(var(--hd-h-min) + 32px); max-height: calc(100vh - var(--hd-h-min) - 56px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 16px; justify-items: start; }
.atoc ol { position: relative; display: grid; align-content: start; width: 100%; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; box-shadow: inset 1px 0 0 var(--bd); }
.atoc a:not(.btn) { display: block; padding: 7px 0 7px 16px; box-shadow: inset 2px 0 0 transparent; font-size: var(--fs-small); line-height: 1.35; color: var(--fg-2); transition: color var(--d-1), box-shadow var(--d-1); }
.atoc a:not(.btn):hover { color: var(--fg); }
.atoc a[aria-current] { color: var(--accent); font-weight: 500; box-shadow: inset 2px 0 0 var(--accent); }

/* corpo do texto */
.prose--post { --read: #33283F; font-size: 1.125rem; line-height: 1.7; color: var(--read); }
.prose--post > * + * { margin-top: 1.3em; }
.prose--post h2 { margin-top: 2.2em; scroll-margin-top: calc(var(--hd-h-min) + 32px); font-family: var(--font-display); font-size: clamp(1.625rem, 1.5vw + 1rem, 2.25rem); line-height: 1.1; letter-spacing: var(--tr-head); font-weight: var(--w-display); color: var(--fg); text-wrap: balance; }
.prose--post h3 { font-family: var(--font-display); font-size: 1.1875rem; line-height: 1.25; letter-spacing: -.015em; font-weight: 550; color: var(--fg); }
.prose--post strong { font-weight: 600; color: var(--fg); }
.prose--post p a, .prose--post li a, .abio a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose--post p a:hover, .prose--post li a:hover, .abio a:hover { text-decoration-thickness: 2px; }
.prose--post > ul, .prose--post > ol:not(.funil5) { display: grid; gap: .6em; padding-left: 1.3em; }
.prose--post > ul { list-style: disc; }
.prose--post > ol { list-style: decimal; }
.prose--post > ul li::marker, .prose--post > ol li::marker { color: var(--accent); font-weight: 600; }

/* resposta rápida no topo */
.tldr { padding: clamp(20px, 2.6vw, 32px); border-radius: var(--r-lg); background: var(--mist); }
.tldr .num { margin-bottom: 12px; }
.tldr ul { display: grid; gap: 8px; font-size: 1.0625rem; line-height: 1.5; }
.tldr li { position: relative; padding-left: 20px; }
.tldr li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--dot); }

/* tabela comparativa */
.atable { overflow-x: auto; border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--bd); }
.atable table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 1rem; line-height: 1.45; }
.atable th { padding: 16px 18px; text-align: left; background: var(--mist); font-family: var(--font-display); font-weight: 550; color: var(--fg); }
.atable td { padding: 16px 18px; vertical-align: top; box-shadow: inset 0 1px 0 var(--bd); }
.atable td:first-child { font-weight: 600; color: var(--fg); white-space: nowrap; }
.atable th:last-child, .atable td:last-child { background-color: color-mix(in srgb, var(--v100) 55%, transparent); color: var(--fg); }

/* figura */
.afig { margin-block: 2em; }
.afig__box { padding: clamp(20px, 3vw, 40px); border-radius: var(--r-xl); background: radial-gradient(90% 80% at 88% 0%, rgba(126, 38, 248, .42), transparent 60%), var(--ink-3); color: #fff; }
.afig figcaption { margin-top: 12px; font-size: var(--fs-small); line-height: 1.5; color: var(--fg-3); }
.funil5 { display: grid; gap: 8px; }
.funil5 li { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: center; font-family: var(--font-display); font-size: 1rem; font-weight: 500; }
.funil5 i { display: block; height: 40px; width: var(--w); border-radius: 10px; background: var(--grad-on-dark); }
.funil5 li:nth-child(2) i { opacity: .82; }
.funil5 li:nth-child(3) i { opacity: .66; }
.funil5 li:nth-child(4) i { opacity: .52; }
.funil5 li:nth-child(5) i { opacity: .4; }

/* destaque e listas lado a lado */
.acall { padding: 22px 26px; border-radius: var(--r-lg); background: var(--v100); color: var(--v900); }
.acall strong { color: var(--v900); }
.acols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.acols > div { padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r-lg); background: var(--mist); }
.acols h3 { margin-bottom: 14px; }
.acols ul { display: grid; gap: 10px; font-size: 1rem; line-height: 1.5; }
.acols li { position: relative; padding-left: 32px; }
.acols li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--v700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.500 9.500 3 3 6-6.500'/%3E%3C/svg%3E") center / 12px no-repeat; }
.acols .is-no li::before { background-color: var(--mist-2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23564E63' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m5.500 5.500 7 7M12.500 5.500l-7 7'/%3E%3C/svg%3E"); }

/* fórmula em destaque */
.aform { padding: clamp(24px, 3vw, 36px); border-radius: var(--r-lg); background: var(--mist); text-align: center; font-family: var(--font-display); font-size: clamp(1.25rem, 1.6vw + .8rem, 1.875rem); line-height: 1.2; letter-spacing: -.02em; font-weight: 600; color: var(--fg); }
.aform small { display: block; margin-top: 10px; font-family: var(--font); font-size: var(--fs-small); font-weight: 400; letter-spacing: 0; color: var(--fg-3); }

/* chamada no meio do texto */
.acta { margin-block: 2.6em; padding: clamp(24px, 3.4vw, 44px); border-radius: var(--r-xl); background: radial-gradient(90% 90% at 100% 0%, rgba(126, 38, 248, .5), transparent 60%), var(--ink-3); color: #fff; display: grid; gap: 12px; justify-items: start; }
.acta .h3 { font-size: clamp(1.5rem, 1.6vw + 1rem, 2rem); }
.acta p:not(.h3) { color: var(--on-dark-2); font-size: 1.0625rem; line-height: 1.5; max-width: 46ch; }
.acta .btn { margin-top: 8px; }

/* vídeo do artigo: capa clicável, o player entra depois do clique */
.avideo { margin-block: 2em; }
.avideo__btn { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-xl); cursor: pointer; isolation: isolate; }
.avideo__btn > img { position: absolute; inset: 0; z-index: -1; }
.avideo__btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(21, 4, 31, .78), rgba(21, 4, 31, .12) 60%); }
.avideo__play { position: absolute; inset: 0; margin: auto; width: clamp(64px, 9vw, 88px); height: clamp(64px, 9vw, 88px); border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 18px 48px rgba(21, 4, 31, .35); transition: transform var(--d-2) var(--ease); }
.avideo__play svg { position: static; width: 38%; translate: 6% 0; fill: var(--v700); transform: none; }
.avideo__btn:hover .avideo__play, .avideo__btn:focus-visible .avideo__play { transform: scale(1.08); }
.avideo__tx { position: absolute; left: clamp(18px, 3vw, 32px); bottom: clamp(16px, 2.6vw, 28px); right: clamp(18px, 3vw, 32px); display: grid; gap: 2px; text-align: left; color: #fff; }
.avideo__tx b { font-family: var(--font-display); font-size: clamp(1.125rem, 1vw + .9rem, 1.5rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.avideo__tx small { font-size: var(--fs-small); color: rgba(255, 255, 255, .78); line-height: 1.4; }
.avideo iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-xl); background: var(--ink); }
.avideo figcaption { margin-top: 12px; font-size: var(--fs-small); color: var(--fg-3); }
.avideo figcaption a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* FAQ e autor dentro do artigo */
.prose--post .faq__q { font-size: 1.1875rem; padding-block: 22px; }
.prose--post .faq__a p { font-size: 1.0625rem; line-height: 1.6; padding-right: 48px; }
.abio { margin-top: 3.2em; padding: clamp(20px, 2.6vw, 32px); border-radius: var(--r-lg); background: var(--mist); display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; font-size: 1rem; line-height: 1.55; }
.abio .quote__av { width: 56px; height: 56px; font-size: 1.125rem; }
.abio > div { display: grid; gap: 6px; }
.abio .h4 { color: var(--fg); }

@media (max-width: 1020px) {
  .abody { grid-template-columns: minmax(0, 720px); justify-content: start; }
  .atoc { position: static; max-height: none; padding: 20px 24px; border-radius: var(--r-lg); background: var(--mist); width: 100%; }
  .atoc ol { max-height: none; overflow: visible; }
  .atoc .btn { display: none; }
}
@media (max-width: 640px) {
  .prose--post { font-size: 1.0625rem; }
  .ahero__art { aspect-ratio: 16 / 10; }
  .acols { grid-template-columns: 1fr; }
  .abio { grid-template-columns: 1fr; }
  .prose--post .faq__a p { padding-right: 0; }
}