@charset "utf-8";

/* =========================================================
   MEMORIAL SAUDADE — irmãs já falecidas
   Página: /memorial-saudade  (pg/memorial-saudade.php)
   Tom sóbrio: fundo claro, azul da casa em doses pequenas,
   foto em arco e muito respiro entre os cartões.
   ========================================================= */

.memorial{
    padding: 0 0 70px;
    background:
        radial-gradient(900px 420px at 50% -180px, rgba(29,138,216,.08) 0%, rgba(29,138,216,0) 70%),
        linear-gradient(180deg, #fbfcfe 0%, #ffffff 55%);
}

/* ---------- ABERTURA ---------- */
.memorial-abertura{
    display: flex;
    align-items: center;
    gap: 22px;
    max-width: 860px;
    margin: 6px 0 42px;
    padding: 24px 28px;
    background: #fff;
    border: 1px solid var(--sj-cinza-borda);
    border-left: 4px solid var(--sj-azul-claro);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.memorial-abertura p{
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--sj-cinza-texto);
    margin: 0;
}

/* CHAMA — vela acesa, desenhada só com CSS */
.memorial-chama{
    position: relative;
    flex-shrink: 0;
    width: 26px;
    height: 46px;
    border-radius: 13px 13px 4px 4px;
    background: linear-gradient(180deg, #ffffff 0%, #eef3f8 100%);
    border: 1px solid var(--sj-cinza-borda);
    align-self: flex-end;
}
.memorial-chama i{
    position: absolute;
    left: 50%;
    top: -17px;
    width: 12px;
    height: 18px;
    transform: translateX(-50%);
    border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
    background: linear-gradient(180deg, #ffd580 0%, #f7a41d 55%, #e2761b 100%);
    box-shadow: 0 0 16px rgba(247,164,29,.55);
    animation: memorial-tremula 2.6s ease-in-out infinite;
}
@keyframes memorial-tremula{
    0%,100%{ transform: translateX(-50%) scale(1); opacity: 1; }
    50%    { transform: translateX(-50%) scale(1.09, .94); opacity: .88; }
}

/* ---------- FILTROS ---------- */
.memorial-filtros{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin: 0 0 32px;
    padding: 0 0 22px;
    border-bottom: 1px solid var(--sj-cinza-borda);
}
.memorial-busca{
    position: relative;
    flex: 1 1 280px;
    max-width: 360px;
}
.memorial-busca i{
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--sj-cinza-texto);
    pointer-events: none;
}
.memorial .memorial-busca input[type="search"]{
    width: 100%;
    height: 44px;
    padding: 0 16px 0 40px;
    font-family: var(--fonte-padrao);
    font-size: 14.5px;
    color: var(--sj-texto);
    background: #fff;
    border: 1px solid var(--sj-cinza-borda);
    border-radius: 40px;
    transition: var(--sj-trans);
    -webkit-appearance: none;
    appearance: none;
}
.memorial .memorial-busca input[type="search"]:focus{
    border-color: var(--sj-azul-claro);
    box-shadow: 0 0 0 4px rgba(29,138,216,.12);
}

.memorial-anos{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.memorial .memorial-ano{
    height: 34px;
    padding: 0 15px;
    font-family: var(--fonte-padrao);
    font-size: 13px;
    font-weight: 700;
    color: var(--sj-cinza-texto);
    background: #fff;
    border: 1px solid var(--sj-cinza-borda);
    border-radius: 40px;
    transition: var(--sj-trans);
}
.memorial .memorial-ano:hover{
    color: var(--sj-azul-escuro);
    border-color: var(--sj-azul-claro);
}
.memorial .memorial-ano.ativo{
    color: #fff;
    background: var(--sj-azul-escuro);
    border-color: var(--sj-azul-escuro);
}

.memorial-total{
    margin-left: auto;
    font-size: 13px;
    color: var(--sj-cinza-texto);
}
.memorial-total strong{
    color: var(--sj-titulo);
    font-weight: 800;
}

/* ---------- GRADE DE CARTÕES ---------- */
.memorial-grade{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 26px;
}

.memorial-card{
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 30px 26px 26px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--sj-cinza-borda);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: var(--sj-trans);
}
.memorial-card:before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 4px;
    border-radius: var(--radius) var(--radius) 0 0;
    background: linear-gradient(90deg, var(--sj-azul-claro) 0%, var(--sj-azul) 100%);
    opacity: .55;
    transition: var(--sj-trans);
}
.memorial-card.com-detalhe{ cursor: pointer; }
.memorial-card.com-detalhe:hover,
.memorial-card.com-detalhe:focus{
    transform: translateY(-4px);
    border-color: var(--sj-azul-suave);
    box-shadow: var(--shadow-hover);
}
.memorial-card.com-detalhe:hover:before,
.memorial-card.com-detalhe:focus:before{ opacity: 1; }
.memorial-card.com-detalhe:focus-visible{
    outline: 3px solid rgba(29,138,216,.35);
    outline-offset: 3px;
}

/* FOTO EM ARCO */
.memorial-foto{
    width: 128px;
    height: 158px;
    margin: 0 auto 20px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #eef3f8 0%, #dce7f2 100%);
    border-radius: 64px 64px 12px 12px;
    box-shadow: 0 8px 22px rgba(0,73,124,.14);
}
.memorial-foto img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: var(--sj-trans);
}
.memorial-card.com-detalhe:hover .memorial-foto img{ transform: scale(1.05); }

.memorial-iniciais{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--sj-azul-medio);
    opacity: .55;
}

