/* Componentes do material interativo. Usa só os tokens de tema.css.
   Conceito: ficha clínica em camadas; seções alternam fundo claro, sálvia e floresta, como as páginas do PDF. */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--branco); color: var(--texto); font: 400 1rem/1.62 var(--f-texto); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--f-titulo); color: var(--primaria); line-height: 1.15; text-wrap: balance; margin: 0; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--destaque); outline-offset: 3px; border-radius: 4px; }
.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.fonte { font-size: .74rem; color: var(--texto-suave); letter-spacing: .01em; }
.fonte em { font-style: italic; }
.escuro .fonte, .salvia .fonte { color: color-mix(in srgb, var(--branco) 62%, transparent); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Barra de progresso + cabeçalho */
.progresso { position: fixed; inset: 0 0 auto 0; height: 3px; background: var(--destaque); transform-origin: 0 50%; transform: scaleX(0); z-index: 60; }
.topo { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: color-mix(in srgb, var(--branco) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--neutro); }
.topo .wrap { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.topo .logo { width: 104px; color: var(--marca); flex: none; }
.topo nav { display: flex; gap: 4px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.topo nav a { font: 500 .84rem var(--f-titulo); text-decoration: none; color: var(--texto); padding: 8px 12px; border-radius: 999px; white-space: nowrap; transition: background .2s, color .2s; }
.topo nav a:hover { background: var(--neutro); }
.topo nav a.ativo { background: var(--primaria); color: var(--branco); }
.btn-pdf { display: inline-flex; align-items: center; gap: 8px; font: 600 .88rem var(--f-titulo); text-decoration: none; background: var(--destaque); color: var(--destaque-texto); padding: 10px 18px; border-radius: 999px 999px 999px 4px; white-space: nowrap; transition: transform .2s, background .2s; flex: none; }
.btn-pdf:hover { background: var(--destaque-claro); transform: translateY(-2px); }
.btn-pdf svg { width: 18px; height: 18px; }
/* Menu hambúrguer (celular e tablet) */
.menu-btn { display: none; flex: none; width: 44px; height: 44px; margin-right: -8px; border: 0; background: none; color: var(--marca); cursor: pointer; border-radius: 10px; align-items: center; justify-content: center; }
.menu-btn span, .menu-btn span::before, .menu-btn span::after { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s, background .25s; }
.menu-btn span { position: relative; }
.menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; }
.menu-btn span::before { top: -7px; } .menu-btn span::after { top: 7px; }
.topo.aberto .menu-btn span { background: transparent; }
.topo.aberto .menu-btn span::before { transform: translateY(7px) rotate(45deg); }
.topo.aberto .menu-btn span::after { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 980px) {
  .topo .wrap { gap: 12px; }
  .topo .btn-pdf { margin-left: auto; }
  .menu-btn { display: inline-flex; }
  .topo nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 2px; margin: 0; padding: 10px 16px 16px; background: var(--branco); border-bottom: 1px solid var(--neutro); box-shadow: 0 12px 24px rgba(0,0,0,.08); max-height: calc(100vh - 64px); overflow-y: auto; }
  .topo.aberto nav { display: flex; animation: menu-desce .2s ease-out; }
  .topo nav a { font-size: 1rem; padding: 12px 16px; border-radius: 12px; }
}
@media (max-width: 420px) { .topo .btn-pdf { padding: 9px 14px; font-size: .82rem; } }
@keyframes menu-desce { from { opacity: 0; transform: translateY(-6px); } }

/* Capa */
.capa { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--neutro); border-bottom: 10px solid var(--primaria); }
.capa-texto { background: var(--branco); padding: clamp(32px, 6vw, 72px) clamp(16px, 4vw, 56px); display: flex; flex-direction: column; justify-content: flex-end; gap: 18px; border-right: 4px solid var(--primaria); }
.capa .eyebrow { font: 500 .82rem var(--f-titulo); letter-spacing: .14em; text-transform: uppercase; color: var(--secundaria); }
.capa h1 { font-size: clamp(2.8rem, 6.4vw, 5.4rem); font-weight: 700; letter-spacing: -.035em; line-height: .95; }
.capa .sub { font: 300 italic clamp(1.15rem, 2vw, 1.6rem)/1.3 var(--f-texto); color: var(--primaria); max-width: 22ch; }
.capa-foto { position: relative; min-height: 440px; overflow: hidden; }
.capa-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 20%; animation: respira 18s ease-in-out infinite alternate; }
.tese { position: absolute; left: clamp(16px, 4vw, 40px); right: clamp(16px, 6vw, 80px); bottom: 32px; background: var(--tese-fundo); color: var(--tese-texto); font: 600 clamp(.98rem, 1.5vw, 1.18rem)/1.45 var(--f-titulo); padding: 20px 24px; border-radius: 4px 4px 4px 18px; box-shadow: 0 18px 40px -20px rgb(0 0 0 / .45); }
.acoes-capa { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.btn-linha { display: inline-flex; align-items: center; gap: 8px; font: 600 .88rem var(--f-titulo); text-decoration: none; color: var(--primaria); padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--primaria); transition: background .2s, color .2s; }
.btn-linha:hover { background: var(--primaria); color: var(--branco); }
@keyframes respira { from { transform: scale(1.02); } to { transform: scale(1.09) translateY(-1.5%); } }
@media (max-width: 820px) {
  .capa { grid-template-columns: 1fr; }
  .capa-texto { border-right: 0; border-bottom: 4px solid var(--primaria); }
  .capa-foto { min-height: 420px; }
}

