/* Componentes dos artigos (efeitos, gráficos, calculadoras, referências) */

/* Barra de progresso de leitura */
.read-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 70; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--primary), var(--accent)); }

/* Topo do artigo */
.art-head { text-align: center; padding-top: var(--s-7); padding-bottom: var(--s-5); }
.art-head h1 { margin: var(--s-4) auto; max-width: 16ch; }
.art-head .lead { font-size: 19px; color: var(--ink-3); max-width: 52ch; margin: 0 auto; }
.art-meta { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: var(--s-5); text-align: left; }

.art-hero { max-width: 1040px; margin: 0 auto var(--s-7); padding: 0 var(--s-5); perspective: 1200px; }
.art-hero .frame { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); transition: transform .3s var(--ease); transform-style: preserve-3d; aspect-ratio: 16/10; background: var(--bg-2); }
.art-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Texto */
.prose { max-width: 700px; margin: 0 auto; padding: 0 var(--s-5); font-size: 17.5px; line-height: 1.75; color: var(--ink-2); }
.prose h2 { font-family: var(--ff-display); font-size: 34px; font-weight: 500; margin: var(--s-8) 0 var(--s-4); letter-spacing: -0.01em; line-height: 1.15; color: var(--ink); }
.prose h2 .num { display: block; font-family: var(--ff-mono); font-size: 12px; letter-spacing: .16em; color: var(--primary); margin-bottom: 8px; }
.prose h3 { font-family: var(--ff-display); font-size: 23px; font-weight: 500; margin: var(--s-6) 0 var(--s-3); }
.prose p { margin: 0 0 var(--s-4); }
.prose ul { padding-left: 1.2em; margin: 0 0 var(--s-4); }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--ink); }
.prose a { color: var(--primary); border-bottom: 1px solid color-mix(in oklab, var(--primary) 40%, transparent); }
.prose sup a { border: none; font-family: var(--ff-mono); font-size: 11px; font-weight: 600; padding: 1px 5px; margin-left: 2px; border-radius: 6px; background: var(--primary-soft); color: var(--primary); text-decoration: none; }
.prose sup a:hover { background: var(--primary); color: #fff; }
@media (max-width: 560px) { .prose { font-size: 16.5px; } .prose h2 { font-size: 27px; } }

/* Blocos largos (saem da coluna de texto) */
.wide { max-width: 980px; margin: var(--s-7) auto; padding: 0 var(--s-5); }

/* Caixas de destaque */
.callout { display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-5); border-radius: var(--r-lg); background: var(--bg-2); border: 1px solid var(--line); margin: var(--s-5) 0; }
.callout .ico { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: var(--bg-3); }
.callout p:last-child { margin-bottom: 0; }
.callout.tip { background: color-mix(in oklab, var(--primary-soft) 45%, var(--bg-3)); border-color: transparent; }
.callout.warn { background: #fdf3e7; border-color: #f1dcc0; }

/* Números grandes que contam */
.stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.stat { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); text-align: center; }
.stat .v { font-family: var(--ff-display); font-size: clamp(38px, 6vw, 56px); line-height: 1; color: var(--primary); }
.stat .l { margin-top: 10px; font-size: 14px; color: var(--ink-3); }
.stat .src { margin-top: 8px; font-family: var(--ff-mono); font-size: 11px; color: var(--ink-4); }
.stat .src a { color: inherit; border-bottom: 1px dotted; }
@media (max-width: 720px) { .stat-strip { grid-template-columns: 1fr; } }

/* Gráfico de barras animado */
.chart { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--s-6); }
.chart h4 { font-family: var(--ff-display); font-weight: 500; font-size: 22px; margin-bottom: 4px; }
.chart .sub { font-size: 14px; color: var(--ink-3); margin-bottom: var(--s-5); }
.bar-row { display: grid; grid-template-columns: 130px 1fr; gap: var(--s-3); align-items: center; margin-bottom: 14px; }
.bar-row .name { font-size: 14px; font-weight: 600; color: var(--ink); }
.bar-track { height: 34px; border-radius: 10px; background: var(--bg-2); overflow: hidden; }
.bar-fill { height: 100%; width: 0; border-radius: 10px; display: flex; align-items: center; justify-content: flex-end; padding-right: 12px; color: #fff; font-family: var(--ff-mono); font-size: 13px; font-weight: 600; white-space: nowrap; transition: width 1.4s cubic-bezier(.2,.8,.2,1); background: var(--primary); }
.bar-fill.alt { background: var(--ink-3); } .bar-fill.acc { background: var(--accent); }
.chart.in .bar-fill { width: var(--w); }
.chart .foot { margin-top: var(--s-4); font-size: 12.5px; color: var(--ink-3); }
.chart .foot a { color: var(--primary); }
@media (max-width: 560px) { .chart { padding: var(--s-5); } .bar-row { grid-template-columns: 1fr; gap: 6px; } }

/* Linha do tempo de saturação */
.race { display: grid; gap: var(--s-4); }
.lane .lbl { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; }
.lane .lbl b { color: var(--ink); }
.lane .track { position: relative; height: 18px; border-radius: 9px; background: var(--bg-2); overflow: hidden; }
.lane .fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 9px; background: linear-gradient(90deg, var(--primary), var(--primary-2)); }
.chart.in .lane .fill { animation: lane var(--t) cubic-bezier(.3,.6,.3,1) forwards; }
@keyframes lane { to { width: 100%; } }
.lane .days { font-family: var(--ff-mono); font-size: 12px; color: var(--ink-3); margin-top: 6px; }

