/* ==========================================================================
   Página do Dízimo (public/area_dizimista.php → includes/dizimo_pagina.php)
   ========================================================================== */
.dz { overflow: hidden; }
.dz h1, .dz h2, .dz h3 { font-family: var(--fonte-titulo); color: var(--azul-escuro); }
.dz-secao { padding: 84px 0; }
.dz-sobretitulo { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--dourado); margin-bottom: 10px; }
.dz h2 { font-size: 34px; line-height: 1.2; margin-bottom: 18px; }
.dz-cabecalho { text-align: center; max-width: 640px; margin: 0 auto 46px; }
.dz-cabecalho p { color: #6b7180; }

/* ---------- Abertura ---------- */
.dz-hero {
    position: relative; color: #fff; padding: 96px 0 130px;
    background:
        radial-gradient(ellipse at 78% 20%, rgba(226,183,101,.28), transparent 55%),
        linear-gradient(135deg, var(--azul-profundo) 0%, var(--azul-escuro) 55%, var(--azul-medio) 100%);
}
.dz-hero.com-imagem {
    background:
        linear-gradient(100deg, rgba(7,29,59,.94) 0%, rgba(11,42,82,.78) 50%, rgba(11,42,82,.35) 100%),
        var(--dz-hero) center / cover no-repeat;
}
.dz-hero-luz {
    position: absolute; top: -160px; right: -120px; width: 520px; height: 520px; border-radius: 50%;
    background: radial-gradient(circle, rgba(243,230,204,.22), transparent 65%);
    animation: dzRespira 9s ease-in-out infinite; pointer-events: none;
}
@keyframes dzRespira { 50% { transform: scale(1.15); opacity: .7; } }
.dz-hero-grade { position: relative; display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center; }
.dz-selo { display: inline-block; padding: 6px 14px; border: 1px solid rgba(226,183,101,.55); border-radius: 30px; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--dourado-claro); margin-bottom: 22px; }
.dz-hero h1 { color: #fff; font-size: 48px; line-height: 1.12; margin-bottom: 20px; }
.dz-hero h1 em { font-family: var(--fonte-script); font-style: normal; font-weight: 400; color: var(--dourado-claro); font-size: 1.35em; line-height: .8; }
.dz-hero-sub { font-size: 16.5px; line-height: 1.75; opacity: .9; max-width: 540px; margin-bottom: 32px; }
.dz-hero-botoes { display: flex; flex-wrap: wrap; gap: 14px; }
.dz-btn-claro { display: inline-flex; align-items: center; padding: 12px 24px; border-radius: 6px; border: 1.5px solid rgba(255,255,255,.45); color: #fff; font-weight: 600; font-size: 14px; transition: background .2s, border-color .2s; }
.dz-btn-claro:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }
.dz-versiculo {
    position: relative; margin: 0; padding: 38px 34px 30px; border-radius: 18px;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(6px); font-family: var(--fonte-titulo); font-style: italic; font-size: 21px; line-height: 1.6;
}
.dz-aspas { position: absolute; top: -26px; left: 22px; font-size: 96px; line-height: 1; color: var(--dourado-claro); font-style: normal; }
.dz-versiculo cite { display: block; margin-top: 16px; font-family: var(--fonte-texto); font-style: normal; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--dourado-claro); }
.dz-onda { position: absolute; left: 0; bottom: -1px; width: 100%; height: 70px; fill: var(--creme, #fbf8f2); }

/* ---------- Conceito ---------- */
#conceito { background: var(--creme); }
.dz-conceito { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: center; }
.dz-conceito-arte { position: relative; aspect-ratio: 4 / 5; border-radius: 200px 200px 20px 20px; background: linear-gradient(160deg, var(--dourado-suave), #fff 70%); box-shadow: var(--sombra-forte); display: flex; align-items: center; justify-content: center; }
.dz-conceito-arte.com-imagem { background: none; overflow: visible; }
.dz-conceito-arte img { width: 100%; height: 100%; object-fit: cover; border-radius: 200px 200px 20px 20px; }
.dz-espiga { width: 44%; color: var(--dourado); animation: dzBalanca 6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes dzBalanca { 50% { transform: rotate(3deg); } }
.dz-conceito-carimbo {
    position: absolute; right: -22px; bottom: 34px; width: 170px; padding: 18px 16px; border-radius: 16px;
    background: var(--azul-escuro); color: var(--dourado-claro); font-family: var(--fonte-script); font-size: 32px; font-weight: 400; line-height: 1.1; text-align: center; box-shadow: var(--sombra-forte);
}
.dz-conceito-carimbo small { display: block; font-family: var(--fonte-texto); font-size: 11.5px; font-weight: 400; line-height: 1.45; color: rgba(255,255,255,.85); margin-top: 6px; }
.dz-conceito-texto p { line-height: 1.85; margin-bottom: 16px; }
.dz-conceito-texto strong { color: var(--azul-escuro); }
.dz-marcas { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; }
.dz-marcas li { display: flex; align-items: center; gap: 10px; background: #fff; padding: 12px 14px; border-radius: 12px; box-shadow: var(--sombra); font-size: 14px; }
.dz-marcas li span { font-size: 20px; }
.dz-marcas b { color: var(--azul-escuro); }

/* ---------- Finalidades ---------- */
.dz-finalidades { background: #fff; }
.dz-cartoes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.dz-cartao {
    position: relative; padding: 34px 26px 30px; border-radius: 18px; background: var(--creme);
    border: 1px solid var(--creme-escuro); overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
}
.dz-cartao::before { content: ''; position: absolute; inset: auto 0 0 0; height: 4px; background: linear-gradient(90deg, var(--dourado), var(--dourado-claro)); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.dz-cartao:hover { transform: translateY(-8px); box-shadow: var(--sombra-forte); background: #fff; }
.dz-cartao:hover::before { transform: scaleX(1); }
.dz-cartao-icone { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; background: #fff; box-shadow: var(--sombra); margin-bottom: 20px; transition: transform .35s ease; }
.dz-cartao:hover .dz-cartao-icone { transform: scale(1.1) rotate(-6deg); }
.dz-cartao-num { position: absolute; top: 18px; right: 22px; font-family: var(--fonte-titulo); font-size: 44px; font-weight: 700; color: var(--dourado-suave); }
.dz-cartao h3 { font-size: 22px; margin-bottom: 10px; }
.dz-cartao p { font-size: 14px; line-height: 1.75; }

/* ---------- Aplicativo ---------- */
.dz-app { background: linear-gradient(180deg, var(--creme) 0%, #fff 100%); }
.dz-app-grade { display: grid; grid-template-columns: 1.2fr .8fr; gap: 64px; align-items: center; }
.dz-app-texto > p { line-height: 1.8; margin-bottom: 30px; }
.dz-passos { list-style: none; counter-reset: passo; position: relative; }
.dz-passos::before { content: ''; position: absolute; left: 21px; top: 10px; bottom: 30px; width: 2px; background: linear-gradient(var(--dourado), var(--dourado-suave)); }
.dz-passos li { counter-increment: passo; position: relative; padding: 0 0 28px 66px; }
.dz-passos li::before {
    content: counter(passo); position: absolute; left: 0; top: -4px; width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; background: var(--azul-escuro); color: var(--dourado-claro);
    font-family: var(--fonte-titulo); font-weight: 700; font-size: 18px; box-shadow: 0 0 0 6px #fff, var(--sombra);
}
.dz-passos b { display: block; color: var(--azul-escuro); font-size: 16.5px; margin-bottom: 4px; }
.dz-passos span { display: block; font-size: 14px; line-height: 1.65; }
.dz-baixar { margin-top: 14px; font-size: 15px; padding: 13px 26px; }
.dz-perfil {
    display: inline-flex; align-items: center; gap: 14px; margin-top: 12px; padding: 8px 8px 8px 20px; border-radius: 40px;
    border: 2px dashed var(--dourado); background: #fff; cursor: pointer; font: inherit; transition: border-color .2s, background .2s;
}
.dz-perfil:hover { background: var(--dourado-suave); }
.dz-buscas { display: flex; flex-wrap: wrap; gap: 0 10px; }
.dz-buscas .dz-perfil-nome { font-size: 18px !important; }
.dz-passos .dz-perfil-nome { font-size: 22px; font-weight: 700; color: var(--azul-escuro); letter-spacing: .5px; }
.dz-passos .dz-perfil-acao { display: inline-block; padding: 7px 14px; border-radius: 30px; background: var(--azul-escuro); color: #fff; font-size: 12.5px; font-weight: 600; }
.dz-perfil.copiado { border-style: solid; border-color: #2e8b57; }
.dz-perfil.copiado .dz-perfil-acao { background: #2e8b57; }
.dz-paroquia { margin-top: 12px; padding: 14px 18px; border-left: 4px solid var(--dourado); background: #fff; border-radius: 0 10px 10px 0; box-shadow: var(--sombra); }
.dz-paroquia strong { display: block; color: var(--azul-escuro); text-transform: uppercase; font-size: 13.5px; letter-spacing: .4px; }
.dz-paroquia small { display: block; font-size: 12.5px; color: #7a808c; margin-top: 3px; }

.dz-app-visual { position: relative; display: flex; justify-content: center; }
.dz-celular {
    width: 270px; padding: 12px; border-radius: 42px; background: #111a2b;
    box-shadow: 0 40px 70px rgba(11,42,82,.28), inset 0 0 0 2px #2b3650;
    transform: rotate(-4deg); transition: transform .5s ease;
}
.dz-celular:hover { transform: rotate(0) translateY(-6px); }
.dz-celular-tela { border-radius: 32px; background: linear-gradient(180deg, #f8f4ec, #fff 45%); min-height: 500px; padding: 14px 16px 22px; overflow: hidden; }
.dz-tela-topo { display: flex; justify-content: center; margin-bottom: 22px; }
.dz-tela-topo span { width: 86px; height: 22px; border-radius: 20px; background: #111a2b; }
.dz-tela-app { font-family: var(--fonte-titulo); font-weight: 700; font-size: 20px; color: var(--azul-escuro); margin-bottom: 16px; }
.dz-tela-busca { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-radius: 12px; background: #fff; border: 1px solid #e5dccb; font-size: 14px; color: var(--azul-escuro); margin-bottom: 18px; }
.dz-tela-busca::before { content: '🔍'; font-size: 13px; }
.dz-digitando { display: inline-block; overflow: hidden; white-space: nowrap; border-right: 2px solid var(--dourado); width: 0; animation: dzDigita 1.6s steps(var(--n, 7)) .6s forwards, dzCursor .8s step-end infinite; font-weight: 600; }
@keyframes dzDigita { to { width: calc(var(--n, 7) * 1ch + .2ch); } }
@keyframes dzCursor { 50% { border-color: transparent; } }
.dz-tela-resultado { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 14px; background: #fff; box-shadow: 0 8px 20px rgba(11,42,82,.1); opacity: 0; transform: translateY(10px); animation: dzSurge .6s ease 2.4s forwards; }
.dz-tela-logo { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--azul-escuro); font-size: 20px; }
.dz-tela-resultado b { display: block; font-size: 12px; line-height: 1.35; color: var(--azul-escuro); text-transform: uppercase; }
.dz-tela-resultado small { display: block; font-size: 10.5px; color: #8a8f99; margin-top: 3px; line-height: 1.4; }
.dz-tela-botao { margin-top: 16px; padding: 12px; border-radius: 12px; text-align: center; background: var(--dourado); color: #fff; font-weight: 600; font-size: 14px; opacity: 0; animation: dzSurge .6s ease 3s forwards; }
@keyframes dzSurge { to { opacity: 1; transform: none; } }
.dz-tela-linhas { margin-top: 26px; display: grid; gap: 10px; }
.dz-tela-linhas i { display: block; height: 42px; border-radius: 12px; background: linear-gradient(90deg, #f1ece2, #faf7f1); }
.dz-qr { position: absolute; right: -10px; bottom: 30px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px; border-radius: 16px; background: #fff; box-shadow: var(--sombra-forte); text-align: center; }
.dz-qr span { font-size: 11px; line-height: 1.4; color: #6b7180; }
.dz-qr-codigo img, .dz-qr-codigo canvas { display: block; }

/* ---------- Dúvidas ---------- */
.dz-duvidas { background: #fff; padding-top: 40px; }
.dz-duvidas details { border-bottom: 1px solid var(--creme-escuro); }
.dz-duvidas summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; font-weight: 600; color: var(--azul-escuro); font-size: 16px; }
.dz-duvidas summary::-webkit-details-marker { display: none; }
.dz-duvidas summary::after { content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 400; color: var(--dourado); transition: transform .25s; }
.dz-duvidas details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.dz-duvidas details p { padding: 0 0 20px; line-height: 1.8; }
.dz-duvidas details a { color: var(--dourado); font-weight: 600; }

/* ---------- Fechamento ---------- */
.dz-fechamento {
    padding: 90px 0; text-align: center; color: #fff;
    background: radial-gradient(ellipse at 50% 0%, rgba(226,183,101,.25), transparent 60%), var(--azul-escuro);
}
.dz-fechamento h2 { color: #fff; margin-bottom: 12px; }
.dz-fechamento > .container > p { opacity: .88; max-width: 560px; margin: 0 auto 30px; }
.dz-fechamento-versiculo { font-family: var(--fonte-titulo); font-style: italic; font-size: 19px; color: var(--dourado-claro); max-width: 640px; margin: 0 auto 36px !important; opacity: 1 !important; }
.dz-fechamento-versiculo cite { display: block; margin-top: 8px; font-family: var(--fonte-texto); font-style: normal; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.6); }
.dz-acesso-antigo { margin-top: 34px !important; font-size: 12.5px; opacity: .6 !important; }
.dz-acesso-antigo a { color: var(--dourado-claro); text-decoration: underline; }

/* ---------- Animação ao rolar ---------- */
.dz-anima { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.dz-anima.visivel { opacity: 1; transform: none; }
.dz-cartao.dz-anima:nth-child(2), .dz-passos li.dz-anima:nth-child(2) { transition-delay: .1s; }
.dz-cartao.dz-anima:nth-child(3), .dz-passos li.dz-anima:nth-child(3) { transition-delay: .2s; }
.dz-cartao.dz-anima:nth-child(4), .dz-passos li.dz-anima:nth-child(4) { transition-delay: .3s; }
.dz-celular.dz-anima { transform: rotate(-4deg) translateY(30px); }
.dz-celular.dz-anima.visivel { transform: rotate(-4deg); }
.dz-celular.dz-anima.visivel:hover { transform: rotate(0) translateY(-6px); }

@media (prefers-reduced-motion: reduce) {
    .dz *, .dz *::before, .dz *::after { animation: none !important; transition: none !important; }
    .dz-anima, .dz-tela-resultado, .dz-tela-botao { opacity: 1 !important; transform: none !important; }
    .dz-digitando { width: auto; border: 0; }
}

/* ---------- Responsivo ---------- */
@media (max-width: 1040px) {
    .dz-cartoes { grid-template-columns: repeat(2, 1fr); }
    .dz-hero-grade, .dz-app-grade { grid-template-columns: 1fr; gap: 44px; }
    .dz-conceito { grid-template-columns: 1fr; gap: 44px; }
    .dz-conceito-arte { max-width: 340px; margin: 0 auto; width: 100%; }
}
@media (max-width: 640px) {
    .dz-secao { padding: 60px 0; }
    .dz-hero { padding: 64px 0 100px; }
    .dz-hero h1 { font-size: 34px; }
    .dz h2 { font-size: 27px; }
    .dz-versiculo { font-size: 18px; padding: 32px 22px 24px; }
    .dz-cartoes, .dz-marcas { grid-template-columns: 1fr; }
    .dz-conceito-carimbo { right: 50%; transform: translateX(50%); bottom: -30px; width: 210px; }
    .dz-conceito-arte { margin-bottom: 30px; }
    .dz-passos li { padding-left: 58px; }
    .dz-passos .dz-perfil-nome { font-size: 19px; }
    .dz-celular { width: 240px; }
}