/* Seções */
.secao { padding-block: clamp(56px, 8vw, 96px); }
.secao.salvia { background: var(--secundaria); color: var(--branco); }
.secao.escuro { background: var(--primaria); color: var(--branco); }
.secao.nevoa { background: var(--neutro-claro); }
.secao.salvia h2, .secao.escuro h2, .secao.salvia h3, .secao.escuro h3 { color: var(--branco); }
.titulo-secao { display: flex; align-items: flex-start; gap: 14px; margin-bottom: clamp(24px, 4vw, 40px); }
.titulo-secao::before { content: ""; flex: none; width: 16px; height: 2.4rem; margin-top: .1rem; background: var(--destaque-claro); border-radius: 0 0 0 12px; }
.titulo-secao h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 700; letter-spacing: -.02em; }
.titulo-secao p { font: 300 1.05rem var(--f-texto); margin-top: 6px; opacity: .85; }
.duas-col { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.duas-col > * { min-width: 0; }
@media (max-width: 860px) { .duas-col { grid-template-columns: minmax(0, 1fr); } }
.texto-corrido { display: grid; gap: 1em; max-width: 62ch; }
.texto-corrido h3 { font-size: 1.05rem; font-weight: 700; }
.salvia .texto-corrido p { color: color-mix(in srgb, var(--branco) 92%, transparent); }

/* Lista numerada de benefícios (painel creme) */
.painel-creme { background: var(--painel); color: var(--texto); padding: clamp(24px, 3vw, 36px); border-radius: 4px 4px 4px 22px; }
.painel-creme h3 { color: var(--primaria); font-size: 1.15rem; margin-bottom: 18px; }
.beneficios { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; counter-reset: b; }
.beneficios li { counter-increment: b; display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; font-size: .96rem; }
.beneficios li::before { content: counter(b); font: 700 .78rem/1 var(--f-titulo); background: var(--primaria); color: var(--painel); width: 22px; height: 22px; display: grid; place-items: center; border-radius: 4px; margin-top: 2px; }

/* Abas */
.abas { display: inline-flex; background: var(--neutro); padding: 5px; border-radius: 999px; gap: 4px; margin-bottom: 28px; flex-wrap: wrap; }
.abas button { font: 600 .92rem var(--f-titulo); border: 0; background: transparent; color: var(--primaria); padding: 10px 20px; border-radius: 999px; cursor: pointer; transition: background .25s, color .25s; }
.abas button[aria-selected="true"] { background: var(--primaria); color: var(--branco); }
.painel-aba { animation: entra .45s cubic-bezier(.2,.7,.2,1); }
@keyframes entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Ficha do fármaco */
.ficha { border-radius: 4px 22px 22px 22px; padding: clamp(24px, 3vw, 36px); display: grid; gap: 16px; position: relative; }
.ficha::before { content: ""; position: absolute; left: -8px; top: 22px; width: 16px; height: 44px; background: var(--destaque-claro); border-radius: 0 0 0 10px; }
.ficha.oral { background: var(--primaria); color: color-mix(in srgb, var(--branco) 90%, transparent); }
.ficha.oral h3 { color: var(--branco); }
.ficha.topico { background: var(--destaque); color: var(--destaque-texto); }
.ficha h3 { font-size: 1.6rem; font-weight: 700; }
.ficha .sal { font: 500 .95rem var(--f-titulo); color: var(--destaque-claro); }
.ficha.topico .sal { color: var(--primaria); opacity: .8; }
.ficha .dose { font: 500 .95rem var(--f-titulo); }
.ficha .dose strong { font-weight: 700; }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.checklist li { position: relative; padding: 6px 0 6px 30px; font-size: .94rem; }
.checklist li::before { content: "✓"; position: absolute; left: 0; top: 9px; width: 16px; height: 16px; border-radius: 3px; background: var(--check-fundo); color: var(--check-cor); font: 700 11px/16px var(--f-titulo); text-align: center; }
.checklist li:not(:last-child)::after { content: ""; position: absolute; left: 7.5px; top: 25px; bottom: -9px; width: 1px; background: var(--check-fundo); opacity: .6; }
.ficha.oral h4 { color: var(--destaque-claro); font-size: 1rem; }
.bloco + .bloco { margin-top: 28px; }
.bloco h3 { font-size: 1.2rem; margin-bottom: 10px; }
.bloco .lead { font: 400 1.05rem var(--f-titulo); color: var(--primaria); margin-bottom: 10px; }

/* Tabelas */
.tabela-rotulo { font: 700 .98rem var(--f-titulo); color: var(--primaria); }
.tabela-rotulo span { display: block; font: 400 .82rem var(--f-texto); color: var(--destaque); margin-top: 2px; }
.tabela-caixa { overflow-x: auto; border: 1.5px solid var(--primaria); background: var(--painel); border-radius: 4px; margin-top: 12px; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th { font: 600 .82rem var(--f-titulo); text-align: left; color: var(--primaria); padding: 12px 14px; border-bottom: 1.5px solid var(--primaria); vertical-align: bottom; }
td { padding: 12px 14px; vertical-align: top; border-bottom: 1px solid color-mix(in srgb, var(--destaque) 55%, transparent); }
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .2s; }
tbody tr:hover { background: color-mix(in srgb, var(--destaque-claro) 45%, transparent); }
td .tipo { display: block; font: 600 italic .9rem var(--f-titulo); color: var(--primaria); }
td .nota { font-size: .84rem; color: var(--texto-suave); }
.previsao { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.medidor { display: inline-flex; gap: 3px; }
.medidor i { width: 8px; height: 16px; border-radius: 2px; background: color-mix(in srgb, var(--destaque) 45%, transparent); }
.medidor[data-n="4"] i:nth-child(-n+4), .medidor[data-n="3"] i:nth-child(-n+3), .medidor[data-n="2"] i:nth-child(-n+2), .medidor[data-n="1"] i:nth-child(-n+1) { background: var(--secundaria); }

/* Mecanismos */
.mecanismos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 14px; }
.mecanismos li { display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: start; background: var(--branco); padding: 18px; border-radius: 4px 4px 4px 18px; transition: transform .25s, box-shadow .25s; }
.mecanismos li:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -22px rgb(40 57 45 / .6); }
.mecanismos .n { font: 700 2.6rem/1 var(--f-titulo); color: var(--primaria); background: var(--cartao-out); border-radius: 6px 6px 6px 14px; height: 64px; display: grid; place-items: center; }
.mecanismos h3 { font-size: 1rem; margin-bottom: 4px; }
.mecanismos p { font-size: .9rem; }