/* Curva (SVG desenhando) */
.curve path.line { stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 2.2s ease-out; }
.chart.in .curve path.line { stroke-dashoffset: 0; }
.curve .dot { opacity: 0; transition: opacity .4s 2s; }
.chart.in .curve .dot { opacity: 1; }

/* Cartões de mito × fato */
.flips { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
@media (max-width: 860px) { .flips { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .flips { grid-template-columns: 1fr; } }
.flip { perspective: 1000px; min-height: 230px; cursor: pointer; border: none; padding: 0; background: none; text-align: left; font: inherit; color: inherit; }
.flip-inner { position: relative; width: 100%; height: 100%; min-height: 230px; transition: transform .7s cubic-bezier(.3,1.3,.5,1); transform-style: preserve-3d; }
.flip.flipped .flip-inner { transform: rotateY(180deg); }
.flip-face { position: absolute; inset: 0; border-radius: var(--r-lg); padding: var(--s-5); backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; }
.flip-front { background: var(--ink); color: var(--bg); }
.flip-front .q { font-family: var(--ff-display); font-size: 22px; line-height: 1.25; margin-top: auto; color: var(--bg); }
.flip-front .hint { margin-top: var(--s-4); font-family: var(--ff-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.flip-back { display: block; overflow-y: auto; background: var(--bg-3); border: 1px solid var(--line); transform: rotateY(180deg); font-size: 14.5px; line-height: 1.55; }
.flip-back .verdict { display: block; font-family: var(--ff-mono); font-size: 12px; letter-spacing: .1em; font-weight: 700; margin-bottom: 8px; }
.flip-back .src { display: block; }
.verdict.mito { color: var(--danger); } .verdict.fato { color: var(--success); } .verdict.depende { color: #b07a26; }
.flip-back .src { margin-top: auto; padding-top: 10px; font-family: var(--ff-mono); font-size: 11px; color: var(--ink-4); }
.flip-front .tag { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--primary-2); }

/* Calculadora */
.calc { background: var(--ink); color: var(--bg); border-radius: var(--r-xl); padding: var(--s-6); position: relative; overflow: hidden; }
.calc::before { content: ""; position: absolute; width: 380px; height: 380px; right: -120px; top: -160px; border-radius: 50%; background: radial-gradient(circle, var(--primary-glow), transparent 70%); }
.calc > * { position: relative; }
.calc h4 { font-family: var(--ff-display); font-weight: 400; font-size: 26px; color: var(--bg); margin-bottom: 6px; }
.calc .sub { opacity: .7; font-size: 14px; margin-bottom: var(--s-5); }
.calc label { display: flex; justify-content: space-between; font-family: var(--ff-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.calc input[type=range] { width: 100%; margin: 14px 0 var(--s-5); accent-color: var(--primary-2); height: 28px; }
.calc .out { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s-4); }
.calc .out div { background: color-mix(in oklab, var(--bg) 8%, transparent); border: 1px solid color-mix(in oklab, var(--bg) 14%, transparent); border-radius: var(--r); padding: var(--s-4); }
.calc .out b { display: block; font-family: var(--ff-display); font-weight: 400; font-size: 36px; color: var(--primary-2); line-height: 1.1; }
.calc .out span { font-size: 13px; opacity: .75; }
.calc .note { margin-top: var(--s-4); font-size: 12.5px; opacity: .65; }
@media (max-width: 560px) { .calc { padding: var(--s-5); } }

/* Referências */
.refs { max-width: 700px; margin: var(--s-8) auto 0; padding: 0 var(--s-5); }
.refs h2 { font-family: var(--ff-display); font-weight: 500; font-size: 28px; margin-bottom: var(--s-3); }
.refs > p { font-size: 14px; color: var(--ink-3); margin-bottom: var(--s-4); }
.refs ol { padding-left: 1.4em; margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.refs li { margin-bottom: 14px; padding-left: 4px; scroll-margin-top: 90px; }
.refs li:target { background: color-mix(in oklab, var(--primary-soft) 60%, transparent); border-radius: 8px; }
.refs .links { display: inline-flex; gap: 8px; margin-left: 4px; flex-wrap: wrap; }
.refs .links a { font-family: var(--ff-mono); font-size: 11.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--primary); white-space: nowrap; }
.refs .links a:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.disclaimer { max-width: 700px; margin: var(--s-6) auto 0; padding: 0 var(--s-5); font-size: 13px; color: var(--ink-3); }

/* Cards de artigo (lista) */
.art-card { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-6); align-items: center; background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--s-5); transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.art-card:hover { box-shadow: var(--shadow-lg); }
.art-card .cover { aspect-ratio: 16/10; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-2); }
.art-card .cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.art-card:hover .cover img { transform: scale(1.04); }
@media (max-width: 860px) { .art-card { grid-template-columns: 1fr; gap: var(--s-4); } }