/* Cartilha do Vendedor (vendas/cartilha/) — 30/09/2026. Depois de sales.css e familia.css; só tokens (dia e noite). */
.cartilha { max-width:880px; padding-top:40px; padding-bottom:60px; }
.cartilha-capa { padding:30px 0 10px; }
.cartilha-capa h1 { font-size:clamp(2.2rem,6vw,3.4rem); }
.cartilha-selos li { border-color:var(--line); background:var(--surface); color:var(--ink); }
.cartilha-selos strong { color:var(--brand); }

.cartilha-indice { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:30px 0 20px; padding:18px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.cartilha-indice a { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; color:var(--ink); font-weight:600; text-decoration:none; }
.cartilha-indice a:hover { background:var(--surface-soft); }
.cartilha-indice b, .cartilha-parte h2 b { display:inline-grid; place-items:center; min-width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; font-size:.9rem; }

.cartilha-parte { scroll-margin-top:90px; padding:34px 0; border-top:1px solid var(--line); }
.cartilha-parte h2 { display:flex; align-items:center; gap:12px; margin-bottom:18px; font-size:clamp(1.5rem,4vw,2rem); }
.cartilha-parte h2 b { min-width:38px; height:38px; font-size:1.05rem; }
.cartilha-parte p, .cartilha-parte li { font-size:1.02rem; line-height:1.65; }
.cartilha-parte p { margin:0 0 14px; }
.destaque { padding:18px 20px; border-radius:14px; background:color-mix(in srgb,var(--brand) 10%,var(--surface)); }
.cartilha code { padding:2px 7px; border-radius:6px; background:var(--surface-soft); font-size:.92em; }

.cards-3, .cards-2 { display:grid; gap:12px; margin:16px 0; }
.cards-3 { grid-template-columns:repeat(3,1fr); }
.cards-2 { grid-template-columns:repeat(2,1fr); }
.cartao { padding:18px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.cartao h3 { margin-bottom:6px; font-size:1.05rem; }
.cartao p { margin:0; color:var(--muted); font-size:.95rem; }

.manha { padding:14px 18px; border-left:4px solid #f5a524; border-radius:0 12px 12px 0; background:color-mix(in srgb,#f5a524 10%,var(--surface)); }
.manha b { color:#d98a0b; }
.fala { margin:10px 0 16px; padding:18px 20px; border-radius:14px; background:var(--surface); border:1px solid var(--line); font-size:1.08rem; font-style:italic; line-height:1.6; }

.lista-check, .lista-x, .passos-cartilha { display:grid; gap:10px; margin:10px 0 16px; padding:0; list-style:none; }
.lista-check li, .lista-x li { position:relative; padding-left:30px; }
.lista-check li::before { content:"✓"; position:absolute; left:0; top:0; color:var(--accent); font-weight:900; }
.lista-x li::before { content:"✕"; position:absolute; left:0; top:0; color:#e24a4a; font-weight:900; }
.passos-cartilha { counter-reset:p; }
.passos-cartilha li { position:relative; padding:14px 16px 14px 56px; border:1px solid var(--line); border-radius:12px; background:var(--surface); counter-increment:p; }
.passos-cartilha li::before { content:counter(p); position:absolute; left:14px; top:13px; display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:var(--surface-soft); color:var(--brand); font-weight:900; }
.cartilha-alerta { }
.cartilha-alerta h2 b { background:#e24a4a; }

.tbl-cola { overflow-x:auto; margin:10px 0 16px; border:1px solid var(--line); border-radius:14px; }
.tbl-cola table { width:100%; border-collapse:collapse; min-width:520px; }
.tbl-cola th, .tbl-cola td { padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); }
.tbl-cola thead th { background:var(--surface-soft); font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.cartilha-fim { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.pagina-cartilha .nav-acoes .btn { padding:10px 16px; }

@media (max-width: 760px) {
  .cards-3, .cards-2, .cartilha-indice { grid-template-columns:1fr; }
  .cartilha-parte p, .cartilha-parte li { font-size:1rem; }
}

/* selos do topo (o estilo original fica no nicho.css, que esta página não carrega) */
.cartilha-selos { display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 0; padding:0; list-style:none; }
.cartilha-selos li { padding:8px 14px; border:1px solid var(--line); border-radius:999px; font-size:.9rem; }
.pagina-cartilha .nav-acoes .btn { white-space:nowrap; }
@media (max-width: 420px) { .pagina-cartilha .brand-official img { width:110px; } .pagina-cartilha .nav-acoes .btn { padding:9px 12px; font-size:.85rem; } }
.cartilha-sub { margin:26px 0 10px; font-size:1.2rem; }

.cartilha-resumo { margin:24px 0; padding:22px; border:2px solid var(--brand); border-radius:18px; background:color-mix(in srgb,var(--brand) 8%,var(--surface)); }
.cartilha-resumo h2 { margin-bottom:14px; font-size:1.5rem; }
.resumo-passos { display:grid; gap:12px; margin:0; padding:0; list-style:none; counter-reset:r; }
.resumo-passos li { position:relative; padding-left:46px; font-size:1.05rem; line-height:1.5; counter-increment:r; }
.resumo-passos li::before { content:counter(r); position:absolute; left:0; top:-2px; display:grid; place-items:center; width:32px; height:32px; border-radius:10px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; font-weight:900; }
.resumo-mais { margin:16px 0 0; color:var(--muted); font-size:.95rem; }
details.cartilha-parte { padding:0; border-top:1px solid var(--line); }
details.cartilha-parte > summary { list-style:none; cursor:pointer; padding:18px 0; }
details.cartilha-parte > summary::-webkit-details-marker { display:none; }
details.cartilha-parte > summary h2 { margin:0; font-size:1.2rem; }
details.cartilha-parte > summary h2::after { content:"＋"; margin-left:auto; color:var(--muted); font-weight:400; }
details.cartilha-parte[open] > summary h2::after { content:"－"; }
details.cartilha-parte[open] { padding-bottom:24px; }

/* Área do Vendedor (vendas/vendedor/) — botões grandes */
.vend-botoes { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:10px 0 24px; }
.vend-btn { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:14px; align-items:center; padding:18px; border:1px solid var(--line); border-radius:16px; background:var(--surface); color:var(--ink); text-decoration:none; transition:transform .2s,border-color .2s; }
.vend-btn:hover { transform:translateY(-3px); border-color:var(--brand); }
.vend-btn b { grid-row:1 / 3; font-size:2rem; }
.vend-btn span { font-size:1.15rem; font-weight:800; }
.vend-btn small { color:var(--muted); font-size:.88rem; }
.vend-btn-destaque { grid-column:1 / -1; border-color:var(--brand); background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 22%,var(--surface)),var(--surface)); }
@media (max-width: 560px) { .vend-botoes { grid-template-columns:1fr; } }

/* Termos de uso (vendas/termos/) */
.termos h2 { margin:30px 0 10px; padding-top:18px; border-top:1px solid var(--line); font-size:1.25rem; scroll-margin-top:80px; }
.termos p, .termos li { font-size:1rem; line-height:1.7; color:var(--ink); }
.termos p { margin:0 0 10px; }
.termos ul { margin:0 0 12px; padding-left:22px; }
.termos code { padding:1px 6px; border-radius:5px; background:var(--surface-soft); }

/* 02/10 cartilha única (site · sistema · combo) */
.regra-bolso { margin:18px 0 0; padding:14px 18px; border-radius:12px; border:1px dashed var(--brand); background:var(--surface); font-size:1.02rem; line-height:1.55; }
.regra-bolso b { color:var(--brand); }
.tbl-cola td small { display:block; color:var(--muted); font-size:.8rem; font-weight:400; }
.tbl-cola td:not(:first-child) { white-space:nowrap; }

/* Área do Vendedor única (U4, 01/10/2026): abas Site · Sistema · Combo — só CSS (radio + label). */
.vend-regra { margin:0; font-size:1.1rem; line-height:1.5; }
.vend-abas { margin:24px 0; }
.vend-aba-radio { position:absolute; opacity:0; pointer-events:none; }
.vend-abas__lista { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
.vend-aba { padding:14px 10px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); font-weight:800; font-size:1.05rem; text-align:center; cursor:pointer; transition:border-color .2s,background .2s; }
.vend-aba:hover { border-color:var(--brand); }
#aba-site:checked ~ .vend-abas__lista [for="aba-site"],
#aba-sistema:checked ~ .vend-abas__lista [for="aba-sistema"],
#aba-combo:checked ~ .vend-abas__lista [for="aba-combo"] { border-color:var(--brand); background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; }
#aba-site:focus-visible ~ .vend-abas__lista [for="aba-site"],
#aba-sistema:focus-visible ~ .vend-abas__lista [for="aba-sistema"],
#aba-combo:focus-visible ~ .vend-abas__lista [for="aba-combo"] { outline:2px solid var(--brand); outline-offset:2px; }
.vend-painel { display:none; padding:22px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
#aba-site:checked ~ .vend-painel-site,
#aba-sistema:checked ~ .vend-painel-sistema,
#aba-combo:checked ~ .vend-painel-combo { display:block; }
.vend-painel h2 { margin:0 0 8px; font-size:1.5rem; }
.vend-painel h2 small { font-size:.9rem; font-weight:600; opacity:.7; }
.vend-painel p { margin:0 0 14px; line-height:1.5; }
.vend-precos { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:14px; }
.vend-preco { display:grid; gap:4px; padding:14px; border:1px solid var(--line); border-radius:12px; }
.vend-preco span { font-weight:700; }
.vend-preco strong { font-size:1.4rem; }
.vend-preco strong small { font-size:.85rem; font-weight:600; opacity:.7; }
.vend-preco em { font-style:normal; font-size:.9rem; opacity:.75; }
.vend-lista { margin:0 0 14px; padding-left:20px; line-height:1.6; }
.vend-links { display:flex; flex-wrap:wrap; gap:10px; }
.vend-link { padding:10px 14px; border:1px solid var(--brand); border-radius:10px; color:var(--ink); font-weight:700; text-decoration:none; }
.vend-link:hover { background:color-mix(in srgb,var(--brand) 12%,transparent); }
@media (max-width:520px) { .vend-painel { padding:16px; } .vend-aba { padding:12px 6px; font-size:.95rem; } }

/* ── 03/10/2026: escolha da cartilha (juntos / site / sistema) + videoaulas em pop-up ── */
.cartilha-trilhas { display:flex; gap:6px; margin:22px 0 0; padding:5px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.cartilha-trilhas a { flex:1; padding:10px 8px; border-radius:10px; color:var(--muted); font-weight:700; font-size:.92rem; text-align:center; text-decoration:none; }
.cartilha-trilhas a:hover { color:var(--ink); background:var(--surface-soft); }
.cartilha-trilhas a[aria-current] { color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand-2)); }

.cartilha-videos { margin:30px 0 10px; }
.cartilha-videos h2 { margin-bottom:4px; font-size:clamp(1.5rem,4vw,2rem); }
.cartilha-videos > p { margin:0 0 14px; color:var(--muted); }
.cartilha-videos__grade { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.cartilha-video { position:relative; display:block; padding:0; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); text-align:left; cursor:pointer; transition:transform .2s, border-color .2s; }
.cartilha-video:hover, .cartilha-video:focus-visible { transform:translateY(-2px); border-color:var(--brand); }
.cartilha-video img { display:block; width:100%; height:auto; aspect-ratio:430/560; object-fit:cover; object-position:top; }
.cartilha-video__play { position:absolute; top:calc(50% - 40px); left:50%; display:grid; place-items:center; width:46px; height:46px; margin-left:-23px; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; font-size:1.1rem; padding-left:3px; }
.cartilha-video__txt { display:block; padding:10px 12px; font-size:.88rem; font-weight:600; line-height:1.35; }
.cartilha-video__txt b { color:var(--brand); }

.cartilha-player { width:min(440px,94vw); max-height:94vh; padding:0; border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--ink); }
.cartilha-player::backdrop { background:rgba(0,0,0,.78); }
.cartilha-player__topo { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px 10px 16px; }
.cartilha-player__topo strong { font-size:.95rem; }
.cartilha-player__fechar { width:38px; height:38px; flex:none; border:1px solid var(--line); border-radius:10px; background:var(--surface-soft); color:var(--ink); font-size:1.4rem; line-height:1; cursor:pointer; }
.cartilha-player video { display:block; width:100%; max-height:calc(94vh - 60px); background:#000; }

@media (max-width: 760px) { .cartilha-videos__grade { grid-template-columns:repeat(2,1fr); } }

/* 05/10/2026: aponta para a cartilha única */
.aviso-cartilha-unica{display:block;padding:12px 16px;background:#22c55e;color:#04140a;font-weight:700;text-align:center;text-decoration:none;font-size:15px;line-height:1.35}
.aviso-cartilha-unica b{text-decoration:underline}