/* Fórmulas */
.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 28px; }
.filtros .rotulo { font: 500 .85rem var(--f-titulo); color: var(--texto-suave); margin-right: 4px; }
.chip { font: 600 .85rem var(--f-titulo); border: 1.5px solid var(--primaria); background: transparent; color: var(--primaria); padding: 7px 16px; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s; }
.chip[aria-pressed="true"] { background: var(--primaria); color: var(--branco); }
.escuro .chip { border-color: var(--destaque-claro); color: var(--destaque-claro); }
.escuro .chip[aria-pressed="true"] { background: var(--destaque-claro); color: var(--primaria); }
.fases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.fases > * { min-width: 0; }
@media (max-width: 860px) { .fases { grid-template-columns: minmax(0, 1fr); } }
.fase { border: 1.5px solid var(--primaria); border-radius: 18px; padding: clamp(16px, 2.4vw, 24px); display: grid; gap: 16px; align-content: start; }
.fase header { display: grid; gap: 2px; }
.fase .etapa { font: 600 .72rem var(--f-titulo); letter-spacing: .14em; text-transform: uppercase; color: var(--destaque); }
.fase h3 { font-size: 1.15rem; }
.fase header p { font-size: .92rem; color: var(--texto-suave); }
.formula { border-radius: 14px; background: var(--cartao-in); padding: 18px; display: grid; gap: 12px; transition: opacity .3s, filter .3s, transform .3s; }
.formula.out { background: var(--cartao-out); }
.formula.apagada { opacity: .28; filter: saturate(.3); transform: scale(.98); }
.formula .cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.formula .via { font: 700 .66rem var(--f-titulo); letter-spacing: .06em; color: var(--primaria); }
.custo { display: inline-flex; gap: 2px; cursor: help; }
.custo b { font: 800 italic .72rem/1 var(--f-titulo); background: var(--branco); color: var(--primaria); padding: 3px 3px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--destaque-claro); }
.formula .nome { display: flex; align-items: baseline; gap: 12px; }
.formula .num { font: 800 italic 2.3rem/1 var(--f-titulo); color: var(--primaria); letter-spacing: -.03em; }
.formula h4 { font-size: 1.05rem; font-weight: 700; color: var(--primaria); }
.formula h4 small { display: block; font: 400 italic .9rem var(--f-titulo); }
.quando { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; background: var(--destaque-claro); border: 1px solid var(--primaria); border-radius: 6px; padding: 10px 14px; font-size: .88rem; }
.quando strong { font: 700 italic .95rem/1.1 var(--f-titulo); color: var(--primaria); border-right: 1px solid var(--primaria); padding-right: 14px; }
.receita { background: color-mix(in srgb, var(--branco) 70%, transparent); border-radius: 8px; padding: 12px 14px; display: grid; gap: 2px; font-size: .9rem; }
.receita .linha { display: flex; align-items: baseline; gap: 6px; }
.receita .linha span:nth-child(2) { flex: 1; border-bottom: 1.5px dotted color-mix(in srgb, var(--texto) 45%, transparent); transform: translateY(-4px); }
.receita .linha span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.receita .posologia { margin-top: 8px; font-size: .86rem; }
.ativos { border-top: 1px dashed color-mix(in srgb, var(--primaria) 35%, transparent); padding-top: 4px; }
.ativos summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; font: 600 .82rem var(--f-titulo); color: var(--primaria); padding: 6px; }
.ativos summary::-webkit-details-marker { display: none; }
.ativos summary::after { content: ""; width: 7px; height: 7px; border: solid var(--primaria); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); margin-left: 4px; transition: transform .3s; }
.ativos[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.ativos dl { margin: 6px 0 0; display: grid; gap: 12px; }
.ativos .ativo { display: grid; grid-template-columns: 118px 1fr; gap: 12px; font-size: .86rem; animation: entra .35s ease both; }
.ativos dt { font: 700 .88rem/1.25 var(--f-titulo); color: var(--primaria); }
.ativos dt em { display: block; font: 400 italic .8rem var(--f-titulo); margin-top: 2px; }
.ativos dd { margin: 0; border-left: 1.5px solid var(--destaque); padding-left: 12px; }
.ativos dd .fonte { display: block; margin-top: 2px; }
.legenda-custo { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 24px; font-size: .84rem; align-items: center; background: var(--neutro); padding: 12px 16px; border-radius: 8px; }
.legenda-custo > span { display: inline-flex; gap: 8px; align-items: center; font-style: italic; }

/* Olhar científico */
.casos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 56px); }
@media (max-width: 900px) { .casos { grid-template-columns: 1fr; } }
.caso { display: grid; gap: 14px; align-content: start; min-width: 0; }
.caso .via-caso { font: 700 italic .95rem var(--f-titulo); color: var(--destaque-claro); }
.caso h3 { font-size: 1.2rem; }
.caso p { color: color-mix(in srgb, var(--branco) 88%, transparent); font-size: .96rem; }
.escuro .tabela-rotulo { color: var(--branco); }
.linha-tempo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; align-items: stretch; background: color-mix(in srgb, var(--branco) 5%, transparent); border-radius: 16px; padding: 14px; }
@media (max-width: 520px) { .linha-tempo { grid-template-columns: 1fr; } }
.etapas { display: grid; gap: 10px; align-content: start; }
.etapa-btn { text-align: left; display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; border: 0; cursor: pointer; font: 700 italic .95rem/1.2 var(--f-titulo); color: var(--destaque-texto); background: var(--destaque); padding: 12px 14px; border-radius: 4px 4px 4px 16px; transition: background .25s, color .25s, transform .25s; }
.etapa-btn .letra { font: 800 italic 2rem/1 var(--f-titulo); }
.etapa-btn[aria-selected="false"] { background: color-mix(in srgb, var(--branco) 10%, transparent); color: color-mix(in srgb, var(--branco) 80%, transparent); }
.etapa-btn[aria-selected="true"] { transform: translateX(4px); }
.etapa-btn.c[aria-selected="true"] { background: var(--secundaria); color: var(--branco); }
.visor { position: relative; border-radius: 10px; overflow: hidden; background: var(--primaria); min-height: 240px; cursor: zoom-in; }
.visor img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.visor img.ativa { opacity: 1; }
.visor .rotulo-img { position: absolute; left: 10px; top: 10px; font: 500 .75rem var(--f-titulo); background: color-mix(in srgb, var(--primaria) 82%, transparent); color: var(--branco); padding: 4px 10px; border-radius: 999px; z-index: 2; }
.resultados { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; counter-reset: r; }
.resultados li { counter-increment: r; display: grid; grid-template-columns: 24px 1fr; gap: 10px; font-size: .94rem; color: color-mix(in srgb, var(--branco) 88%, transparent); }
.resultados li::before { content: counter(r); font: 700 .75rem/1 var(--f-titulo); background: var(--destaque-claro); color: var(--primaria); width: 20px; height: 20px; display: grid; place-items: center; border-radius: 3px; margin-top: 3px; }
.resultados strong { color: var(--branco); }
.dias { display: flex; gap: 6px; flex-wrap: wrap; }
.visor.alto { aspect-ratio: 4 / 4.2; max-width: 100%; }
.escuro .formula { color: var(--texto); }
.caso .formula p { color: var(--texto); }
.caso .sub-fonte { font-size: .74rem; color: color-mix(in srgb, var(--branco) 62%, transparent); }

