/* ============================================================
   Páginas internas: funcionalidades (por produto) e blog.
   Reaproveita .janela, .valores, .passos, .duvida e .selo das outras folhas.
   ============================================================ */

/* Trilha (breadcrumb) */
.trilha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13.5px; color: var(--tinta-3); margin-bottom: 26px; }
.trilha a { color: var(--tinta-2); text-decoration: none; }
.trilha a:hover { color: var(--acento); }
.trilha .ic { font-size: 10px; transform: rotate(-90deg); opacity: .6; }
.trilha span { color: var(--tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60ch; }

.titulo--menor { font-size: clamp(26px, 3vw, 36px); margin-bottom: 28px; display: flex; align-items: center; gap: 12px; }
.titulo--menor .ic { color: var(--acento); }

/* Topo de módulo / índice / blog */
.modulo-topo, .pagina-topo { position: relative; overflow: hidden; padding: 130px 0 80px; }
.modulo-topo__grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.modulo-topo .titulo { font-size: clamp(34px, 4vw, 54px); }
.modulo-topo .selo .ic { color: var(--acento); }
.modulo-topo .janela .video, .modulo-topo .janela img { display: block; width: 100%; height: auto; }
.modulo-topo--indice { padding-bottom: 60px; }
.indice-grupos { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
.indice-grupos a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--borda); background: var(--superficie);
    color: var(--tinta); text-decoration: none; font-weight: 600; font-size: 14.5px; transition: border-color .15s, background .15s; }
.indice-grupos a:hover, .indice-grupos a[aria-current] { border-color: var(--acento); background: var(--acento-veu); }
.indice-grupos .ic { color: var(--acento); }

/* Texto corrido + recursos */
.modulo-texto__grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.modulo-texto__corrido p { font-size: 17.5px; line-height: 1.7; color: var(--tinta-2); margin: 0 0 18px; }
.modulo-texto__corrido a, .artigo-corpo a { color: var(--acento); font-weight: 600; }
.modulo-recursos { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }

.modulo-passos { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.modulo-passos .passos { margin-top: 8px; }

.cenarios { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 40px; }
.cenario { padding: 24px; border-radius: var(--raio); border: 1px solid var(--borda); background: #fff; }
.cenario strong { display: block; font-size: 17px; margin-bottom: 8px; }
.cenario p { margin: 0; color: var(--tinta-2); line-height: 1.6; }

/* Cartões de módulo */
.grupo-modulos { padding: 72px 0; }
.modulos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.modulo-cartao { display: flex; flex-direction: column; border-radius: var(--raio-lg); overflow: hidden; border: 1px solid var(--borda); background: var(--superficie);
    color: var(--tinta); text-decoration: none; transition: transform .18s ease, border-color .18s ease; }
.claro .modulo-cartao { background: #fff; }
.modulo-cartao:hover { transform: translateY(-4px); border-color: var(--acento-contorno); }
.modulo-cartao__capa { position: relative; aspect-ratio: 16 / 9; background: #f2eff8; overflow: hidden; }
.modulo-cartao__capa img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.modulo-cartao__capa .ic { position: absolute; right: 12px; bottom: 12px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
    background: var(--amarelo); color: var(--acento-tinta, #2E0F58); font-size: 16px; box-shadow: 0 8px 20px rgba(0, 0, 0, .25); }
.modulo-cartao__corpo { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.modulo-cartao__corpo strong { font-size: 17px; display: flex; gap: 8px; align-items: center; }
.modulo-cartao__corpo strong .ic { color: var(--acento); }
.modulo-cartao__corpo > span { color: var(--tinta-2); font-size: 14.5px; line-height: 1.5; }
.modulo-cartao__corpo em { font-style: normal; font-weight: 700; color: var(--acento); margin-top: auto; font-size: 14px; }

/* Blog: cartões */
.posts-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px; }
.post-cartao { display: flex; flex-direction: column; border-radius: var(--raio-lg); overflow: hidden; border: 1px solid var(--borda); background: #fff; }
.post-cartao__capa { display: block; aspect-ratio: 3 / 2; background: linear-gradient(135deg, #401579, #8A4FD8); overflow: hidden; }
.post-cartao__capa img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.post-cartao:hover .post-cartao__capa img { transform: scale(1.04); }
.post-cartao__corpo { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-cartao__cat { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--acento); }
.post-cartao h3 { margin: 0; font-size: 18px; line-height: 1.35; }
.post-cartao h3 a { color: var(--tinta); text-decoration: none; }
.post-cartao h3 a:hover { color: var(--acento); }
.post-cartao p { margin: 0; color: var(--tinta-2); font-size: 14.5px; line-height: 1.55; }
.post-cartao small { margin-top: auto; color: var(--tinta-3); font-size: 13px; }
.post-cartao--destaque { display: grid; grid-template-columns: 1.1fr 1fr; margin-bottom: 26px; }
.post-cartao--destaque .post-cartao__capa { aspect-ratio: auto; min-height: 320px; }
.post-cartao--destaque .post-cartao__corpo { padding: 32px; justify-content: center; }
.post-cartao--destaque h3 { font-size: clamp(22px, 2.4vw, 30px); }
.post-cartao--destaque p { font-size: 16px; }

/* Blog: artigo */
.artigo-topo { position: relative; overflow: hidden; padding: 130px 0 56px; }
.artigo-largura { max-width: 780px; }
.artigo-topo .selo { text-decoration: none; }
.artigo-topo .titulo { font-size: clamp(30px, 3.8vw, 46px); margin-top: 16px; }
.artigo-meta { color: var(--tinta-3); font-size: 14px; margin: 18px 0 0; }
.artigo-fundo { padding: 48px 0 72px; }
.artigo-capa { width: 100%; height: auto; border-radius: var(--raio-lg); display: block; margin: -96px 0 36px; box-shadow: 0 30px 70px rgba(22, 9, 43, .25); position: relative; }
.artigo-corpo { font-size: 17.5px; line-height: 1.75; color: var(--tinta-2); }
.artigo-corpo h2 { color: var(--tinta); font-size: 27px; line-height: 1.25; margin: 42px 0 14px; letter-spacing: -.01em; }
.artigo-corpo h3 { color: var(--tinta); font-size: 20px; margin: 30px 0 10px; }
.artigo-corpo p { margin: 0 0 18px; }
.artigo-corpo ul, .artigo-corpo ol { margin: 0 0 20px; padding-left: 24px; }
.artigo-corpo li { margin-bottom: 8px; }
.artigo-corpo strong { color: var(--tinta); }
.artigo-corpo blockquote { margin: 24px 0; padding: 16px 22px; border-left: 4px solid var(--acento); background: var(--acento-veu); border-radius: 0 var(--raio-sm) var(--raio-sm) 0; }
.artigo-corpo table { width: 100%; border-collapse: collapse; margin: 10px 0 26px; font-size: 15px; display: block; overflow-x: auto; }
.artigo-corpo th, .artigo-corpo td { border: 1px solid var(--borda); padding: 10px 12px; text-align: left; vertical-align: top; }
.artigo-corpo th { background: var(--acento-veu); color: var(--tinta); }
.artigo-faq { margin-top: 44px; display: grid; gap: 10px; }
.artigo-faq h2 { font-size: 24px; margin: 0 0 8px; }
.artigo-fontes { margin-top: 36px; padding: 20px 24px; border-radius: var(--raio); border: 1px solid var(--borda); background: var(--superficie); font-size: 14.5px; }
.artigo-fontes ul { margin: 8px 0 0; padding-left: 20px; }
.artigo-fontes li { margin: 4px 0; }
.artigo-fontes a { color: var(--tinta-2); word-break: break-word; }
.artigo-cta { margin-top: 36px; display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: var(--raio-lg); background: #401579; color: #fff; }
.artigo-cta > .ic { font-size: 30px; color: #FFC500; flex: none; }
.artigo-cta strong { display: block; font-size: 17px; }
.artigo-cta span { color: #d8ccf0; font-size: 14.5px; }
.artigo-cta .botao { margin-left: auto; flex: none; }

.chamada-final { padding: 90px 0; background: radial-gradient(700px 400px at 50% 0%, rgba(138, 79, 216, .35), transparent 70%); }

@media (max-width: 960px) {
    .modulo-topo__grade, .modulo-texto__grade, .modulo-passos, .post-cartao--destaque { grid-template-columns: 1fr; gap: 32px; }
    .modulo-topo, .artigo-topo { padding-top: 110px; }
    .post-cartao--destaque .post-cartao__capa { min-height: 220px; }
}
@media (max-width: 560px) {
    .modulo-recursos { grid-template-columns: 1fr; }
    .artigo-corpo { font-size: 16.5px; }
    .artigo-capa { margin-top: -70px; }
    .artigo-cta { flex-direction: column; align-items: flex-start; }
    .artigo-cta .botao { margin-left: 0; }
    .trilha span { max-width: 30ch; }
}
@media (prefers-reduced-motion: reduce) { .modulo-cartao, .post-cartao__capa img { transition: none; } }
.area h3 a { color: inherit; text-decoration: none; } .area h3 a:hover { color: var(--acento); text-decoration: underline; }