/* Meu Caderno CEP: caderno de espiral, capa que abre, folhas que viram, letra de mão nas linhas e versão para imprimir (PDF) */
.cad { --cad-roxo: #540094; --cad-escuro: #25043B; --cad-ciano: #21C4F7; --cad-verde: #ABD905; --cad-papel: #FFFDF6; --cad-linha: 28px; --cad-mao: 'Dancing Script'; --cad-tinta: #1D2C73;
  --cad-espiral: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='46' height='34' viewBox='0 0 46 34'><defs><linearGradient id='f' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23FFFFFF'/><stop offset='.45' stop-color='%23C9C3D8'/><stop offset='1' stop-color='%238C85A6'/></linearGradient></defs><ellipse cx='30' cy='17' rx='6' ry='5.2' fill='%231E1236' opacity='.55'/><ellipse cx='30' cy='17' rx='4.6' ry='3.9' fill='%23120A24'/><path d='M3 24 C6 11 19 7 31 13' fill='none' stroke='%23000' stroke-opacity='.18' stroke-width='4.6' stroke-linecap='round' transform='translate(0 1.2)'/><path d='M3 24 C6 11 19 7 31 13' fill='none' stroke='url(%23f)' stroke-width='3.6' stroke-linecap='round'/><path d='M31 13 C35 15 36 20 31 22' fill='none' stroke='url(%23f)' stroke-width='3.2' stroke-linecap='round' opacity='.95'/></svg>");
  max-width: 940px; margin: 8px auto 40px; font-family: 'Montserrat', system-ui, sans-serif; color: #25043B; }
.cad * { box-sizing: border-box; }
.cad-mao, .cad-lapis, .cad-oi, .cad-carta, .cad-assina, .cad-fim-mao, .cad-capa-nome, .cad-frases blockquote p, .cad-declara p, .cad-data { font-family: var(--cad-mao), 'Segoe Script', cursive; }

/* ── capa fechada: caderno creme de espiral, com elástico verde e o caminho tracejado ── */
.cad-livro { position: relative; display: flex; justify-content: center; padding: 18px 0 32px; perspective: 2000px; }
.cad-capa { position: relative; width: min(460px, 92vw, calc((100vh - 230px) * .6875)); min-width: 200px; aspect-ratio: 11 / 16; container-type: inline-size; border-radius: 5px 20px 20px 5px; color: #2B1B5E; transform-origin: left center; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.5, 0, .2, 1), box-shadow .9s; overflow: visible;
  background: radial-gradient(120% 90% at 35% 0%, rgba(255, 255, 255, .6), transparent 60%), linear-gradient(135deg, #F8F2E6, #F0E7D7 65%, #E8DDC9);
  box-shadow: 0 28px 50px rgba(37, 4, 59, .3), 0 1px 0 #D9CDB6, 5px 5px 0 -1px #EDE4D2, 8px 8px 0 -2px #DDD1BA, 11px 11px 16px -2px rgba(0, 0, 0, .28); }
.cad-capa::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .55; background: repeating-linear-gradient(90deg, rgba(120, 95, 50, .035) 0 2px, transparent 2px 5px), repeating-linear-gradient(0deg, rgba(120, 95, 50, .03) 0 2px, transparent 2px 6px), linear-gradient(100deg, rgba(255, 255, 255, .5), transparent 25%, transparent 70%, rgba(120, 95, 50, .1)); }
.cad-espiral { position: absolute; left: -17px; top: 14px; bottom: 14px; width: 46px; z-index: 6; background: var(--cad-espiral) 0 0 / 46px 34px repeat-y; filter: drop-shadow(1px 2px 1.5px rgba(0, 0, 0, .3)); }
.cad-elastico { position: absolute; right: 9%; top: -1.5%; bottom: -1.5%; width: 5.5%; z-index: 2; background: linear-gradient(90deg, #98BA1B, #BDDC3E 50%, #98BA1B); box-shadow: 0 0 9px rgba(0, 0, 0, .25); }
.cad-trilha { position: absolute; right: 12%; top: 3%; width: 36%; height: 94%; z-index: 1; }
.cad-capa-miolo { position: relative; z-index: 3; height: 100%; padding: 8% 17% 13% 15%; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.cad-logo { width: 46%; height: auto; display: block; }
.cad-capa-marca { margin: 10% 0 0; font-size: 2.6cqw; letter-spacing: .16em; text-transform: uppercase; line-height: 1.8; color: #5A4A8A; font-weight: 600; }
.cad-capa h1 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 9cqw; line-height: 1.04; margin: 8% 0 0; color: #2B1B5E; letter-spacing: -.01em; }
.cad-capa h1 span { display: inline-block; margin-left: 4px; font-family: var(--cad-mao), cursive; font-style: normal; font-weight: 700; color: #8DB61D; font-size: 1.2em; line-height: 1; transform: rotate(-4deg); }
.cad-fio { display: block; width: 26%; height: 3px; margin: 5% 0 4%; background: #B9D83B; border-radius: 2px; }
.cad-capa-nome { font-weight: 700; font-size: 7.4cqw; line-height: 1.1; margin: 0; color: #3B2A78; transform: rotate(-1.5deg); transform-origin: left center; }
.cad-capa-per { margin: 4% 0 0; font-size: 2.6cqw; letter-spacing: .14em; text-transform: uppercase; line-height: 1.8; color: #5A4A8A; font-weight: 600; }
.cad-abrir { margin-top: auto; padding: 11px 20px; border: 0; border-radius: 999px; background: #540094; color: #fff; font: 700 .85rem 'Montserrat', sans-serif; cursor: pointer; box-shadow: 0 6px 14px rgba(37, 4, 59, .3); transition: transform .2s, background .2s; }
.cad-abrir:hover { transform: translateY(-2px); background: #6A12B3; }
.cad-sombra { position: absolute; left: 50%; bottom: 8px; width: min(360px, 78vw); height: 16px; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(0, 0, 0, .28), transparent 70%); filter: blur(4px); }
.cad.abrindo .cad-capa { transform: rotateY(-168deg); box-shadow: 0 10px 20px rgba(37, 4, 59, .2); }
.cad.aberto .cad-livro { display: none; }

/* ── caderno aberto: folha com espiral, margem, fita marcadora e pilha de folhas ── */
.cad-aberto { animation: cadSurge .6s ease both; }
body.cad-travado { overflow: hidden; }
/* o caderno aberto ocupa a tela inteira: tudo cabe sem rolar a página, e dá para fechar */
.cad-aberto { position: fixed; inset: 0; z-index: 3000; display: flex; flex-direction: column; align-items: center; padding: 10px 12px 12px; background: radial-gradient(120% 90% at 20% 0%, #4A1380, #25043B 70%); }
.cad-aberto[hidden] { display: none; }
.cad-barra { width: min(940px, 100%); display: flex; align-items: center; gap: 10px; padding: 4px 4px 10px; color: #fff; }
.cad-barra button { padding: 9px 16px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .12); color: #fff; font: 700 .85rem 'Montserrat', sans-serif; cursor: pointer; }
.cad-barra button:hover { background: rgba(255, 255, 255, .24); }
.cad-barra .cad-fechar { background: #ABD905; border-color: #ABD905; color: #25043B; }
.cad-barra .cad-pdf { background: #fff; color: #540094; border-color: #fff; }
.cad-barra-titulo { flex: 1; text-align: center; font-family: 'Fraunces', Georgia, serif; font-size: .95rem; opacity: .9; }
.cad-barra-dir { display: flex; gap: 8px; }
.cad-aberto .cad-mesa { flex: 1; min-height: 0; width: min(940px, 100%); }
.cad-aberto .cad-papel { height: 100%; max-height: none; min-height: 0; }
.cad-aberto .cad-ctrl { margin-top: 12px; }
.cad-aberto .cad-ctrl button { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .5); }
.cad-aberto .cad-ctrl button:hover:not(:disabled) { background: rgba(255, 255, 255, .26); }
.cad-aberto .cad-pag { color: #fff; opacity: .85; }
@keyframes cadSurge { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.cad-mesa { position: relative; padding: 0 48px 0 20px; }
.cad-papel { position: relative; min-height: 540px; max-height: 78vh; overflow-y: auto; overflow-x: hidden; border-radius: 4px 14px 14px 4px; padding: 24px 28px 28px 62px; outline: none; perspective: 2400px; scrollbar-width: thin; scrollbar-color: #D9CCEE transparent;
  background: linear-gradient(90deg, rgba(0, 0, 0, .09), transparent 5%), var(--cad-papel);
  box-shadow: 0 20px 44px rgba(37, 4, 59, .22), 1px 1px 0 #EDE5D2, 2px 2px 0 #FFFDF6, 3px 3px 0 #E6DDC9, 4px 4px 0 #FFFDF6, 5px 5px 0 #DFD5BF, 6px 6px 0 #FFFDF6, 7px 7px 0 #D8CDB6, 8px 9px 14px rgba(0, 0, 0, .18); }
.cad-papel::before { content: ''; position: absolute; left: 54px; top: 0; bottom: 0; width: 2px; background: rgba(214, 90, 120, .28); pointer-events: none; }
.cad-folhas { position: relative; }
.cad-furos { position: absolute; left: 3px; top: 12px; bottom: 12px; width: 46px; background: var(--cad-espiral) 0 0 / 46px 34px repeat-y; filter: drop-shadow(1px 2px 1.5px rgba(0, 0, 0, .28)); z-index: 4; pointer-events: none; }
.cad-fita { position: absolute; right: 60px; top: -4px; width: 16px; height: 74px; background: linear-gradient(90deg, #6A12B3, #540094); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%); box-shadow: 0 3px 6px rgba(0, 0, 0, .3); z-index: 5; }
.cad-abas { position: absolute; right: 0; top: 28px; display: flex; flex-direction: column; gap: 8px; z-index: 2; }
.cad-abas button { writing-mode: vertical-rl; transform: rotate(180deg); padding: 12px 7px; border: 0; border-radius: 0 10px 10px 0; background: #D9CCEE; color: #25043B; font: 700 .72rem 'Montserrat', sans-serif; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; box-shadow: 2px 2px 6px rgba(0, 0, 0, .15); transition: padding .2s, filter .2s; }
.cad-abas button:hover { padding-right: 11px; }
.cad-abas button:nth-child(2) { background: #BFE9FA; } .cad-abas button:nth-child(3) { background: #E4F4B5; } .cad-abas button:nth-child(4) { background: #F5E7A8; } .cad-abas button:nth-child(5) { background: #F6C9D6; }
.cad-abas button.atual { filter: saturate(1.4) brightness(.96); box-shadow: -3px 0 0 #540094 inset, 2px 2px 6px rgba(0, 0, 0, .15); }
.cad-folha { display: none; }
.cad-folha.ativa { display: block; animation: cadMostra .5s ease both; }
@keyframes cadMostra { from { opacity: .35; } to { opacity: 1; } }
/* a folha que vira (o clone gira em torno da espiral) */
.cad-virando { position: absolute; z-index: 6; left: 0; top: 0; width: 100%; background: linear-gradient(90deg, rgba(0, 0, 0, .09), transparent 5%), var(--cad-papel); padding: 24px 28px 28px 62px; transform-origin: left center; backface-visibility: hidden; transition: transform .85s cubic-bezier(.45, .05, .2, 1), box-shadow .85s; border-radius: 4px 14px 14px 4px; box-shadow: 4px 0 14px rgba(0, 0, 0, .12); overflow: hidden; }
.cad-virando::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .18)); opacity: 0; transition: opacity .85s; }
.cad-virando.vai { transform: rotateY(-178deg); box-shadow: -10px 0 18px rgba(0, 0, 0, .1); } .cad-virando.vai::after { opacity: 1; }
.cad-virando.volta { transform: rotateY(-178deg); } .cad-virando.volta.vai { transform: none; }
@media (prefers-reduced-motion: reduce) { .cad-virando { display: none; } .cad-capa { transition: none; } }

.cad-cab { margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--cad-cor, #540094); }
.cad-cab small { display: block; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cad-cor, #540094); font-weight: 800; }
.cad-cab h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: clamp(1.2rem, 3.4vw, 1.55rem); margin: 4px 0 2px; color: #25043B; }
.cad-cab p { margin: 0; color: #6B6480; font-size: .92rem; }
.cad-texto { line-height: 1.6; color: #3A3555; font-size: .9rem; }
.cad-nota { color: #6B6480; font-size: .88rem; }
.cad-vazio { color: #9E97AC; font-style: italic; }

/* ── a escrita à mão: cada linha apoiada na pauta, com tinta azul e pequenas variações ── */
.cad-carta-wrap { padding-top: 0; background: repeating-linear-gradient(180deg, transparent 0, transparent calc(var(--cad-linha) - 1px), rgba(60, 80, 160, .22) calc(var(--cad-linha) - 1px), rgba(60, 80, 160, .22) var(--cad-linha)); background-position: 0 var(--cad-ajuste, 21px); }
.cad-carta-wrap > p, .cad-carta p, .cad-assina, .cad-oi, .cad-data { margin: 0; line-height: var(--cad-linha); color: var(--cad-tinta); text-shadow: 0 0 .6px rgba(29, 44, 115, .55); }
.cad-data { text-align: right; font-size: 1rem; font-weight: 500; transform: rotate(-.4deg); }
.cad-oi { font-size: 1.55rem; font-weight: 700; margin-top: var(--cad-linha); transform: rotate(-.5deg); transform-origin: left center; }
.cad-carta { margin-top: 0; }
.cad-carta p { font-size: 1.12rem; font-weight: 500; letter-spacing: .012em; margin: 0 0 var(--cad-linha); transform: rotate(-.32deg); transform-origin: left center; }
.cad-carta p:nth-child(even) { transform: rotate(.28deg); letter-spacing: .018em; margin-left: 3px; }
.cad-carta p:nth-child(3n) { margin-left: -2px; }
.cad-assina { font-size: 1.65rem; font-weight: 700; margin-top: 0; transform: rotate(-1.2deg); transform-origin: left center; }
.cad-assina small { display: block; font-family: 'Montserrat', sans-serif; font-size: .68rem; letter-spacing: .08em; color: #6B6480; text-transform: uppercase; text-shadow: none; line-height: 18px; }

/* o caminho em um olhar */
.cad-fases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cad-fase { border: 1.5px solid var(--cad-cor); border-radius: 16px; padding: 14px; background: #fff; }
.cad-fase-letra { display: inline-flex; width: 34px; height: 34px; border-radius: 50%; background: var(--cad-cor); color: #fff; align-items: center; justify-content: center; font-weight: 800; }
.cad-fase b { display: block; margin-top: 8px; font-size: 1.05rem; } .cad-fase small { display: block; color: #6B6480; margin: 2px 0 8px; line-height: 1.35; }
.cad-fase ul { list-style: none; margin: 0; padding: 0; } .cad-fase li { padding: 4px 0; border-top: 1px dashed #E4DEEC; font-size: .92rem; } .cad-fase li::before { content: '✓ '; color: #7FAF00; font-weight: 800; } .cad-fase li.mudo::before { content: ''; }

/* frases (bilhetes), declaração e metas */
.cad-frases { display: grid; gap: 16px; }
.cad-frases blockquote, .cad-declara { margin: 0; padding: 14px 18px; background: #FFF9DB; border-radius: 3px; box-shadow: 2px 3px 8px rgba(0, 0, 0, .14); transform: rotate(-.8deg); position: relative; }
.cad-frases blockquote::before { content: ''; position: absolute; top: -9px; left: 46%; width: 54px; height: 16px; background: rgba(171, 217, 5, .55); transform: rotate(-3deg); }
.cad-frases blockquote:nth-child(even) { background: #EAF8FE; transform: rotate(.9deg); }
.cad-frases blockquote p, .cad-declara p { margin: 0; font-size: 1.22rem; line-height: 1.3; color: var(--cad-tinta); font-weight: 500; }
.cad-frases blockquote small { display: block; margin-top: 6px; font-family: 'Montserrat', sans-serif; font-size: .72rem; color: #6B6480; }
.cad-declara { background: #F0F9D4; padding: 20px 24px; } .cad-declara p { font-size: 1.5rem; color: #540094; font-weight: 700; }
.cad-metas { display: grid; gap: 10px; margin-top: 16px; } .cad-metas > div { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; background: #fff; border: 1px solid #ECE3F8; border-radius: 14px; }
.cad-metas span { flex: none; width: 54px; height: 54px; border-radius: 50%; background: #540094; color: #ABD905; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; } .cad-metas span b { font-size: 1.2rem; } .cad-metas span small { font-size: .6rem; }
.cad-metas p { margin: 4px 0 0; line-height: 1.5; }
.cad-lista { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; } .cad-lista li { padding: 10px 14px; background: #fff; border-radius: 14px; border: 1px solid #ECE3F8; } .cad-lista b { display: block; color: #540094; } .cad-lista span { display: block; margin-top: 3px; line-height: 1.5; }

/* contracapa */
.cad-fim { text-align: center; padding: 26px 8px; } .cad-fim-mao { font-size: 2.1rem; color: var(--cad-tinta); margin: 6px 0 10px; font-weight: 700; transform: rotate(-2deg); }
.cad-avaliar { display: inline-block; margin: 10px 0 4px; padding: 12px 22px; border-radius: 999px; background: #540094; color: #fff; text-decoration: none; font-weight: 700; }
.cad-marca { margin-top: 26px; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: #9E97AC; }

/* devolutivas dentro das folhas */
.cad-mv { padding: 0; background: none; box-shadow: none; max-width: none; font-size: .86rem; zoom: .92; }
.cad-mv .mv-corpo, .cad-mv .tv-corpo { padding: 0; }

/* dica para abrir: o próprio caderno é o botão */
.cad-dica { position: absolute; left: -20px; right: -20px; bottom: 34px; text-align: center; margin: 0; font-size: .82rem; font-weight: 600; letter-spacing: .02em; color: #6B6480; display: flex; align-items: center; justify-content: center; gap: 8px; }
.cad-dica-ico { display: inline-block; font-size: 1.2rem; animation: cadDedo 1.6s ease-in-out infinite; }
@keyframes cadDedo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.cad-livro { padding-bottom: 96px; }
.cad-capa { cursor: pointer; outline: none; }
.cad-capa:hover, .cad-capa:focus-visible { transform: rotateY(-11deg) translateY(-3px); box-shadow: 0 34px 58px rgba(37, 4, 59, .34), 0 1px 0 #D9CDB6, 5px 5px 0 -1px #EDE4D2, 8px 8px 0 -2px #DDD1BA, 11px 11px 16px -2px rgba(0, 0, 0, .28); }
.cad.abrindo .cad-capa { cursor: default; }
.cad.abrindo .cad-dica { opacity: 0; transition: opacity .3s; }
/* cantos da folha: encostar para folhear (o canto levanta) */
.cad-canto { position: absolute; bottom: 0; width: 46px; height: 46px; border: 0; padding: 0; cursor: pointer; z-index: 7; background: transparent; transition: width .25s ease, height .25s ease; }
.cad-canto[hidden] { display: none; }
.cad-canto-prox { right: 48px; border-radius: 0 0 14px 0; background: linear-gradient(135deg, transparent 50%, #E6DDC8 50%, #F7F1E2 62%, #FFFDF6 100%); box-shadow: -3px -3px 7px rgba(0, 0, 0, .2); animation: cadCanto 2.6s ease-in-out infinite; }
.cad-canto-ant { left: 20px; border-radius: 0 0 0 4px; background: linear-gradient(225deg, transparent 50%, #E6DDC8 50%, #F7F1E2 62%, #FFFDF6 100%); box-shadow: 3px -3px 7px rgba(0, 0, 0, .2); width: 34px; height: 34px; }
.cad-canto-prox:hover, .cad-canto-prox:focus-visible { width: 82px; height: 82px; animation: none; }
.cad-canto-ant:hover, .cad-canto-ant:focus-visible { width: 64px; height: 64px; }
@keyframes cadCanto { 0%, 70%, 100% { width: 46px; height: 46px; } 85% { width: 60px; height: 60px; } }
.cad-barra .cad-som { font-size: .78rem; }

/* controles */
.cad-ctrl { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.cad-ctrl button { padding: 10px 18px; border-radius: 999px; border: 1.5px solid #540094; background: #fff; color: #540094; font: 700 .9rem 'Montserrat', sans-serif; cursor: pointer; transition: transform .15s, background .15s; }
.cad-ctrl button:hover:not(:disabled) { transform: translateY(-1px); background: #F8F3FF; }
.cad-ctrl button:disabled { opacity: .4; cursor: default; }
.cad-ctrl .cad-pdf { background: #540094; color: #fff; } .cad-ctrl .cad-pdf:hover:not(:disabled) { background: #6A12B3; }
.cad-pag { font-size: .85rem; color: #6B6480; min-width: 70px; text-align: center; }
.cad-previa { border: 2px dashed #ABD905; border-radius: 22px; padding: 12px; }

@media (max-width: 640px) {
  .cad-mesa { padding: 0 34px 0 14px; }
  .cad-barra-titulo { display: none; } .cad-barra { justify-content: space-between; } .cad-barra button { padding: 8px 12px; font-size: .78rem; }
  .cad-papel { padding: 26px 22px 28px 50px; min-height: 480px; }
  .cad-papel::before { left: 44px; }
  .cad-virando { padding: 26px 16px 28px 52px; }
  .cad-furos { left: -3px; }
  .cad-abas button { padding: 10px 5px; font-size: .62rem; } .cad-fita { right: 38px; width: 12px; }
  .cad-fases { grid-template-columns: 1fr; } .cad-carta p { font-size: 1.22rem; }
}

/* PDF: uma folha por página, sem controles nem menus */
@media print {
  @page { size: A4; margin: 14mm; }
  body.imprimindo-caderno { background: #fff !important; }
  body.imprimindo-caderno > *:not(#app):not(main) { display: none !important; }
  body.imprimindo-caderno header:not(.cad-cab), body.imprimindo-caderno nav.cep-menu, body.imprimindo-caderno .cep-topo, body.imprimindo-caderno .cep-voltar, body.imprimindo-caderno .cad-ctrl, body.imprimindo-caderno .cad-abas, body.imprimindo-caderno .cad-livro, body.imprimindo-caderno .cad-fita, body.imprimindo-caderno .cad-furos, body.imprimindo-caderno .cad-virando { display: none !important; }
  body.imprimindo-caderno .cad-aberto { display: block !important; position: static; background: none; padding: 0; animation: none; } body.imprimindo-caderno .cad-barra { display: none !important; }
  body.imprimindo-caderno .cad-papel { max-height: none; overflow: visible; box-shadow: none; padding: 0; background: #fff; }
  body.imprimindo-caderno .cad-papel::before { display: none; }
  body.imprimindo-caderno .cad-folha { display: block !important; page-break-after: always; break-after: page; animation: none; }
  body.imprimindo-caderno .cad-folha:last-child { page-break-after: auto; break-after: auto; }
  body.imprimindo-caderno .cad-frases blockquote { transform: none; box-shadow: none; border: 1px solid #ddd; }
}

/* Caderno da Jornada · página da equipe */
.cad-eq-lista { list-style: none; margin: 8px 0 16px; padding: 0; display: grid; gap: 6px; }
.cad-eq-lista li { display: flex; align-items: baseline; gap: 8px; padding: 8px 12px; border: 1px solid #ECE3F8; border-radius: 12px; background: #fff; }
.cad-eq-lista li span { color: #9E97AC; font-weight: 800; } .cad-eq-lista li.ok span { color: #7FAF00; } .cad-eq-lista small { margin-left: auto; color: #6B6480; }
.cad-eq-status { margin: 8px 0; } .cad-eq textarea { width: 100%; font: 400 1.05rem/1.6 'DM Sans', sans-serif; padding: 14px; border-radius: 14px; border: 1.5px solid #D9CCEE; background: #FFFDF7; }

/* folhas em branco (escritas a lápis) e o bilhete da mentora no fim de cada folha */
.cad-em-branco { min-height: 300px; }
.cad-carta-wrap > p.cad-lapis { color: #8B86A3; text-shadow: none; font-size: 1.12rem; font-weight: 500; transform: rotate(-.4deg); transform-origin: left center; }
.cad-carta-wrap > p.cad-lapis-sub { font-size: 1rem; }
.cad-selo-vazio { display: inline-block; margin-top: 16px; padding: 5px 14px; border: 1.5px dashed var(--cad-cor, #540094); border-radius: 999px; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--cad-cor, #540094); background: rgba(255, 255, 255, .7); }
.cad-bilhete { margin-top: 20px; padding: 10px 16px 8px 18px; border-left: 3px solid var(--cad-cor, #540094); background: rgba(255, 249, 219, .6); border-radius: 0 12px 12px 0; transform: rotate(-.5deg); transform-origin: left center; }
.cad-bilhete p { margin: 0; font-family: var(--cad-mao), cursive; font-size: 1.08rem; line-height: 1.35; color: var(--cad-tinta); font-weight: 500; }
.cad-bilhete small { display: block; text-align: right; font-family: var(--cad-mao), cursive; font-size: 1rem; color: #540094; font-weight: 700; }
.cad-progresso { position: absolute; left: -20px; right: -20px; bottom: 6px; text-align: center; margin: 0; font-size: .7rem; letter-spacing: .06em; color: #6B6480; text-transform: uppercase; font-weight: 700; line-height: 1.3; }

.cad-eq-fechos { display: grid; gap: 10px; margin: 10px 0 12px; }
.cad-eq-fecho label { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; } .cad-eq-fecho small { color: #9E97AC; }
.cad-eq-fecho textarea { font-size: .95rem; min-height: 56px; } .cad-eq-fecho.sem { opacity: .6; }

/* ── folha viva: carimbo, descobertas que se abrem, escrita, perguntas e selos ── */
.cad-cab { position: relative; }
.cad-cab.com-carimbo { padding-right: 104px; }
.cad-carimbo { position: absolute; right: 24px; top: -2px; width: 74px; height: 74px; border-radius: 50%; border: 3px double var(--cad-cor, #540094); color: var(--cad-cor, #540094); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; text-transform: uppercase; font-size: .58rem; letter-spacing: .1em; font-weight: 800; opacity: .88; transform: rotate(-12deg); background: rgba(255, 255, 255, .5); }
.cad-carimbo b { font-size: .72rem; } .cad-carimbo i { font-style: normal; }
.cad-folha.ativa .cad-carimbo { animation: cadCarimbo .55s cubic-bezier(.2, 1.5, .4, 1) .5s both; }
@keyframes cadCarimbo { from { opacity: 0; transform: rotate(-30deg) scale(2.4); } to { opacity: .88; transform: rotate(-12deg) scale(1); } }
.cad-toque { margin: 0 0 12px; font-size: .8rem; font-weight: 700; color: var(--cad-cor, #540094); display: flex; align-items: center; gap: 6px; }
.cad-toque span { display: inline-block; animation: cadDedo 1.6s ease-in-out infinite; }
.cad-desc h5 { cursor: pointer; position: relative; padding-right: 30px; }
.cad-desc h5::after { content: '+'; position: absolute; right: 0; top: -2px; width: 24px; height: 24px; border-radius: 50%; background: var(--cad-cor, #540094); color: #fff; display: flex; align-items: center; justify-content: center; font: 700 1rem/1 'Montserrat', sans-serif; transition: transform .25s; }
.cad-desc.aberta h5::after { content: '−'; }
.cad-desc:not(.aberta) h5 ~ * { display: none; }
.cad-desc:not(.aberta) { cursor: pointer; }
.cad-folha.ativa .cad-mv .mv-card { animation: cadCard .6s ease both; animation-delay: calc(var(--i, 0) * .12s + .3s); }
@keyframes cadCard { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.cad-virando .cad-mv .mv-card, .cad-virando .cad-carimbo { animation: none !important; }
body.imprimindo-caderno .cad-desc h5 ~ * { display: revert !important; }
body.imprimindo-caderno .cad-desc h5::after, body.imprimindo-caderno .cad-toque { display: none; }
.cad-bilhete small { transition: opacity .4s; }

/* pergunta da mentora, respondida na própria folha */
.cad-perguntas { margin-top: 22px; display: grid; gap: 16px; }
.cad-pergunta { padding: 14px 16px 12px; border: 1.5px dashed var(--cad-cor, #540094); border-radius: 14px; background: rgba(255, 255, 255, .72); }
.cad-pq-rot { margin: 0; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--cad-cor, #540094); }
.cad-pq-txt { margin: 4px 0 8px; font-family: var(--cad-mao), cursive; font-size: 1.3rem; line-height: 1.25; color: var(--cad-tinta); font-weight: 700; }
.cad-pergunta textarea { width: 100%; box-sizing: border-box; border: 0; resize: vertical; min-height: 92px; padding: 0 2px; background: repeating-linear-gradient(180deg, transparent 0, transparent 27px, rgba(60, 80, 160, .25) 27px, rgba(60, 80, 160, .25) 28px); background-position: 0 6px; font-family: var(--cad-mao), cursive; font-size: 1.15rem; line-height: 28px; color: var(--cad-tinta); outline: none; }
.cad-pergunta textarea:focus { background-color: rgba(255, 249, 219, .55); }
.cad-pq-acao { display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.cad-pq-env { padding: 9px 18px; border-radius: 999px; border: 0; background: #540094; color: #fff; font: 700 .82rem 'Montserrat', sans-serif; cursor: pointer; }
.cad-pq-env:disabled { opacity: .6; cursor: default; }
.cad-pq-st { font-size: .82rem; font-weight: 700; color: #4C7A00; }
.cad-pq-nota { margin: 6px 0 0; font-size: .74rem; color: #6B6480; }
.cad-pergunta.enviada { border-style: solid; background: rgba(240, 249, 212, .6); }

/* selos colados na capa */
.cad-selos { position: absolute; left: 15%; right: 17%; bottom: 4.5%; z-index: 5; display: flex; flex-wrap: nowrap; gap: 3px; align-items: center; justify-content: space-between; }
.cad-selo { flex: none; width: 17px; height: 17px; border-radius: 50%; border: 1.5px dashed rgba(59, 42, 120, .4); display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: .6rem; font-weight: 800; color: #fff; }
.cad-selo.ganho { background: var(--cad-cor); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(37, 4, 59, .35); animation: cadSelo .55s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(var(--i) * .12s + .5s); }
.cad-selo.novo { animation-name: cadSelo, cadPisca; animation-duration: .55s, 1.4s; animation-iteration-count: 1, 4; animation-delay: calc(var(--i) * .12s + .5s), 1.6s; }
.cad-selos small { display: none; }
@keyframes cadSelo { from { opacity: 0; transform: scale(2.2) rotate(-40deg); } to { opacity: 1; transform: none; } }
@keyframes cadPisca { 0%, 100% { box-shadow: 0 0 0 0 rgba(33, 196, 247, .0), 0 1px 3px rgba(37, 4, 59, .35); } 50% { box-shadow: 0 0 0 7px rgba(33, 196, 247, .45), 0 1px 3px rgba(37, 4, 59, .35); } }
@media (prefers-reduced-motion: reduce) { .cad-selo.ganho, .cad-folha.ativa .cad-carimbo, .cad-folha.ativa .cad-mv .mv-card { animation: none; } }

/* antes e depois que se move */
.cad-slider { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 14px; border-radius: 14px; background: #F4EEFB; border: 1px solid #E2D4F4; }
.cad-slider span { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #540094; }
.cad-slider input { flex: 1; min-width: 120px; accent-color: #540094; height: 28px; cursor: pointer; }
.cad-slider-play { flex-basis: 100%; padding: 8px 14px; border-radius: 999px; border: 1.5px solid #540094; background: #fff; color: #540094; font: 700 .8rem 'Montserrat', sans-serif; cursor: pointer; }
.cad-slider-play:hover { background: #540094; color: #fff; }
.cad-mv .mv-ad-linha .barra:not(.antes) i { transition: width .12s linear; }
/* cartão da jornada */
.cad-cartao-box { margin-top: 18px; padding: 14px 16px; border: 1.5px dashed #540094; border-radius: 16px; background: rgba(255, 255, 255, .7); text-align: center; }
.cad-cartao-tit { margin: 0 0 4px; font-family: var(--cad-mao), cursive; font-size: 1.5rem; font-weight: 700; color: var(--cad-tinta); }
.cad-cartao-btn, .cad-cartao-acoes button { padding: 10px 20px; border-radius: 999px; border: 0; background: #540094; color: #fff; font: 700 .85rem 'Montserrat', sans-serif; cursor: pointer; }
.cad-cartao-btn:disabled { opacity: .6; }
.cad-cartao-previa { display: block; width: min(100%, 260px); margin: 12px auto 0; border-radius: 12px; box-shadow: 0 8px 20px rgba(37, 4, 59, .3); }
.cad-cartao-previa[hidden], .cad-cartao-acoes[hidden] { display: none; }
.cad-cartao-acoes { display: flex; gap: 10px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.cad-cartao-acoes button:last-child { background: #ABD905; color: #25043B; }
body.imprimindo-caderno .cad-slider, body.imprimindo-caderno .cad-cartao-box { display: none !important; }

/* barra de cima e cantos sem texto cortado em telas pequenas */
.cad-barra button { white-space: nowrap; }
.cad-data { padding-right: 4px; }
@media (max-width: 640px) { .cad-barra { gap: 6px; padding-bottom: 8px; } .cad-barra button { padding: 8px 10px; font-size: .72rem; } .cad-barra-dir { gap: 6px; } }

.cad-sm { display: none; }
@media (max-width: 640px) { .cad-lg { display: none; } .cad-sm { display: inline; } .cad-cab.com-carimbo { padding-right: 78px; } .cad-carimbo { width: 60px; height: 60px; right: 16px; top: 0; font-size: .5rem; } .cad-carimbo b { font-size: .6rem; } }

@media (max-width: 640px) { .cad-canto { display: none; } }

/* folhas em branco: a letra a lápis apoiada na pauta, sem a linha cortando as letras; rótulo sem ficar sob a fita */
.cad-carta-wrap > p.cad-lapis { font-size: 1.1rem; } .cad-carta-wrap > p.cad-lapis-sub { font-size: 1.02rem; }
.cad-cab { padding-right: 24px; }

/* selos: ficam no pé da capa, em escala com o caderno */
.cad-selos { bottom: 5%; gap: 1.2cqw; right: 25%; }
.cad-selo { width: 5.4cqw; height: 5.4cqw; min-width: 11px; min-height: 11px; font-size: 3cqw; }

/* a carta ainda fechada: um envelope com selo */
.cad-env-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 8px 10px; }
.cad-env { border: 0; background: none; padding: 0; width: min(78%, 300px); cursor: pointer; filter: drop-shadow(0 10px 14px rgba(37, 4, 59, .22)); transform: rotate(-3deg); transition: transform .3s; }
.cad-env:hover { transform: rotate(-1deg) translateY(-3px); }
.cad-env svg { display: block; width: 100%; height: auto; }
.cad-env.balanca { animation: cadBalanca .7s ease; }
@keyframes cadBalanca { 0%, 100% { transform: rotate(-3deg); } 15% { transform: rotate(5deg); } 35% { transform: rotate(-7deg); } 55% { transform: rotate(4deg); } 75% { transform: rotate(-5deg); } }
.cad-env-para { margin: 14px 0 0; font-family: var(--cad-mao), cursive; font-size: 1.9rem; font-weight: 700; color: var(--cad-tinta); transform: rotate(-2deg); }
.cad-env-msg { margin: 8px 0 0; max-width: 30ch; font-size: .88rem; line-height: 1.5; color: #6B6480; min-height: 3em; }

/* ── a carta lacrada: envelope em 3D, selo de cera com anel de progresso, aba que se abre ── */
.cad-env-wrap.sumiu { display: none; }
.cad-carta-corpo.fechada { display: none; }
.cad-carta-corpo:not(.fechada) { animation: cadCartaSurge .8s ease both; }
@keyframes cadCartaSurge { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
.cad-env3d { position: relative; width: min(88%, 330px); aspect-ratio: 3 / 2; margin: 36px auto 0; container-type: inline-size; perspective: 1100px; transform: rotate(-2deg); transition: transform .4s; }
.cad-env3d:not(.aberta):hover { transform: rotate(-1deg) translateY(-3px); }
.cad-env3d > div, .e-selo { position: absolute; }
.e-tras { inset: 0; border-radius: 8px; background: linear-gradient(160deg, #EFE3C4, #F6ECD6 60%, #E6D6B1); box-shadow: 0 16px 26px rgba(37, 4, 59, .28), 0 2px 0 #C9B58C; z-index: 1; }
.e-carta { left: 6%; right: 6%; top: 8%; bottom: 8%; border-radius: 4px; background: #FFFDF6; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); z-index: 2; transition: transform 1s cubic-bezier(.3, 1.2, .4, 1) .55s; padding: 13% 10% 0; display: grid; gap: 7px; align-content: start; }
.e-carta i { display: block; height: 4px; border-radius: 3px; background: rgba(29, 44, 115, .28); } .e-carta i:nth-child(2n) { width: 82%; } .e-carta i:nth-child(3n) { width: 64%; }
.e-frente { inset: 0; z-index: 3; border-radius: 8px; background: linear-gradient(200deg, #F6ECD6, #EBDDBA); clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%); filter: drop-shadow(0 -1px 0 #C9B58C); }
.e-frente::after { content: ''; position: absolute; inset: 0; background: linear-gradient(35deg, transparent 49.4%, rgba(160, 130, 80, .35) 50%, transparent 50.6%) 0 0 / 100% 100%, linear-gradient(-35deg, transparent 49.4%, rgba(160, 130, 80, .35) 50%, transparent 50.6%) 0 0 / 100% 100%; clip-path: polygon(0 40%, 50% 54%, 100% 40%, 100% 100%, 0 100%); opacity: .6; }
.e-aba { left: 0; top: 0; width: 100%; height: 56%; z-index: 4; transform-origin: top center; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.4, 0, .2, 1), z-index 0s .4s; }
.e-aba-f, .e-aba-v { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); backface-visibility: hidden; }
.e-aba-f { background: linear-gradient(180deg, #F3E7C9, #E3D2A8); }
.e-aba-v { transform: rotateX(180deg); background: radial-gradient(circle at 50% 30%, #7A0DC9, #4A0B80); }
.e-aba-v::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(171, 217, 5, .5) 1.4px, transparent 1.8px) 0 0 / 14px 14px; }
.cad-env3d.aberta .e-aba { transform: rotateX(-180deg); z-index: 1; }
.cad-env3d.aberta .e-carta { transform: translateY(-46%); z-index: 5; }
.e-selo { left: 50%; top: 54%; width: 21cqw; height: 21cqw; transform: translate(-50%, -50%); z-index: 7; border: 0; padding: 0; background: none; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.e-anel { position: absolute; inset: -9%; border-radius: 50%; background: conic-gradient(#ABD905 calc(var(--p, 0) * 1%), rgba(84, 0, 148, .22) 0); -webkit-mask: radial-gradient(circle, transparent 64%, #000 66%); mask: radial-gradient(circle, transparent 64%, #000 66%); }
.e-cera { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 47% 53% 50% 50% / 52% 46% 54% 48%; background: radial-gradient(circle at 34% 28%, #B25AEA, #6A12B3 46%, #3A0868); box-shadow: inset -3px -5px 9px rgba(0, 0, 0, .4), inset 2px 3px 5px rgba(255, 255, 255, .25), 0 5px 10px rgba(37, 4, 59, .5); transition: transform .5s ease, opacity .5s ease .1s; }
.e-cera b { font: 800 5.2cqw Montserrat, sans-serif; letter-spacing: .04em; color: #ABD905; text-shadow: 0 -1px 0 rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .15); }
.e-cera.l { clip-path: polygon(0 0, 54% 0, 46% 30%, 56% 56%, 47% 100%, 0 100%); } .e-cera.r { clip-path: polygon(54% 0, 100% 0, 100% 100%, 47% 100%, 56% 56%, 46% 30%); }
.cad-env3d.quebrando .e-cera.l { transform: translate(-45%, 40%) rotate(-28deg); opacity: 0; } .cad-env3d.quebrando .e-cera.r { transform: translate(45%, 55%) rotate(24deg); opacity: 0; }
.cad-env3d.quebrando .e-anel { opacity: 0; transition: opacity .2s; }
.cad-env3d.pronta:not(.quebrando) .e-cera { animation: cadPulsa 1.8s ease-in-out infinite; }
.cad-env3d.segurando .e-cera { animation: cadTrema .12s linear infinite; }
@keyframes cadPulsa { 0%, 100% { box-shadow: inset -3px -5px 9px rgba(0, 0, 0, .4), inset 2px 3px 5px rgba(255, 255, 255, .25), 0 5px 10px rgba(37, 4, 59, .5), 0 0 0 0 rgba(171, 217, 5, .55); } 50% { box-shadow: inset -3px -5px 9px rgba(0, 0, 0, .4), inset 2px 3px 5px rgba(255, 255, 255, .25), 0 5px 10px rgba(37, 4, 59, .5), 0 0 0 12px rgba(171, 217, 5, 0); } }
@keyframes cadTrema { 0% { transform: translate(-1px, 1px) rotate(-1deg); } 50% { transform: translate(1px, -1px) rotate(1deg); } 100% { transform: translate(-1px, -1px) rotate(0); } }
.e-selo.treme { animation: cadBalanca .7s ease; }
.e-confete { position: absolute; left: 50%; top: 40%; width: 9px; height: 14px; border-radius: 2px; z-index: 9; pointer-events: none; animation: cadConfete 1.9s cubic-bezier(.2, .8, .3, 1) var(--d, 0s) forwards; }
@keyframes cadConfete { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } }
body.imprimindo-caderno .cad-env-wrap { display: none !important; }
body.imprimindo-caderno .cad-carta-corpo.fechada { display: block !important; }
@media (prefers-reduced-motion: reduce) { .e-aba, .e-carta, .e-cera { transition: none; } .cad-env3d.pronta:not(.quebrando) .e-cera { animation: none; } }

.cad-env3d.pronta { margin-top: 120px; }

.cad-capa-lema { margin: auto 0 0; max-width: 78%; font-family: var(--cad-mao), cursive; font-size: 6.6cqw; line-height: 1.15; font-weight: 700; color: #4A3A8A; transform: rotate(-2deg); transform-origin: left center; }
.cad-capa-lema::before { content: ''; display: block; width: 14cqw; height: 0; border-top: 2px dashed #B9D83B; margin-bottom: 3cqw; }

/* Equipe: montar o PDF escolhendo as folhas */
.cad-pdf-painel { margin: 1rem 0; }
.cad-pdf-lista { display: grid; gap: .35rem .9rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin: .6rem 0 .8rem; }
.cad-pdf-lista small { color: var(--mudo, #6b6b80); }
@media print { body.imprimindo-caderno .cad-fora-pdf, body.imprimindo-caderno .cad-pdf-painel, body.imprimindo-caderno .cad-pdf-painel ~ .aviso { display: none !important; } }

/* PDF mais bonito: cartões e bilhetes não se partem entre páginas, títulos não ficam sozinhos no fim, cores saem como na tela */
@media print {
  body.imprimindo-caderno, body.imprimindo-caderno * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.imprimindo-caderno .mv-card, body.imprimindo-caderno .cad-bilhete, body.imprimindo-caderno .cad-frases blockquote, body.imprimindo-caderno .mv-dd, body.imprimindo-caderno .cad-fase, body.imprimindo-caderno .cad-lista li, body.imprimindo-caderno .cad-carta-corpo p, body.imprimindo-caderno .cad-carimbo { break-inside: avoid; page-break-inside: avoid; }
  body.imprimindo-caderno .cad-cab { break-inside: avoid; page-break-inside: avoid; }
  body.imprimindo-caderno .cad-folha h3, body.imprimindo-caderno .cad-folha h4, body.imprimindo-caderno .cad-folha h5 { break-after: avoid; page-break-after: avoid; }
  body.imprimindo-caderno .mv-card.mv-largo { break-inside: auto; page-break-inside: auto; }
  body.imprimindo-caderno .mv-cic-linha, body.imprimindo-caderno .mv-cic-topo, body.imprimindo-caderno .mv-cic-como { break-inside: avoid; page-break-inside: avoid; }
  /* No PDF montado pela equipe as folhas seguem uma atras da outra, sem pular de pagina (menos espaco em branco) */
  body.pdf-equipe .cad-folha { break-after: auto !important; page-break-after: auto !important; break-before: auto !important; margin: 0 0 22px; padding-bottom: 6px; }
  body.pdf-equipe .cad-folha + .cad-folha { border-top: 1px solid #DDD5EE; padding-top: 18px; }
  body.pdf-equipe .cad-cab { break-after: avoid; page-break-after: avoid; }
  body.pdf-equipe, body.pdf-equipe #app, body.pdf-equipe main { margin: 0; padding: 0; background: #fff; max-width: none; width: auto; }
  body.pdf-equipe .cad { margin: 0; max-width: none; }
}

/* PDF da equipe: folhas em branco ficam só com o aviso, sem blocos coloridos nem linhas de caderno */
@media print {
  body.pdf-equipe .cad-em-branco, body.pdf-equipe .cad-carta-wrap { background: none !important; min-height: 0 !important; padding: 2px 0 !important; box-shadow: none !important; border: 0 !important; }
  body.pdf-equipe .cad-em-branco::before, body.pdf-equipe .cad-em-branco::after { display: none !important; }
  body.pdf-equipe .cad-lapis { background: none !important; border: 0 !important; }
  body.pdf-equipe .cad-selo-vazio { display: none !important; }
}