/* Estudos */
.comparativo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; align-items: center; margin-bottom: 32px; background: color-mix(in srgb, var(--branco) 6%, transparent); border-radius: 16px; padding: clamp(18px, 3vw, 28px); }
@media (max-width: 760px) { .comparativo { grid-template-columns: 1fr; } }
.comparativo p { color: color-mix(in srgb, var(--branco) 85%, transparent); font-size: .95rem; }
.barras { display: grid; gap: 14px; }
.barra { display: grid; grid-template-columns: 110px 1fr 54px; gap: 12px; align-items: center; font: 500 .9rem var(--f-titulo); }
.barra .trilho { height: 18px; background: color-mix(in srgb, var(--branco) 10%, transparent); border-radius: 3px 3px 3px 10px; overflow: hidden; }
.barra .valor { height: 100%; width: var(--v); background: var(--destaque-claro); border-radius: inherit; transform-origin: 0 50%; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.barra.b2 .valor { background: var(--destaque); }
.barra.espera .valor { transform: scaleX(0); }
.barra b { font-variant-numeric: tabular-nums; text-align: right; }
.estudos { display: grid; gap: 14px; }
.estudo { display: grid; grid-template-columns: 150px minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 2.4fr) minmax(0, 1.3fr) 110px; gap: 0; background: color-mix(in srgb, var(--branco) 4%, transparent); border-top: 1px solid color-mix(in srgb, var(--destaque-claro) 40%, transparent); font-size: .86rem; color: color-mix(in srgb, var(--branco) 90%, transparent); transition: opacity .3s; }
.estudo > * { padding: 16px 14px; min-width: 0; }
.estudo .publico { font: 700 .74rem var(--f-titulo); letter-spacing: .12em; text-transform: uppercase; color: var(--primaria); background: var(--destaque-claro); }
.estudo .resumo { background: color-mix(in srgb, var(--secundaria) 70%, transparent); }
.estudo .resumo .fonte { display: block; margin-top: 8px; }
.estudo .tempo { font: 600 .95rem var(--f-titulo); color: var(--destaque-claro); }
.estudo .rot { display: none; font: 600 .68rem var(--f-titulo); letter-spacing: .1em; text-transform: uppercase; color: var(--destaque-claro); margin-bottom: 2px; }
.estudos-cab { display: grid; grid-template-columns: 150px minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 2.4fr) minmax(0, 1.3fr) 110px; background: var(--cartao-out); color: var(--primaria); font: 600 .8rem var(--f-titulo); border-radius: 6px 6px 0 0; }
.estudos-cab span { padding: 12px 14px; }
.estudo[hidden] { display: none; }
@media (max-width: 980px) {
  .estudos-cab { display: none; }
  .estudo { grid-template-columns: 1fr; border-radius: 12px; overflow: hidden; border: 0; }
  .estudo .rot { display: block; }
  .estudo > * { padding: 10px 16px; }
}

