:root {
  --bg: #F2F1EC;
  --ink: #121212;
  --muted: #6B6A64;
  --line: #D6D4CC;
  --card: #E3E2DC;
  --black: #0E0E0E;
  --lav: #D8CBF5;
  --peach: #F5D7C1;
  --peri: #C9CBF6;
  --orange: #F2560B;
  --blue: #1A27E8;
  --purple: #8A1FD6;
  --serif: 'Lusitana', Georgia, serif;
  --sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pad: clamp(16px, 4vw, 56px);
  --label: clamp(40px, 5.2vw, 76px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: var(--lav); }

/* ---------- barra de progresso (T01 — T06) ---------- */
.trilho {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 var(--pad); background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid transparent; transition: border-color .3s;
  font-size: 11px; letter-spacing: .02em;
}
.trilho.sujo { border-color: var(--line); }
.trilho .marca { font-weight: 700; white-space: nowrap; }
.trilho nav { display: flex; align-items: center; gap: 4px; }
.trilho nav button {
  background: none; border: 0; padding: 6px 4px; font-size: 11px; font-weight: 600; color: var(--muted);
  display: flex; align-items: center; gap: 4px;
}
.trilho nav button.ativo { color: var(--ink); }
.trilho nav .barra { width: 56px; height: 1px; background: var(--line); position: relative; overflow: hidden; }
.trilho nav .barra i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(0); }
.trilho nav .ponto { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
@media (max-width: 760px) {
  .trilho nav .barra { width: 14px; }
  .trilho .marca span { display: none; }
}

/* ---------- lâmina (cada "slide") ---------- */
.lamina {
  position: relative; min-height: 100vh; padding: 88px var(--pad) 64px;
  display: grid; grid-template-columns: calc(var(--label) * 1.25) 1fr; gap: clamp(16px, 3vw, 48px);
  border-top: 1px solid var(--line);
}
.lamina > .rotulo {
  font-family: var(--serif); font-weight: 400; font-size: var(--label); line-height: 1;
  writing-mode: vertical-rl; transform: rotate(180deg); align-self: end; justify-self: start;
  white-space: nowrap; letter-spacing: -.01em;
}
.lamina > .corpo { min-width: 0; align-self: center; }
.lamina .grupo-tag { position: absolute; top: 64px; left: var(--pad); font-size: 11px; font-weight: 700; color: var(--muted); }
@media (max-width: 860px) {
  .lamina { grid-template-columns: 1fr; padding-top: 76px; }
  .lamina > .rotulo { writing-mode: horizontal-tb; transform: none; font-size: 40px; align-self: start; white-space: normal; }
}

h2.titulo { font-family: var(--serif); font-weight: 700; font-size: clamp(28px, 3.4vw, 48px); line-height: 1.08; margin: 0 0 16px; letter-spacing: -.01em; max-width: 22ch; }
h3 { font-family: var(--sans); font-weight: 800; font-size: 15px; margin: 0 0 8px; letter-spacing: .01em; }
p { margin: 0 0 12px; }
.lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; max-width: 62ch; }
.nota { font-size: 13px; color: var(--muted); max-width: 70ch; }
.miudo { font-size: 12px; color: var(--muted); }
.serif { font-family: var(--serif); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- capa ---------- */
.capa { min-height: 100vh; padding: 72px var(--pad) 40px; display: grid; grid-template-columns: 56px 1fr; gap: 24px; position: relative; overflow: hidden; }
.capa .lado { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; line-height: 1.6; color: var(--ink); align-self: end; }
.capa .lado b { font-weight: 800; }
.capa h1 {
  font-family: var(--serif); font-weight: 700; font-size: clamp(64px, 15vw, 248px); line-height: .82;
  letter-spacing: -.045em; margin: 0; position: relative; z-index: 2;
}
.capa h1 .linha { display: block; overflow: hidden; padding-bottom: .06em; }
.capa .mosaico { margin-top: -0.4vw; height: clamp(260px, 42vh, 460px); overflow: hidden; position: relative; background: var(--black); }
.capa .fita { display: flex; gap: 6px; height: 50%; padding: 3px 0; will-change: transform; }
.capa .fita img { height: 100%; width: auto; aspect-ratio: 16/9; object-fit: cover; }
.capa .rodape { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-top: 20px; flex-wrap: wrap; }
.capa .rodape .lead { margin: 0; max-width: 46ch; }
.capa .rodape .seta { font-size: 12px; font-weight: 700; display: flex; gap: 8px; align-items: center; }
@media (max-width: 860px) { .capa { grid-template-columns: 1fr; } .capa .lado { writing-mode: horizontal-tb; transform: none; } }

/* ---------- índice (silhueta) ---------- */
.indice svg { width: 100%; height: auto; overflow: visible; }
.indice .tarefa { font-family: var(--serif); }
.indice .legenda { margin-top: 12px; }

/* ---------- capítulo ---------- */
.capitulo { display: grid; grid-template-columns: 1fr minmax(240px, 30%); min-height: 100vh; background: var(--black); color: #fff; position: relative; overflow: hidden; }
.capitulo .foto { position: relative; overflow: hidden; min-height: 60vh; }
.capitulo .foto > img, .capitulo .foto > .grade { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.capitulo .foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.72)); }
.capitulo .foto .grade { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 4px; background: #000; }
.capitulo .foto .grade img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/9; }
.capitulo .foto .grade.cinza img { filter: grayscale(1) contrast(1.1) brightness(.75); }
.capitulo .foto .grade.cinza img.acesa { filter: none; }
.capitulo h2 { position: absolute; left: var(--pad); bottom: 40px; z-index: 2; margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(36px, 5vw, 76px); line-height: 1; letter-spacing: -.02em; max-width: calc(100% - 2 * var(--pad)); }
.capitulo .lista { padding: 96px 32px 40px; font-size: 13px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.capitulo .lista li { list-style: none; display: flex; gap: 10px; align-items: baseline; }
.capitulo .lista li::before { content: ''; width: 4px; height: 4px; background: #fff; border-radius: 50%; flex: none; transform: translateY(-2px); }
.capitulo .lista ul { margin: 0; padding: 0; display: grid; gap: 8px; }
.capitulo .lista .resumo { margin-top: 28px; color: #BDBDB6; line-height: 1.55; }
@media (max-width: 860px) { .capitulo { grid-template-columns: 1fr; } .capitulo .lista { padding: 32px var(--pad) 48px; } }

/* ---------- blocos genéricos ---------- */
.duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.quatro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 960px) { .duas, .tres { grid-template-columns: 1fr; } .quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cartao { background: var(--card); padding: 18px; border-radius: 2px; }
.cartao.lav { background: var(--lav); } .cartao.peach { background: var(--peach); } .cartao.peri { background: var(--peri); }
.cartao.preto { background: var(--black); color: #fff; }
.cartao .grande { font-family: var(--serif); font-weight: 700; font-size: clamp(34px, 4vw, 56px); line-height: 1; letter-spacing: -.02em; }
.cartao .rot { font-size: 12px; font-weight: 700; margin-top: 8px; }
.cartao p { font-size: 14px; }

.etiqueta { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: var(--ink); color: var(--bg); white-space: nowrap; }
.etiqueta.clara { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.etiqueta.lav { background: var(--lav); color: var(--ink); } .etiqueta.peach { background: var(--peach); color: var(--ink); }

/* thumbs do canal */
.faixa-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.faixa-thumbs figure { margin: 0; }
.faixa-thumbs img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.faixa-thumbs figcaption { font-size: 11px; margin-top: 6px; line-height: 1.35; }
@media (max-width: 760px) { .faixa-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* reels */
.reel { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.reel .barra-v { grid-column: 1 / -1; height: 6px; background: var(--card); position: relative; }
.reel .barra-v i { position: absolute; inset: 0 auto 0 0; background: var(--ink); transform-origin: left; }
.reel .abre { grid-column: 1 / -1; font-family: var(--serif); font-size: 15px; color: #333; }

/* prisma (emissor/receptor) */
.prisma { display: grid; grid-template-columns: 34px 1fr 1fr 34px; grid-template-rows: auto auto auto auto auto; gap: 8px; align-items: stretch; }
.prisma .eixo { font-family: var(--serif); font-size: 18px; text-align: center; }
.prisma .lateral { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--serif); font-size: 18px; text-align: center; grid-row: 2 / 6; grid-column: 1; align-self: center; }
.prisma .lateral.dir { transform: none; grid-column: 4; }
.prisma .caixa { background: var(--black); color: #fff; padding: 14px 16px; font-size: 13px; }
.prisma .caixa b { display: inline-block; font-size: 10px; letter-spacing: .08em; background: #fff; color: var(--black); padding: 2px 6px; margin-bottom: 8px; }
.prisma .fotos { grid-column: 2 / 4; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.prisma .fotos img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
@media (max-width: 760px) {
  .prisma { grid-template-columns: 1fr; } .prisma .lateral { display: none; } .prisma .fotos, .prisma .eixo { grid-column: 1 !important; }
}

/* persona */
.persona { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 12px; }
.persona .bloco { padding: 18px; }
.persona ul { margin: 0; padding-left: 18px; font-size: 14px; } .persona li { margin-bottom: 6px; }
.persona .busca { font-family: var(--serif); font-size: 17px; line-height: 1.35; }
.persona .busca span { display: block; padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,.12); }
@media (max-width: 960px) { .persona { grid-template-columns: 1fr; } }

/* ---------- grade de vídeos ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 8px; align-items: center; }
.filtros .chip { border: 1px solid var(--ink); background: transparent; padding: 6px 12px; border-radius: 99px; font-size: 12px; font-weight: 600; position: relative; }
.filtros .chip span { position: relative; z-index: 1; }
.filtros .chip .fundo { position: absolute; inset: -1px; border-radius: 99px; background: var(--ink); z-index: 0; }
.filtros .chip.ativo { color: var(--bg); }
.filtros .sep { width: 1px; height: 20px; background: var(--line); margin: 0 6px; }
.filtros select { font: inherit; font-size: 12px; font-weight: 600; background: transparent; border: 1px solid var(--line); padding: 6px 10px; border-radius: 99px; }

.grade-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px 14px; margin-top: 16px; }
.video { background: none; border: 0; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.video .tb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #000; }
.video .tb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.video:hover .tb img { transform: scale(1.04); }
.video .rank { position: absolute; left: 8px; top: 6px; font-family: var(--serif); font-weight: 700; font-size: 30px; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.6); line-height: 1; }
.video .dur { position: absolute; right: 6px; bottom: 6px; background: rgba(0,0,0,.82); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 5px; border-radius: 3px; }
.video .tit { font-weight: 700; font-size: 14px; line-height: 1.3; }
.video .pt { font-family: var(--serif); font-size: 14px; color: #3a3a36; line-height: 1.3; }
.video .meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--muted); }
.video .meta b { color: var(--ink); }
.video .tags { display: flex; gap: 4px; flex-wrap: wrap; }

/* modal */
.veu { position: fixed; inset: 0; background: rgba(14,14,14,.6); z-index: 80; }
.ficha {
  position: fixed; z-index: 90; inset: 4vh max(16px, calc(50vw - 520px)); background: var(--bg); overflow: auto;
  overscroll-behavior: contain; box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.ficha .topo { position: relative; aspect-ratio: 16/9; max-height: 52vh; width: 100%; background: #000; }
.ficha .topo img { width: 100%; height: 100%; object-fit: cover; }
.ficha .fechar { position: sticky; top: 12px; float: right; margin: 12px 12px 0 0; z-index: 3; background: var(--ink); color: var(--bg); border: 0; width: 36px; height: 36px; border-radius: 50%; font-size: 18px; line-height: 1; }
.ficha .miolo { padding: 24px clamp(16px, 4vw, 40px) 40px; }
.ficha h2 { font-family: var(--serif); font-size: clamp(24px, 3vw, 36px); line-height: 1.1; margin: 4px 0 6px; }
.ficha .original { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.ficha .linha-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.ficha .sec { padding: 16px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 180px 1fr; gap: 16px; }
.ficha .sec h4 { margin: 0; font-family: var(--serif); font-size: 18px; font-weight: 700; }
.ficha .sec ol, .ficha .sec ul { margin: 0; padding-left: 18px; } .ficha .sec li { margin-bottom: 6px; }
.ficha .sec.destaque { background: var(--lav); padding: 16px; border-top: 0; margin: 4px 0; }
@media (max-width: 700px) { .ficha { inset: 0; } .ficha .sec { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- gráficos ---------- */
.grafico svg { width: 100%; height: auto; overflow: visible; font-family: var(--sans); }
.grafico .eixo-x text { font-size: 11px; fill: var(--muted); }
.legenda-g { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; margin-top: 8px; }
.legenda-g i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }

.barras .linha { display: grid; grid-template-columns: minmax(160px, 1.3fr) 2fr 64px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.barras .trilha { height: 22px; background: var(--card); position: relative; }
.barras .trilha i { position: absolute; inset: 0 auto 0 0; background: var(--orange); transform-origin: left; }
.barras .trilha .base { position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--ink); }
.barras .x { font-family: var(--serif); font-weight: 700; font-size: 24px; text-align: right; }
@media (max-width: 700px) { .barras .linha { grid-template-columns: 1fr 52px; } .barras .trilha { grid-column: 1 / -1; grid-row: 2; } }

.anotada { position: relative; }
.anotada img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.anotada .pino { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: var(--orange); color: #fff; font-weight: 800; font-size: 13px; display: grid; place-items: center; box-shadow: 0 0 0 3px #fff; }
.pinos-lista { margin: 12px 0 0; padding: 0; list-style: none; font-size: 14px; counter-reset: p; }
.pinos-lista li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; margin-bottom: 8px; }
.pinos-lista li::before { counter-increment: p; content: counter(p); width: 22px; height: 22px; border-radius: 50%; background: var(--orange); color: #fff; font-weight: 800; font-size: 12px; display: grid; place-items: center; }

.matriz { position: relative; aspect-ratio: 1.45; background: var(--card); }
.matriz .q { position: absolute; width: 50%; height: 50%; }
.matriz .q.alvo { right: 0; top: 0; background: var(--peach); }
.matriz .q.alvo span { position: absolute; right: 12px; top: 10px; font-family: var(--serif); font-weight: 700; font-size: 18px; }
.matriz .cruz-h { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ink); }
.matriz .cruz-v { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--ink); }
.matriz .ponto { position: absolute; width: clamp(52px, 7.4vw, 112px); transform: translate(-50%, -50%); box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.matriz .ponto img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.matriz .ex { position: absolute; font-family: var(--serif); font-size: 15px; }
.matriz-wrap { display: grid; grid-template-columns: 24px 1fr; gap: 8px; }
.matriz-wrap .y { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--serif); font-size: 15px; display: flex; justify-content: space-between; }
.matriz-wrap .x { grid-column: 2; display: flex; justify-content: space-between; font-family: var(--serif); font-size: 15px; }

.aberturas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.aberturas .cartao .grande { font-size: 44px; }
.aberturas .cartao p { font-size: 13px; margin: 8px 0 0; }

/* referências: faixa horizontal */
.refs-pin { overflow: hidden; }
.refs-trilho { display: flex; gap: 16px; width: max-content; padding-right: var(--pad); }
.ref { width: min(560px, 82vw); flex: none; background: var(--card); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.ref:nth-child(3n+1) { background: var(--lav); } .ref:nth-child(3n+2) { background: var(--peach); } .ref:nth-child(3n) { background: var(--peri); }
.ref h3 { font-family: var(--serif); font-size: 32px; font-weight: 700; margin: 0; line-height: 1; }
.ref .nums { display: flex; gap: 16px; font-size: 12px; }
.ref .nums b { display: block; font-family: var(--serif); font-size: 22px; }
.ref .tbs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ref .tbs figure { margin: 0; }
.ref .tbs img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.ref .tbs figcaption { font-size: 11px; line-height: 1.3; margin-top: 4px; }
.ref .licao { font-size: 14px; line-height: 1.5; margin: 0; }
@media (max-width: 860px) { .refs-trilho { flex-direction: column; width: auto; } .ref { width: auto; } }

/* aplicação */
.de-para { width: 100%; border-collapse: collapse; font-size: 14px; }
.de-para th { text-align: left; font-family: var(--serif); font-size: 18px; padding: 10px 12px; }
.de-para td { padding: 12px; vertical-align: top; border-top: 1px solid var(--line); }
.de-para td:first-child { font-weight: 700; width: 18%; }
.de-para td:nth-child(2) { background: var(--card); width: 38%; }
.de-para td:nth-child(3) { background: var(--peach); }
@media (max-width: 700px) { .de-para, .de-para tbody, .de-para tr, .de-para td { display: block; width: auto !important; } .de-para thead { display: none; } .de-para td:first-child { padding-bottom: 4px; border: 0; } .de-para tr { border-top: 1px solid var(--line); padding: 8px 0; } }

.moldes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.molde { padding: 18px; background: var(--card); display: flex; flex-direction: column; gap: 10px; }
.molde .n { font-family: var(--serif); font-weight: 700; font-size: 14px; color: var(--muted); }
.molde h4 { margin: 0; font-size: 15px; font-weight: 800; }
.molde .ex { font-family: var(--serif); font-size: 19px; line-height: 1.25; }
.molde .de { font-size: 12px; color: var(--muted); margin-top: auto; }

.thumbs-mock { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 960px) { .thumbs-mock { grid-template-columns: 1fr; } }
.mock { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #111; container-type: inline-size; }
.mock img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mock .t { position: absolute; font-family: 'Figtree', sans-serif; font-weight: 800; line-height: .92; color: #fff; letter-spacing: -.02em; text-transform: uppercase; }
.mock.a img { object-position: 70% 50%; transform: scale(1.25) translateX(14%); }
.mock.a::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.92) 0, rgba(0,0,0,.65) 45%, transparent 70%); z-index: 1; }
.mock.a .t { z-index: 2; left: 5%; top: 50%; transform: translateY(-50%); font-size: 13cqw; }
.mock.a .t em { font-style: normal; background: var(--orange); padding: 0 .1em; }
.mock.b img { transform: scale(1.3) translateX(-16%); object-position: 30% 50%; }
.mock.b .ui { position: absolute; right: 5%; top: 18%; width: 46%; background: #fff; border-radius: 8px; padding: 4% 5%; box-shadow: 0 8px 30px rgba(0,0,0,.5); z-index: 2; color: #111; font-size: 3.6cqw; transform: rotate(2deg); }
.mock.b .ui .v { font-size: 7.6cqw; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; white-space: nowrap; }
.mock.b .ui .v small { font-size: 4cqw; font-weight: 600; color: #555; }
.mock.b .t { z-index: 2; left: 4%; bottom: 6%; font-size: 8.5cqw; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.mock.c img { transform: scale(1.25) translateX(-14%); }
.mock.c::before { content: ''; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(0,0,0,.9) 0, rgba(0,0,0,.6) 45%, transparent 72%); z-index: 1; }
.mock.c .t { z-index: 2; right: 5%; top: 50%; transform: translateY(-50%); text-align: right; font-size: 10.5cqw; }
.mock.c .t s { text-decoration-thickness: .12em; text-decoration-color: #ff2a2a; color: #ddd; }
.mock.c .t em { font-style: normal; color: #ffd400; }
.mock-legenda { font-size: 13px; margin-top: 8px; }

.roteiro { display: grid; grid-template-columns: minmax(130px, 3fr) minmax(150px, 6fr) 40fr minmax(150px, 15fr) minmax(150px, 15fr); gap: 3px; margin-top: 12px; }
.roteiro .bloco { padding: 14px 12px; min-height: 160px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.roteiro .bloco .tempo { font-family: var(--serif); font-weight: 700; font-size: 18px; }
.roteiro .bloco:nth-child(1) { background: var(--orange); color: #fff; }
.roteiro .bloco:nth-child(2) { background: var(--peach); }
.roteiro .bloco:nth-child(3) { background: var(--card); }
.roteiro .bloco:nth-child(4) { background: var(--lav); }
.roteiro .bloco:nth-child(5) { background: var(--black); color: #fff; }
@media (max-width: 960px) { .roteiro { grid-template-columns: 1fr; } .roteiro .bloco { min-height: 0; } }

.descricao { background: var(--black); color: #E9E8E2; padding: 22px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; }
.descricao .ph { color: var(--peach); }

.semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.semana .dia { padding: 14px 12px; background: var(--card); min-height: 170px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.semana .dia .d { font-family: var(--serif); font-weight: 700; font-size: 20px; }
.semana .dia:nth-child(odd) { background: var(--lav); }
.semana .dia.fds { background: transparent; border: 1px dashed var(--line); }
@media (max-width: 960px) { .semana { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pautas { margin-top: 12px; }
.pauta { display: grid; grid-template-columns: 56px 1fr 220px; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); align-items: start; }
.pauta .n { font-family: var(--serif); font-weight: 700; font-size: 28px; line-height: 1; }
.pauta .t { font-family: var(--serif); font-size: clamp(18px, 1.7vw, 22px); line-height: 1.25; margin-bottom: 6px; }
.pauta .a { font-size: 14px; color: #3a3a36; margin: 0; }
.pauta .ref-mini { display: flex; gap: 8px; align-items: start; font-size: 11px; color: var(--muted); line-height: 1.3; }
.pauta .ref-mini img { width: 84px; aspect-ratio: 16/9; object-fit: cover; flex: none; }
@media (max-width: 860px) { .pauta { grid-template-columns: 40px 1fr; } .pauta .ref-mini { grid-column: 2; } }

.metodo dl { display: grid; grid-template-columns: 200px 1fr; gap: 10px 20px; margin: 0; font-size: 14px; }
.metodo dt { font-family: var(--serif); font-weight: 700; font-size: 16px; }
.metodo dd { margin: 0; }
@media (max-width: 700px) { .metodo dl { grid-template-columns: 1fr; } .metodo dd { margin-bottom: 8px; } }

.fim { padding: 64px var(--pad); background: var(--black); color: #fff; display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.fim .serif { font-size: clamp(40px, 8vw, 120px); line-height: .9; font-weight: 700; letter-spacing: -.03em; }

.revela { will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}