/* TEXTOS DO CARTÃO */
.memorial-conteudo{
    display: flex;
    flex-direction: column;
    flex: 1;
}
.memorial-nome{
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--sj-titulo);
    margin: 0 0 8px;
}
.memorial-periodo{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    align-self: center;
    margin: 0 0 14px;
    padding: 4px 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--sj-azul-escuro);
    background: rgba(29,138,216,.08);
    border-radius: 40px;
}
.memorial-periodo i{ font-size: 10px; opacity: .7; }

.memorial-frase{
    font-size: 14px;
    font-style: italic;
    line-height: 1.6;
    color: var(--sj-azul-medio);
    margin: 0 0 12px;
}
.memorial-resumo{
    font-size: 14px;
    line-height: 1.65;
    color: var(--sj-cinza-texto);
    margin: 0 0 14px;
}
.memorial-local{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--sj-cinza-texto);
    margin: 0 0 14px;
}
.memorial-local i{ font-size: 11px; color: var(--sj-azul-claro); }

.memorial-abrir{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--sj-azul);
    border-top: 1px solid var(--sj-cinza-borda);
    transition: var(--sj-trans);
}
.memorial-abrir i{ font-size: 11px; transition: var(--sj-trans); }
.memorial-card.com-detalhe:hover .memorial-abrir{ color: var(--sj-azul-escuro); }
.memorial-card.com-detalhe:hover .memorial-abrir i{ transform: translateX(4px); }

/* ---------- ESTADOS VAZIOS ---------- */
.memorial-vazio,
.memorial-sem-resultado{
    padding: 60px 20px;
    text-align: center;
    font-size: 15px;
    color: var(--sj-cinza-texto);
}
.memorial-vazio i{
    display: block;
    font-size: 40px;
    color: var(--sj-azul-suave);
    margin: 0 0 16px;
}
.memorial-sem-resultado{ display: none; }

/* ---------- JANELA DE LEITURA ---------- */
body.memorial-travado{ overflow: hidden; }

.memorial-janela{
    position: fixed;
    inset: 0;
    z-index: 5000000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.memorial-janela[hidden]{ display: none; }
.memorial-janela-fundo{
    position: absolute;
    inset: 0;
    background: rgba(0,40,72,.62);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.memorial-janela-caixa{
    position: relative;
    width: 640px;
    max-width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    padding: 34px 36px 38px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 30px 70px rgba(0,40,72,.35);
    animation: memorial-sobe .28s ease;
}
@keyframes memorial-sobe{
    from{ opacity: 0; transform: translateY(18px); }
    to  { opacity: 1; transform: translateY(0); }
}
.memorial-janela-fechar{
    position: absolute;
    right: 14px;
    top: 14px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--sj-cinza-texto);
    background: #f4f6f8;
    border-radius: 50%;
    transition: var(--sj-trans);
}
.memorial-janela-fechar:hover{
    color: #fff;
    background: var(--sj-azul-escuro);
}

.memorial-janela-topo{
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 0 40px 20px 0;
    margin: 0 0 20px;
    border-bottom: 1px solid var(--sj-cinza-borda);
}
.memorial-janela-foto{
    position: relative;
    flex-shrink: 0;
    width: 92px;
    height: 114px;
    overflow: hidden;
    background: linear-gradient(160deg, #eef3f8 0%, #dce7f2 100%);
    border-radius: 46px 46px 10px 10px;
    box-shadow: 0 8px 20px rgba(0,73,124,.16);
}
.memorial-janela-foto img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.memorial-janela-foto .memorial-iniciais{ font-size: 30px; }

.memorial-janela-nome{
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--sj-titulo);
    margin: 0 0 8px;
}
.memorial-janela-datas{
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sj-azul-escuro);
    margin: 0 0 4px;
}
.memorial-janela-local{
    font-size: 13px;
    color: var(--sj-cinza-texto);
    margin: 0;
}
.memorial-janela-frase{
    font-size: 16px;
    font-style: italic;
    line-height: 1.6;
    color: var(--sj-azul-medio);
    margin: 0 0 20px;
    padding: 0 0 0 16px;
    border-left: 3px solid var(--sj-azul-suave);
}
.memorial-janela-texto{
    font-size: 15px;
    line-height: 1.75;
    color: var(--sj-texto);
}
.memorial-janela-texto p{ margin: 0 0 14px; }
.memorial-janela-texto p:last-child{ margin-bottom: 0; }
.memorial-janela-texto a{ text-decoration: underline; text-underline-offset: 3px; }
.memorial-janela-texto ul,
.memorial-janela-texto ol{ margin: 0 0 14px 20px; }
.memorial-janela-texto ul li{ list-style: disc; }
.memorial-janela-texto ol li{ list-style: decimal; }

/* ---------- RESPONSIVO ---------- */
@media screen and (max-width: 760px){
    .memorial{ padding-bottom: 50px; }
    .memorial-abertura{
        flex-direction: row;
        gap: 18px;
        padding: 20px;
        margin-bottom: 30px;
    }
    .memorial-abertura p{ font-size: 14.5px; }
    .memorial-total{ margin-left: 0; }
    .memorial-grade{ grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
    .memorial-janela{ padding: 0; }
    .memorial-janela-caixa{
        max-height: 100vh;
        height: 100%;
        border-radius: 0;
        padding: 28px 22px 34px;
    }
    .memorial-janela-topo{
        flex-direction: column;
        text-align: center;
        gap: 16px;
        padding-right: 0;
    }
}

@media screen and (max-width: 420px){
    .memorial-grade{ grid-template-columns: 1fr; }
}

/* Menos animação para quem pediu menos animação no sistema */
@media (prefers-reduced-motion: reduce){
    .memorial-chama i{ animation: none; }
    .memorial-janela-caixa{ animation: none; }
    .memorial-card.com-detalhe:hover{ transform: none; }
}