/* Capas das atividades (capas.js). O Tico fica de um lado e o resto no espaço livre do outro. */
.tk-capa.cp { background: radial-gradient(circle at 82% 18%, color-mix(in srgb, #fff 55%, transparent) 0 22%, transparent 23%), radial-gradient(circle at 10% 100%, color-mix(in srgb, var(--cc) 30%, #fff) 0 30%, transparent 31%), linear-gradient(150deg, color-mix(in srgb, var(--cc) 42%, #fff), color-mix(in srgb, var(--cc) 72%, #fff)); display: block }
.tk-capa.cp::before { display: none }
.cp .cp-tico { position: absolute; bottom: -3%; height: 96%; width: auto; max-width: 46%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 6px 8px rgba(75, 58, 42, .22)); pointer-events: none; user-select: none; z-index: 2 }
.cp .cp-tico.dir { right: 3% } .cp .cp-tico.esq { left: 3% }
.cp .cp-tico.menor { height: 84% }
.cp .cp-el { position: absolute; display: block; line-height: 0; z-index: 1; filter: drop-shadow(0 4px 6px rgba(75, 58, 42, .18)) }
.cp .cp-el svg { width: 100%; height: auto; display: block }
.cp .cp-bolha { position: absolute; z-index: 3; background: #fff; color: var(--ink, #3a2a1a); font-weight: 800; font-size: clamp(.62rem, 3.4cqw, 1.5rem); line-height: 1.1; padding: .45em .8em; border-radius: 1.2em; box-shadow: 0 3px 8px rgba(75, 58, 42, .18); white-space: nowrap; max-width: 52% }
.cp .cp-bolha::after { content: ''; position: absolute; right: 14%; bottom: -.42em; border: .45em solid transparent; border-top-color: #fff; border-bottom: 0 }
.cp .cp-bolha.forte { background: #E5483D; color: #fff; font-size: clamp(.7rem, 4cqw, 1.7rem) }
.cp .cp-bolha.forte::after { border-top-color: #E5483D }
.cp .cp-bolha.longa { background: #FFE08A }
.cp .cp-bolha.longa::after { border-top-color: #FFE08A }
.cp .cp-bolha.pequena { font-size: clamp(.56rem, 3cqw, 1.25rem) }
.cp .cp-carta { position: absolute; z-index: 1; aspect-ratio: 3 / 4; background: #fff; border-radius: 12%/9%; box-shadow: 0 4px 10px rgba(75, 58, 42, .2); display: grid; place-items: center; overflow: hidden; border: 3px solid #fff }
.cp .cp-carta img { width: 92%; height: 92%; object-fit: contain }
.cp .cp-carta.cena { aspect-ratio: 2 / 3; border-width: 4px }
.cp .cp-carta.cena img { width: 100%; height: 100%; object-fit: contain }
.cp .cp-carta.cena i { position: absolute; left: 6%; top: 6%; width: 28%; aspect-ratio: 1; border-radius: 50%; background: #7A4FB5; color: #fff; font: 800 clamp(.5rem, 2.8cqw, 1.1rem)/1 var(--fonte, sans-serif); display: grid; place-items: center }
.cp .cp-verso { width: 100%; height: 100%; display: grid; place-items: center; color: #fff; font-size: clamp(.9rem, 6cqw, 2.6rem); background: repeating-linear-gradient(45deg, #9B6FD0 0 10%, #B58ACB 10% 20%) }
.cp .cp-foto { position: absolute; z-index: 1; aspect-ratio: 1; background: #fff; padding: 3%; padding-bottom: 9%; box-shadow: 0 4px 10px rgba(75, 58, 42, .22); border-radius: 4px }
.cp .cp-foto img { width: 100%; height: 100%; object-fit: cover; display: block }
.tk-capa.cp { container-type: inline-size }
.cp-termos { position: absolute; inset: 6% 6% 0; display: flex; align-items: flex-end; justify-content: center; gap: 5% }
.cp-termos span { height: 92%; display: flex; align-items: flex-end }
.cp-termos span:nth-child(1) { height: 80% } .cp-termos span:nth-child(2) { height: 87% }
.cp-termos img { height: 100%; width: auto; filter: drop-shadow(0 6px 8px rgba(75, 58, 42, .2)) }
.cp-pd { position: absolute; inset: 10% 5%; display: flex; align-items: center; justify-content: center; gap: 4% }
.cp-pd span { width: 40%; aspect-ratio: 1; background: #fff; border-radius: 14%; box-shadow: 0 4px 10px rgba(75, 58, 42, .18); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 4%; gap: 3% }
.cp-pd span img { height: 72%; width: auto; max-width: 100%; object-fit: contain }
.cp-pd small { font: 800 clamp(.5rem, 3cqw, 1.2rem)/1 var(--fonte, sans-serif); color: #7A4FB5 }
.cp-pd b { font-size: clamp(1rem, 7cqw, 3rem); color: #fff; text-shadow: 0 2px 4px rgba(75, 58, 42, .25) }
.cp-sons { position: absolute; left: 4%; top: 34%; width: 52%; display: flex; align-items: center; gap: 4% }
.cp-sons span { flex: 1; background: #fff; border-radius: 22%; padding: 6%; box-shadow: 0 4px 10px rgba(75, 58, 42, .16) }
.cp-sons b { font-size: clamp(1rem, 6cqw, 2.6rem); color: #fff }
.cp-pensa { position: absolute; left: 8%; top: 22%; width: 40%; aspect-ratio: 1.2; background: #fff; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(75, 58, 42, .16); z-index: 1 }
.cp-pensa img { height: 78%; width: auto }
.cp-pensa i { position: absolute; background: #fff; border-radius: 50%; right: -12%; bottom: -4%; width: 14%; aspect-ratio: 1 } .cp-pensa i + i { right: -24%; bottom: -20%; width: 8% }
.cp-caixas { position: absolute; left: 4%; bottom: 10%; width: 54%; display: flex; align-items: flex-end; gap: 4%; z-index: 1 }
.cp-caixas span { flex: 1 } .cp-caixas span img { width: 100%; height: auto } .cp-caixas span:nth-child(2) { transform: translateY(-20%) }
.cp-caminhos { position: absolute; left: 0; bottom: 0; width: 60%; height: 80% }
.cp-caminhos i { position: absolute; bottom: -10%; width: 22%; height: 100%; border-radius: 50% 50% 0 0; background: rgba(255, 255, 255, .75) }
.cp-caminhos i.a { left: 6%; transform: skewX(14deg) } .cp-caminhos i.b { left: 36%; transform: skewX(-14deg) }
/* Medo: céu de entardecer acolhedor. */
.tk-capa.cp-quando-o-medo-aparece { background: radial-gradient(circle at 20% 20%, rgba(255, 224, 138, .35) 0 18%, transparent 19%), linear-gradient(160deg, #7C79C9, #B9A3DE 60%, #F4C6B8) }
/* Cartão "continuar": a capa vira miniatura sem perder a composição. */
.tk-retomar > .tk-capa.cp > * { transform: none }
.cp .cp-tico.largo { max-width: 58%; height: 92% }