/* Referências e rodapé */
.referencias { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 32px; align-items: center; }
@media (max-width: 700px) { .referencias { grid-template-columns: 1fr; } .referencias img { max-width: 140px; } }
.citacoes { padding: 0 0 0 1.6em; margin: 16px 0 0; font-size: .86rem; display: grid; gap: 10px; max-width: 80ch; }
.citacoes li { padding-left: 4px; overflow-wrap: anywhere; }
.citacoes li::marker { font: 700 .8rem var(--f-titulo); color: var(--secundaria); }
.citacoes a { color: var(--marca); text-decoration-color: var(--destaque); text-underline-offset: 2px; }
.referencias { align-items: start; }
.referencias img { position: sticky; top: 100px; }
.rodape { background: var(--primaria); color: color-mix(in srgb, var(--branco) 85%, transparent); padding-block: 48px 32px; font-size: .88rem; }
.rodape .grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 32px; align-items: start; }
.rodape h3 { color: var(--branco); font-size: .95rem; margin-bottom: 4px; }
.rodape .unidade { border-left: 4px solid var(--secundaria); padding-left: 14px; display: grid; gap: 10px; }
.rodape .contato { color: var(--destaque-claro); font: 600 .82rem var(--f-titulo); }
.rodape .tel { font: 500 1.05rem var(--f-titulo); color: var(--branco); text-decoration: none; display: block; }
.rodape .selo { width: 120px; justify-self: end; }
.rodape .creditos { margin-top: 36px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--branco) 15%, transparent); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .78rem; color: color-mix(in srgb, var(--branco) 60%, transparent); }
.redes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.redes a { width: 36px; height: 36px; display: grid; place-items: center; background: var(--secundaria); color: var(--branco); border-radius: 4px 4px 4px 12px; transition: background .2s; }
.redes a:hover { background: var(--marca); }
.redes svg { width: 18px; height: 18px; }

