/* parceiros/documento.css — visual dos documentos dos parceiros (apostila e guia de como indicar), o mesmo do
 * Guia do Usuário em PDF (copiado de guia_usuario/guia-do-usuario.html). Páginas A4 na impressão; na tela do celular
 * as páginas viram blocos que ocupam a largura toda. */
:root {
    --ink: #232145; --ink-soft: #5b5780; --paper: #FFFBF5; --coral: #FF6F59; --sun: #FFC857; --mint: #4FB6A8;
    --madeira: #c98f55; --madeira-escura: #6b4423; --folha: #4a9a52; --folha-clara: #dff2d8;
}
@page { size: A4; margin: 0; }
* { box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body { margin: 0; font-family: 'Nunito', sans-serif; color: var(--ink); font-size: 11pt; line-height: 1.5; }
h1, h2, h3, .placa { font-family: 'Baloo 2', sans-serif; }

.pagina { width: 210mm; height: 297mm; position: relative; overflow: hidden; page-break-after: always;
    background: linear-gradient(180deg, #e3f4f6 0%, #eef8e6 45%, #f7f3df 100%); padding: 16mm 15mm 30mm; }
.pagina:last-child { page-break-after: auto; }
/* árvores no rodapé e cipós nos cantos (iguais aos do site) */
.pagina::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34mm; z-index: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 320' preserveAspectRatio='xMidYMax slice'%3E%3Cpath d='M0 210 Q150 150 300 190 T600 180 T900 170 T1200 190 V320 H0 Z' fill='%23cfead2'/%3E%3Cg fill='%23b3dcb8'%3E%3Ccircle cx='90' cy='170' r='46'/%3E%3Ccircle cx='140' cy='150' r='40'/%3E%3Ccircle cx='330' cy='160' r='50'/%3E%3Ccircle cx='560' cy='150' r='44'/%3E%3Ccircle cx='820' cy='150' r='52'/%3E%3Ccircle cx='1040' cy='160' r='48'/%3E%3Cpath d='M440 200 L475 90 L510 200 Z M700 200 L730 110 L760 200 Z M940 200 L975 96 L1010 200 Z'/%3E%3C/g%3E%3Cg fill='%2386c78f'%3E%3Crect x='196' y='190' width='14' height='60' fill='%239b7653'/%3E%3Ccircle cx='203' cy='180' r='42'/%3E%3Crect x='676' y='196' width='14' height='60' fill='%239b7653'/%3E%3Ccircle cx='683' cy='186' r='40'/%3E%3Cpath d='M380 260 L420 140 L460 260 Z M880 260 L915 150 L950 260 Z M1120 260 L1150 160 L1180 260 Z'/%3E%3C/g%3E%3Cpath d='M0 262 Q200 236 400 258 T800 252 T1200 260 V320 H0 Z' fill='%235fae5f'/%3E%3Cg fill='%234a9a52'%3E%3Crect x='96' y='214' width='18' height='60' fill='%237a5233'/%3E%3Ccircle cx='105' cy='206' r='36'/%3E%3Crect x='1036' y='210' width='18' height='64' fill='%237a5233'/%3E%3Ccircle cx='1045' cy='200' r='38'/%3E%3C/g%3E%3Cg stroke='%23232145' stroke-width='1.5'%3E%3Ccircle cx='300' cy='282' r='6' fill='%23ffd166'/%3E%3Ccircle cx='760' cy='284' r='6' fill='%23ffd166'/%3E%3Ccircle cx='480' cy='294' r='5' fill='%23ff8fab'/%3E%3Cpath d='M840 296 Q852 278 864 296 Z' fill='%23ff6f59'/%3E%3C/g%3E%3C/svg%3E") center bottom / 100% 100% no-repeat; }
.pagina::after { content: ''; position: absolute; top: -2mm; left: -2mm; width: 30mm; height: 40mm; z-index: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 220'%3E%3Cpath d='M20 0 Q30 60 14 120 Q4 170 26 220' fill='none' stroke='%235a8f3e' stroke-width='5' stroke-linecap='round'/%3E%3Cg fill='%237cc26a' stroke='%233f7a32' stroke-width='2'%3E%3Cellipse cx='34' cy='40' rx='16' ry='8' transform='rotate(-25 34 40)'/%3E%3Cellipse cx='6' cy='88' rx='15' ry='7' transform='rotate(30 6 88)'/%3E%3Cellipse cx='30' cy='140' rx='16' ry='8' transform='rotate(-20 30 140)'/%3E%3C/g%3E%3Cpath d='M0 0 Q80 26 160 6' fill='none' stroke='%235a8f3e' stroke-width='5' stroke-linecap='round'/%3E%3Cg fill='%239ad27f' stroke='%233f7a32' stroke-width='2'%3E%3Cellipse cx='70' cy='22' rx='15' ry='7' transform='rotate(15 70 22)'/%3E%3Cellipse cx='120' cy='16' rx='14' ry='7' transform='rotate(-15 120 16)'/%3E%3C/g%3E%3C/svg%3E") no-repeat; }
.conteudo { position: relative; z-index: 1; }
.num-pagina { position: absolute; bottom: 8mm; right: 15mm; z-index: 2; font-weight: 800; color: #fff; font-size: 10pt; }
.rodape-marca { position: absolute; bottom: 8mm; left: 15mm; z-index: 2; font-weight: 800; color: #fff; font-size: 10pt; }

.placa { display: inline-block; font-weight: 800; color: #fff8ec; font-size: 15pt;
    background: repeating-linear-gradient(0deg, var(--madeira) 0 7px, #bd844b 7px 9px);
    border: 2.5px solid var(--madeira-escura); border-radius: 10px; padding: 2px 16px; box-shadow: 0 3px 0 var(--madeira-escura); margin: 0 0 4mm; }
.cartao { background: rgba(255,255,255,.95); border: 2.5px solid var(--ink); border-radius: 18px; padding: 4mm 5mm; margin-bottom: 4mm;
    box-shadow: 3px 3px 0 rgba(53,92,45,.22); }
.cartao h3 { margin: 0 0 1.5mm; font-size: 13pt; line-height: 1.2; }
.cartao p { margin: 1mm 0; }
.cartao ul, .cartao ol { margin: 1mm 0; padding-left: 5mm; }
.cartao li { margin-bottom: 1mm; }
.grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; }
.grade3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3mm; }
.cena { display: flex; align-items: flex-end; gap: 4mm; margin-bottom: 5mm; }
.toca { flex-shrink: 0; width: 30mm; height: 30mm; border-radius: 50%; padding: 2.5mm; border: 3px solid var(--ink);
    background: radial-gradient(circle at 30% 30%, #b07a46, var(--madeira-escura)); box-shadow: 0 4px 0 rgba(35,33,69,.18); }
.toca img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #4a2c14; display: block; }
.toca.p { width: 20mm; height: 20mm; padding: 1.6mm; }
.balao { position: relative; flex: 1; background: #fff; border: 2.5px solid var(--ink); border-radius: 18px; padding: 3mm 4.5mm; margin-bottom: 4mm; }
.balao::before { content: ''; position: absolute; left: -10px; bottom: 14px; width: 14px; height: 14px; background: #fff;
    border-left: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(45deg); }
.balao h2 { margin: 0; font-size: 18pt; line-height: 1.15; }
.balao p { margin: 1mm 0 0; color: var(--ink-soft); }
.dica { background: #fff4d9; border: 2px dashed #e2b04a; border-radius: 14px; padding: 2.5mm 4mm; margin: 2mm 0 4mm; }
.dica::before { content: '💡 Dica: '; font-weight: 800; }
.icone { font-size: 18pt; float: left; margin: -1mm 3mm 0 0; }
strong { color: #c2410c; }
.tabela { width: 100%; border-collapse: collapse; margin: 2mm 0; }
.tabela th, .tabela td { border: 1.5px solid var(--ink); padding: 1.8mm 2.5mm; text-align: left; background: #fff; }
.tabela th { background: var(--sun); font-family: 'Baloo 2', sans-serif; }
.jogos { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2.2mm; font-size: 9pt; }
.jogos div { background: #fff; border: 2px solid var(--ink); border-radius: 10px; padding: 1.8mm 2.5mm; line-height: 1.3; }
.jogos b { display: block; font-family: 'Baloo 2', sans-serif; font-size: 10pt; }
/* ── só nos documentos dos parceiros ── */
.capa { text-align: center; padding-top: 10mm; }
.capa .logo { width: 62mm; }
.capa h1 { font-size: 32pt; margin: 5mm 0 0; line-height: 1.05; }
.capa .sub { font-size: 14pt; color: var(--ink-soft); margin: 2mm 0 7mm; }
.capa .trio { width: 120mm; border-radius: 26px; border: 3px solid var(--ink); box-shadow: 5px 5px 0 rgba(53,92,45,.25); display: block; margin: 0 auto; }
.capa .site { margin-top: 4mm; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 15pt; }
.capa .qr-dica { font-size: 10.5pt; color: var(--ink-soft); margin: 1mm 0 0; }
.selo { display: inline-block; background: #fff4d9; border: 2.5px solid var(--ink); border-radius: 999px; padding: 1mm 5mm; font-weight: 800; font-size: 12pt; }
.fala { background: #fff4d9; border: 2px solid var(--ink); border-radius: 14px; padding: 2mm 4mm; margin: 1.5mm 0; font-style: italic; font-weight: 600; }
.passos { counter-reset: passo; display: grid; gap: 3mm; }
.passo { position: relative; padding-left: 13mm; min-height: 9mm; padding-top: 1mm; }
.passo::before { counter-increment: passo; content: counter(passo); position: absolute; left: 0; top: 0; width: 9mm; height: 9mm; border-radius: 50%;
    background: var(--sun); border: 2.5px solid var(--ink); display: flex; align-items: center; justify-content: center; font-family: 'Baloo 2', sans-serif; font-weight: 800; }
.meu-codigo { display: flex; gap: 4mm; align-items: center; }
.meu-codigo img { width: 34mm; border-radius: 12px; border: 2.5px solid var(--ink); flex-shrink: 0; }
.compacto { font-size: 9.4pt; line-height: 1.33; }
.compacto li { margin-bottom: .5mm; }
.compacto .cartao p { margin: .6mm 0; }
.compacto .fala { padding: 1.5mm 3mm; margin: 1mm 0; }
.compacto .cartao { padding: 3mm 4mm; margin-bottom: 3mm; }
.compacto .cartao h3 { font-size: 12pt; }
.compacto .placa { font-size: 13pt; margin-bottom: 3mm; }
b { color: #c2410c; }
.areas { display: grid; grid-template-columns: 1fr 1fr; gap: .6mm 5mm; font-size: 9.5pt; line-height: 1.35; }
.topo-guia { display: flex; align-items: center; gap: 4mm; margin: 0 0 3mm; }
.topo-guia p { margin: 1.5mm 0 0; color: var(--ink-soft); }
.meu-codigo img { width: 26mm; }
.areas p { margin: 0; padding-left: 6mm; position: relative; }
.areas p span { position: absolute; left: 0; top: 0; }
@media screen and (max-width: 840px) { .areas { grid-template-columns: 1fr; } }

/* barra de cima (só na tela) */
.barra-doc { position: sticky; top: 0; z-index: 10; background: #fff; border-bottom: 2px solid var(--ink); padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; font-family: 'Nunito', sans-serif; }
.barra-doc a, .barra-doc button { font: inherit; font-weight: 800; font-size: 13px; text-decoration: none; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.barra-doc .ativo { background: var(--sun); }
.barra-doc .imprimir { background: var(--coral); color: #fff; }
@media screen {
    body { background: #dfe7dc; }
    .pagina { margin: 18px auto; box-shadow: 0 8px 28px rgba(35,33,69,.18); border-radius: 6px; }
}
@media screen and (max-width: 840px) {
    .pagina { width: auto; height: auto; min-height: 0; margin: 0 0 12px; border-radius: 0; padding: 22px 16px 130px; }
    .grade2, .grade3 { grid-template-columns: 1fr; }
    .capa .trio { width: 100%; }
    .capa h1 { font-size: 26pt; }
    .toca { width: 22mm; height: 22mm; }
    .meu-codigo { flex-direction: column; align-items: flex-start; }
}
@media print { .barra-doc { display: none; } }
/* cartões das áreas (o que é + como ajuda + frase pra família) */
.area { padding: 3.5mm 4.5mm; }
.area h3 { display: flex; align-items: center; gap: 2.5mm; font-size: 14pt; }
.area h3 span { font-size: 17pt; }
.area .oque { color: var(--ink-soft); font-weight: 600; margin: 0 0 1.5mm; }
.area ul { margin: 0; }
.area li { margin-bottom: .6mm; }
.area .pra-dizer { margin: 1.8mm 0 0; background: #e9f7ec; border: 2px solid var(--folha); border-radius: 12px; padding: 1.4mm 3mm; font-style: italic; font-weight: 600; }
.area .pra-dizer::before { content: '💬 Pra dizer: '; font-style: normal; font-weight: 800; color: var(--folha); }
.pilares { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm; }
.pilares .cartao { margin: 0; }
.verso .areas-verso { display: grid; grid-template-columns: 1fr 1fr; gap: 2.6mm; }
.verso .area { margin: 0; padding: 2mm 3.2mm; font-size: 8.4pt; line-height: 1.26; }
.verso .area h3 { font-size: 11.5pt; margin-bottom: .8mm; }
.verso .area h3 span { font-size: 13pt; }
.verso .area .oque { margin-bottom: .8mm; }
.verso .area li { margin-bottom: .2mm; }
.verso .area .pra-dizer { padding: 1mm 2.4mm; margin-top: 1.2mm; }
@media screen and (max-width: 840px) { .pilares, .verso .areas-verso { grid-template-columns: 1fr; } }
.area { margin-bottom: 3.2mm; }
.area li { margin-bottom: .3mm; }
.verso .areas-verso { gap: 2mm; }
.verso .area { line-height: 1.22; }
.verso .topo-guia .toca { width: 15mm; height: 15mm; padding: 1.2mm; }
.verso .area { font-size: 8.2pt; }
.versao-doc { position: absolute; bottom: 3.5mm; left: 15mm; z-index: 2; font-weight: 700; color: #fff; font-size: 7.5pt; opacity: .9; }