/* Botão flutuante (celular) */
.pdf-flutuante { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 55; box-shadow: 0 12px 28px -12px rgb(0 0 0 / .5); transform: translateY(120px); transition: transform .35s; }
.pdf-flutuante.visivel { transform: none; }
@media (min-width: 981px) { .pdf-flutuante { display: none; } }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 80; background: color-mix(in srgb, var(--primaria) 94%, transparent); display: grid; place-items: center; padding: 24px; cursor: zoom-out; }
.lightbox img { max-height: 88vh; width: auto; border-radius: 8px; animation: entra .3s ease; }
.lightbox figcaption { color: var(--branco); text-align: center; margin-top: 10px; font: 500 .9rem var(--f-titulo); }

/* Revelação ao rolar: só elementos fora da tela no carregamento recebem .oculto */
.revela { transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.revela.oculto { opacity: 0; transform: translateY(28px); }
.capa .anima { animation: sobe .9s cubic-bezier(.2,.7,.2,1) both; }
.capa .anima:nth-child(2) { animation-delay: .08s; } .capa .anima:nth-child(3) { animation-delay: .16s; } .capa .anima:nth-child(4) { animation-delay: .24s; } .capa .anima:nth-child(5) { animation-delay: .32s; }
.tese { animation: sobe 1s .45s cubic-bezier(.2,.7,.2,1) both; }
@keyframes sobe { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .revela.oculto { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}
@media print { .topo, .pdf-flutuante, .progresso { display: none; } .revela.oculto { opacity: 1; transform: none; } }
.secao .painel-creme h3 { color: var(--primaria); }
.secao .painel-creme .fonte { color: var(--texto-suave); }

/* ===== Componentes adicionais (lote 2: Minoxidil oral, GLP-1) ===== */
.logo-img { height: 44px; width: auto; }
.capa .logo-capa { width: 150px; height: auto; margin-bottom: auto; }
.beneficios li strong { display: block; font: 600 .95rem/1.3 var(--f-titulo); color: var(--primaria); }
.chamada { background: var(--primaria); color: var(--branco); border-radius: 4px 18px 18px 18px; padding: clamp(18px, 3vw, 26px); font: 600 clamp(1rem, 1.6vw, 1.15rem)/1.45 var(--f-titulo); }
.chamada.cor-tese { background: var(--tese-fundo); color: var(--tese-texto); }
.chamada small { display: block; font: 400 .95rem/1.5 var(--f-texto); margin-top: 6px; opacity: .92; }
.chamada-com-selo { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 18px; align-items: center; }
.chamada-com-selo img { width: 84px; border-radius: 50%; background: var(--branco); padding: 6px; }
.figura { margin: 0; display: grid; gap: 10px; }
.figura .moldura { background: var(--branco); border-radius: 14px; padding: 10px; cursor: zoom-in; overflow: hidden; border: 1px solid var(--neutro); }
.figura .moldura img { width: 100%; border-radius: 8px; transition: transform .5s ease; }
.figura .moldura:hover img { transform: scale(1.02); }
.figura figcaption { font-size: .8rem; color: var(--texto-suave); }
.glossario { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 6px 24px; margin: 0; background: var(--neutro-claro); border-radius: 12px; padding: 14px 18px; font-size: .84rem; }
.glossario div { display: flex; gap: 6px; }
.glossario dt { font: 600 .84rem var(--f-titulo); color: var(--primaria); }
.glossario dd { margin: 0; }
.freq { display: grid; grid-template-columns: minmax(80px, 1fr) auto; gap: 12px; align-items: center; }
.freq .trilho { height: 8px; background: var(--neutro); border-radius: 4px; position: relative; overflow: hidden; }
.freq .trilho i { position: absolute; top: 0; bottom: 0; left: var(--de, 0%); width: var(--ate); background: var(--secundaria); border-radius: 4px; transform-origin: 0 50%; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.freq.espera .trilho i { transform: scaleX(0); }
.freq b { font: 500 .86rem var(--f-titulo); font-variant-numeric: tabular-nums; white-space: nowrap; }
.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.passo { display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr); gap: clamp(16px, 3vw, 32px); background: var(--painel); border-radius: 18px; padding: clamp(18px, 3vw, 26px); transition: transform .25s, box-shadow .25s; }
.passo:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -24px var(--primaria); }
.passo .n { display: block; font: 300 clamp(2.4rem, 5vw, 3.2rem)/1 var(--f-titulo); color: var(--primaria); margin-bottom: 8px; }
.passo h3 { font: 600 italic 1.05rem/1.25 var(--f-titulo); }
.passo p { font-size: .94rem; margin-bottom: 8px; }
@media (max-width: 640px) { .passo { grid-template-columns: 1fr; } }
.validacao { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.validacao article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center; background: var(--branco); border-radius: 16px; padding: 14px; }
.validacao img { border-radius: 10px; cursor: zoom-in; }
.validacao h3 { font: 600 italic 1.05rem var(--f-titulo); margin-bottom: 6px; }
@media (max-width: 420px) { .validacao article { grid-template-columns: 1fr; } }
.ciclo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; position: relative; }
.ciclo .no { border: 0; text-align: left; cursor: pointer; background: var(--primaria); color: var(--branco); border-radius: 10px; padding: 14px 16px; font: 600 .92rem/1.3 var(--f-titulo); display: grid; gap: 4px; transition: background .35s, color .35s, transform .35s; }
.ciclo .no span { font: 400 italic .82rem/1.35 var(--f-titulo); opacity: .8; }
.ciclo .no .passo-n { font: 700 .72rem var(--f-titulo); letter-spacing: .1em; opacity: .7; font-style: normal; }
.ciclo .no[aria-pressed="true"] { background: var(--destaque); color: var(--destaque-texto); transform: scale(1.03); }
.ciclo .centro { grid-column: 1 / -1; background: var(--destaque-claro); color: var(--primaria); border-radius: 12px; padding: 16px; text-align: center; font: 700 italic clamp(.95rem, 1.6vw, 1.1rem)/1.7 var(--f-titulo); }
.ciclo .centro .gira { display: inline-block; animation: gira 6s linear infinite; margin-right: 6px; }
@keyframes gira { to { transform: rotate(360deg); } }
.alternativas { display: grid; gap: 10px; }
.alternativas .alt-abas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.alternativas .alt-abas .ou { font: 700 italic .85rem var(--f-titulo); color: var(--primaria); }
.alternativas .chip { padding: 5px 14px; font-size: .8rem; }
.obs { font-size: .84rem; border-left: 3px solid var(--destaque); padding-left: 10px; margin-top: 8px; }
.ativos .ativo.realce { background: var(--primaria); color: var(--branco); border-radius: 10px; padding: 12px; }
.ativos .ativo.realce dt { color: var(--destaque-claro); }
.ativos .ativo.realce dd { border-color: var(--destaque-claro); }
.composicao { display: grid; gap: 12px; }
.comp { background: var(--branco); border-top: 2px solid var(--destaque); padding: 12px 16px; border-radius: 0 0 10px 10px; font-size: .92rem; }
.comp h4 { font: 600 1rem var(--f-titulo); color: var(--primaria); margin-bottom: 4px; }
.estudos-cab.sem-tempo, .estudo.sem-tempo { grid-template-columns: 150px minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 2.4fr) minmax(0, 1.4fr); }
@media (max-width: 980px) { .estudo.sem-tempo { grid-template-columns: 1fr; } }
.selo-texto { font: 600 1rem var(--f-titulo); color: var(--branco); }
.rodape .logo-rodape { width: 170px; height: auto; justify-self: end; }
.citacoes-cheia { padding: 0 0 0 1.6em; margin: 16px 0 0; font-size: .86rem; display: grid; gap: 10px; max-width: 90ch; }
.citacoes-cheia li { overflow-wrap: anywhere; padding-left: 4px; }
.citacoes-cheia li::marker { font: 700 .8rem var(--f-titulo); color: var(--secundaria); }
.citacoes-cheia a { color: var(--primaria); text-decoration-color: var(--destaque); text-underline-offset: 2px; }
.fase.larga { grid-column: 1 / -1; }
.grade-formulas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; align-items: start; }
.fase .intro { font-size: .95rem; max-width: 70ch; }
.escala { font-size: .74rem; color: var(--texto-suave); margin-top: 6px; }

/* Linha que liga os números das listas numeradas (como no PDF) */
.beneficios li, .resultados li { position: relative; }
.beneficios li:not(:last-child)::after { content: ""; position: absolute; left: 10.5px; top: 24px; bottom: -12px; width: 1.5px; background: var(--primaria); opacity: .55; }
.resultados li:not(:last-child)::after { content: ""; position: absolute; left: 9.5px; top: 23px; bottom: -10px; width: 1.5px; background: var(--destaque-claro); opacity: .6; }

/* Botão de copiar a fórmula (criado por interacoes.js em cada .receita) */
.receita .copiar { justify-self: end; margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; font: 600 .78rem var(--f-titulo); color: var(--primaria); background: var(--branco); border: 1.5px solid var(--primaria); border-radius: 999px; padding: 5px 12px; cursor: pointer; transition: background .2s, color .2s; }
.receita .copiar:hover { background: var(--primaria); color: var(--branco); }
.receita .copiar.ok { background: var(--primaria); color: var(--branco); }
.receita .copiar svg { width: 14px; height: 14px; }