/* =========================================
   1. VARIÁVEIS DE DESIGN (LUX FIDEI)
   ========================================= */
:root {
    /* Cores principais */
    --gold:        #8b6f3d;
    --gold-light:  #d4af37;
    --gold-pale:   #f5ede0;
    --gold-border: rgba(139, 111, 61, 0.18);

    /* Neutros */
    --white:       #ffffff;
    --bg:          #f7f5f2;
    --bg-warm:     #fdfbf8;
    --bg-card:     #faf8f4;

    /* Texto */
    --text:        #1e1e1e;
    --text-dark:   #111111;
    --text-body:   #3a3a3a;
    --text-muted:  #7a7060;
    --text-light:  #999999;

    /* Bordas */
    --border-light: #e8e0d0;
    --border-pale:  #f0ece4;
    --border-card:  rgba(0,0,0,0.04);

    /* Feedback */
    --success:      #4caf82;
    --success-dark: #388e60;
    --success-glow: rgba(76, 175, 130, 0.28);

    /* Layout */
    --radius:      18px;
    --radius-md:   12px;
    --radius-sm:   10px;
    --radius-xs:   8px;
    --radius-full: 50px;

    /* Sombras — aprimoradas com camadas */
    --shadow:    0 2px 8px rgba(0,0,0,0.05), 0 4px 20px rgba(0,0,0,0.07);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.12);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.10), 0 20px 48px rgba(0,0,0,0.15);
    --shadow-gold: 0 8px 32px rgba(139, 111, 61, 0.18);

    /* Transições */
    --ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration:    0.3s;
    --duration-lg: 0.5s;

    /* Z-index escalonado */
    --z-base:           1;
    --z-card:           2;
    --z-card-content:   3;
    --z-badge:          4;
    --z-modal:          10000;
    --z-modal-content:  10001;
    --z-modal-controls: 10002;
    --z-modal-top:      10003;
}

/* =========================================
   2. RESET GERAL
   ========================================= */
*, *::before, *::after {
    box-sizing: border-box;
}

.biografia-container p::first-letter,
.sl-wrap p::first-letter,
.sl-wrap .sl-milagre-card p::first-letter,
.sl-wrap .sl-citacao p::first-letter,
.sl-wrap .sl-destaque p::first-letter {
    font-size:   inherit !important;
    float:       none    !important;
    line-height: inherit !important;
    font-weight: inherit !important;
    color:       inherit !important;
    margin:      0       !important;
    padding:     0       !important;
    font-family: inherit !important;
}

/* =========================================
   3. COMPONENTES BASE REUTILIZÁVEIS
   ========================================= */

/* 3.1 Badge genérico — com brilho sutil */
.badge {
    background:    linear-gradient(135deg, var(--gold-pale), #fffaf0);
    color:         var(--gold);
    font-size:     0.62rem;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    padding:       4px 11px;
    border-radius: 20px;
    border:        1px solid var(--gold-border);
    white-space:   nowrap;
    box-shadow:    0 1px 4px rgba(139, 111, 61, 0.08);
    transition:    all 0.2s var(--ease);
}

.badge:hover {
    background:  linear-gradient(135deg, #f0e6d0, var(--gold-pale));
    box-shadow:  0 2px 8px rgba(139, 111, 61, 0.15);
    transform:   translateY(-1px);
}

/* 3.2 Botão primário */
.btn-primary {
    background:    linear-gradient(135deg, var(--gold) 0%, #a07840 100%);
    color:         var(--white);
    border:        none;
    padding:       12px 24px;
    border-radius: var(--radius-sm);
    font-weight:   600;
    font-size:     0.88rem;
    cursor:        pointer;
    width:         100%;
    display:       flex;
    align-items:   center;
    justify-content: center;
    gap:           8px;
    letter-spacing: 0.3px;
    transition:
        background  var(--duration) var(--ease),
        box-shadow  var(--duration) var(--ease),
        transform   0.2s           var(--ease);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.35);
    transform:  translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0);
}

/* =========================================
   4. GRID PRINCIPAL
   ========================================= */
.santos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap:        24px;
    padding:    32px 24px 60px;
    max-width:  1320px;
    margin:     0 auto;
}

/* =========================================
   5. CARD DO SANTO — MELHORIAS VISUAIS
   ========================================= */
.santo-card {
    background:    var(--white);
    border-radius: var(--radius);
    box-shadow:    var(--shadow);

    /* Borda com leve tom dourado */
    border:        1px solid rgba(139, 111, 61, 0.10);
    overflow:      hidden;
    display:       flex;
    flex-direction: column;
    cursor:        pointer;
    position:      relative;

    /* Animação de entrada */
    opacity:   0;
    transform: translateY(24px);
    transition:
        opacity      0.4s var(--ease),
        transform    0.4s var(--ease),
        box-shadow   0.35s var(--ease),
        border-color 0.35s var(--ease);
}

.santo-card.visible {
    opacity:   1;
    transform: translateY(0);
}

/* Hover com elevação + glow dourado */
.santo-card:hover {
    transform:    translateY(-8px);
    box-shadow:   var(--shadow-lg), var(--shadow-gold);
    border-color: rgba(139, 111, 61, 0.22);
}

/* Linha decorativa dourada no topo — aparece no hover */
.santo-card::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       0;
    right:      0;
    height:     2px;
    background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
    opacity:    0;
    transition: opacity 0.35s var(--ease);
    z-index:    var(--z-badge);
}

.santo-card:hover::before {
    opacity: 1;
}

/* Wrapper interno */
.santo-card .card-inner {
    display:        flex;
    flex-direction: column;
    flex:           1;
    position:       relative;
}

/* ── Imagem ── */
.santo-card .image-container {
    width:         calc(100% - 16px);
    height:        200px;
    margin:        8px 8px 0;
    border-radius: var(--radius-md);
    overflow:      hidden;
    background:    #e8e0d4;
    position:      relative;
    z-index:       var(--z-card-content);
    flex-shrink:   0;
}

/* Gradiente sobre a imagem para legibilidade */
.santo-card .image-container::after {
    content:  '';
    position: absolute;
    inset:    0;
    background: linear-gradient(
        to bottom,
        transparent 45%,
        rgba(15, 10, 5, 0.45) 100%
    );
    border-radius: inherit;
    z-index:  1;
    pointer-events: none;
}

.santo-card .image-container img {
    width:       100%;
    height:      100%;
    object-fit:  cover;
    display:     block;
    transition:  transform 0.6s var(--ease);
}

.santo-card:hover .image-container img {
    transform: scale(1.07);
}

/* ── Badges container ── */
.santo-badge-container {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             5px;
    padding:         14px 14px 0;
    position:        relative;
    z-index:         var(--z-card-content);
}

/* ── Conteúdo textual ── */
.santo-card-content {
    padding:    12px 20px 20px;
    text-align: center;
    flex-grow:  1;
    position:   relative;
    z-index:    var(--z-card-content);
}

.santo-card h3 {
    font-family: 'Libre Baskerville', serif;
    font-size:   1.15rem;
    color:       var(--text);
    margin:      10px 0 14px;
    line-height: 1.3;
    transition:  color 0.4s ease;
}

/* Nome muda para dourado no hover */
.santo-card:hover h3 {
    color: var(--gold);
}

/* ── Rodapé ── */
.card-footer {
    margin-top: 4px;
}

/* =========================================
   5.1 BARRA DE PROGRESSO DO CARD — NOVO
   ========================================= */

/* Wrapper da barra no card principal */
.card-progress-wrap {
    padding:    0 20px 16px;
    position:   relative;
    z-index:    var(--z-card-content);
}

.card-progress-bar {
    width:         100%;
    height:        3px;
    background:    var(--border-light);
    border-radius: 10px;
    overflow:      hidden;
    margin-bottom: 6px;
}

.card-progress-fill {
    height:     100%;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    border-radius: 10px;
    transition: width 1s var(--ease);
}

.card-progress-label {
    display:        flex;
    align-items:    center;
    justify-content: flex-end;
    gap:            5px;
    font-size:      0.68rem;
    color:          var(--text-muted);
    letter-spacing: 0.3px;
}

/* Quando concluído */
.card-progress-fill.concluido {
    background: linear-gradient(90deg, var(--success), #6dd5a8);
}

.card-progress-label.concluido {
    color: var(--success-dark);
}

/* =========================================
   6. PESQUISA
   ========================================= */
.santos-pesquisa {
    display:         flex;
    justify-content: center;
    padding:         20px 20px 8px;
}

.santos-pesquisa input {
    width:         100%;
    max-width:     520px;
    padding:       13px 22px;
    border-radius: var(--radius-full);
    border:        1.5px solid var(--gold-border);
    background:    var(--white);
    font-size:     0.92rem;
    color:         var(--text);
    outline:       none;
    box-shadow:    var(--shadow);
    font-family:   'Inter', sans-serif;
    transition:
        border-color var(--duration),
        box-shadow   var(--duration),
        transform    0.2s;
}

.santos-pesquisa input:focus {
    border-color: var(--gold);
    box-shadow:   0 4px 20px rgba(139, 111, 61, 0.14);
    transform:    translateY(-1px);
}

.santos-pesquisa input::placeholder {
    color: #bbb;
}

/* =========================================
   7. CHIPS DE CATEGORIA
   ========================================= */
.categorias-container {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             10px;
    padding:         18px 20px;
    background:      var(--white);
    border-bottom:   1px solid #ede8e0;
}

.chip {
    padding:       8px 18px;
    border-radius: var(--radius-full);
    border:        1.5px solid #e0d8cc;
    background:    var(--white);
    font-size:     0.82rem;
    font-weight:   500;
    cursor:        pointer;
    color:         var(--text-muted);
    display:       flex;
    align-items:   center;
    gap:           7px;
    transition:    all 0.25s var(--ease);
}

.chip:hover {
    border-color: var(--gold);
    color:        var(--gold);
    transform:    translateY(-1px);
    box-shadow:   0 4px 12px rgba(139, 111, 61, 0.12);
}

.chip.active {
    background:   linear-gradient(135deg, var(--gold) 0%, #a07840 100%);
    color:        var(--white);
    border-color: var(--gold);
    box-shadow:   0 4px 14px rgba(139, 111, 61, 0.30);
}

.chip-count {
    font-size:     0.7rem;
    opacity:       0.75;
    background:    rgba(0,0,0,0.08);
    padding:       1px 7px;
    border-radius: 10px;
}

.chip.active .chip-count {
    background: rgba(255,255,255,0.22);
    opacity:    1;
}

/* =========================================
   8. SEÇÃO DE HISTÓRICO
   ========================================= */
.historico-section {
    padding:    24px 24px 8px;
    max-width:  1320px;
    margin:     0 auto;
    width:      100%;
    box-sizing: border-box;
}

.historico-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   16px;
    padding:         0 2px;
}

/* Título com ornamento lateral */
.historico-titulo {
    font-family:    'Libre Baskerville', serif;
    font-size:      1.05rem;
    color:          var(--text);
    margin:         0;
    letter-spacing: 0.2px;
    display:        flex;
    align-items:    center;
    gap:            10px;
}

.historico-titulo::before {
    content:    '';
    display:    inline-block;
    width:      24px;
    height:     1px;
    background: var(--gold);
}

.historico-limpar {
    background:    none;
    border:        1px solid #e0d8cc;
    font-size:     0.75rem;
    color:         var(--text-muted);
    cursor:        pointer;
    padding:       5px 14px;
    border-radius: 20px;
    font-family:   'Inter', sans-serif;
    transition:    all 0.2s ease;
}

.historico-limpar:hover {
    background:   var(--border-pale);
    color:        var(--text);
    border-color: var(--gold-border);
}

/* Scroll horizontal */
.historico-scroll {
    display:        flex;
    gap:            18px;
    overflow-x:     auto;
    padding:        6px 2px 18px;
    scrollbar-width: thin;
    scrollbar-color: rgba(139,111,61,0.25) transparent;
}

.historico-scroll::-webkit-scrollbar       { height: 3px; }
.historico-scroll::-webkit-scrollbar-thumb {
    background:    rgba(139,111,61,0.25);
    border-radius: 10px;
}

/* =========================================
   8.1 CARD DO HISTÓRICO — MELHORADO
   ========================================= */
.hist-card {
    flex-shrink:   0;
    width:         220px;
    background:    var(--white);
    border-radius: var(--radius);
    box-shadow:    var(--shadow);
    border:        1px solid rgba(139, 111, 61, 0.10);
    overflow:      hidden;
    position:      relative;
    cursor:        pointer;
    transition:
        transform    var(--duration) var(--ease-spring),
        box-shadow   var(--duration) var(--ease),
        border-color var(--duration) var(--ease);
}

.hist-card:hover {
    transform:    translateY(-6px);
    box-shadow:   var(--shadow-lg), var(--shadow-gold);
    border-color: rgba(139, 111, 61, 0.22);
}

/* Linha dourada no topo no hover */
.hist-card::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       0;
    right:      0;
    height:     2px;
    background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
    opacity:    0;
    transition: opacity 0.3s var(--ease);
    z-index:    var(--z-badge);
}

.hist-card:hover::before {
    opacity: 1;
}

/* Borda sutil quando concluído */
.hist-card.lido {
    border-color: rgba(76, 175, 130, 0.30);
}

/* Barra de progresso */
.hist-progresso-barra {
    position:      absolute;
    bottom:        0;
    left:          0;
    width:         100%;
    height:        3px;
    background:    var(--border-light);
    z-index:       var(--z-badge);
    overflow:      hidden;
}

.hist-progresso-barra-fill {
    height:     100%;
    width:       0%;
    background:  linear-gradient(90deg, var(--gold), var(--gold-light));
    border-radius: inherit;
    transition:  width 1.3s var(--ease);
}

.hist-card.lido .hist-progresso-barra-fill {
    width:      100%;
    background: linear-gradient(90deg, var(--success), #6dd5a8);
}

.hist-progresso-fill-bg {
    display: none !important;
}

/* Imagem */
.hist-img-wrap {
    position:      relative;
    margin:        8px;
    width:         calc(100% - 16px);
    height:        160px;
    border-radius: var(--radius-md);
    overflow:      hidden;
    background:    #e8e0d4;
    z-index:       var(--z-card-content);
}

/* Gradiente sobre a imagem do histórico */
.hist-img-wrap::after {
    content:  '';
    position: absolute;
    inset:    0;
    background: linear-gradient(
        to bottom,
        transparent 40%,
        rgba(15, 10, 5, 0.40) 100%
    );
    border-radius: inherit;
    z-index:  1;
    pointer-events: none;
}

.hist-img-wrap img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform var(--duration-lg) var(--ease);
}

.hist-card:hover .hist-img-wrap img {
    transform: scale(1.06);
}

/* Badge LIDO — reposicionado sobre o gradiente */
.hist-badge-lido {
    display:        none;
    position:       absolute;
    top:            8px;
    right:          8px;
    background:     var(--success);
    color:          var(--white);
    font-size:      0.58rem;
    font-weight:    700;
    padding:        3px 9px;
    border-radius:  20px;
    z-index:        var(--z-badge);
    letter-spacing: 0.7px;
    text-transform: uppercase;
    box-shadow:     0 2px 8px rgba(76, 175, 130, 0.40);
}

.hist-card.lido .hist-badge-lido {
    display: block;
}

/* Informações */
.hist-info {
    padding:    10px 14px 20px;
    text-align: center;
    position:   relative;
    z-index:    var(--z-card-content);
}

.hist-nome {
    font-family: 'Libre Baskerville', serif;
    font-size:   0.88rem;
    font-weight: 700;
    color:       var(--text);
    margin:      0 0 4px;
    line-height: 1.3;
    transition:  color 0.3s ease;
}

.hist-card:hover .hist-nome {
    color: var(--gold);
}

/* Divisor ornamental entre nome e porcentagem */
.hist-info::before {
    content:    '';
    display:    block;
    width:      28px;
    height:     1px;
    background: var(--gold-border);
    margin:     0 auto 6px;
}

.hist-pct {
    font-size:      0.7rem;
    color:          var(--text-muted);
    margin:         0;
    letter-spacing: 0.3px;
    display:        flex;
    align-items:    center;
    justify-content: center;
    gap:            4px;
}

/* =========================================
   9. MODAL — FULLSCREEN PREMIUM
   ========================================= */
.modal-blur {
    position:          fixed;
    inset:             0;
    background:        rgba(10, 8, 5, 0.92);
    backdrop-filter:   blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display:           none;
    justify-content:   center;
    align-items:       center;
    z-index:           var(--z-modal);
}

.modal-blur.active {
    display: flex;
}

.modal-content {
    position:       fixed;
    inset:          0;
    background:     var(--bg-warm);
    color:          var(--text);
    overflow-y:     auto;
    display:        flex;
    flex-direction: column;
    z-index:        var(--z-modal-content);
    scroll-behavior: smooth;
}

.modal-blur.active .modal-content {
    animation: fadeUp 0.35s var(--ease) both;
}

/* Header com imagem */
.modal-header-img {
    width:           100%;
    min-height:      36vh;
    background-size: cover;
    background-position: center top;
    position:        relative;
    flex-shrink:     0;
    display:         flex;
    align-items:     flex-end;
    justify-content: center;
    padding:         0 20px 40px;
}

.modal-header-img::before {
    content:  '';
    position: absolute;
    inset:    0;
    background: linear-gradient(
        to bottom,
        rgba(253,251,248,0)    0%,
        rgba(253,251,248,0.15) 50%,
        rgba(253,251,248,0.85) 80%,
        rgba(253,251,248,1)    100%
    );
    z-index: 1;
}

/* Linha dourada — mais elegante */
.modal-header-img::after {
    content:   '';
    position:  absolute;
    bottom:    0;
    left:      50%;
    transform: translateX(-50%);
    width:     80px;
    height:    1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    z-index:   3;
}

#modalTitle {
    font-family:    'Libre Baskerville', serif;
    font-size:      clamp(1.6rem, 4vw, 2.8rem);
    color:          var(--text);
    text-align:     center;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height:    1.2;
    margin:         0;
    position:       relative;
    z-index:        2;
}

/* Corpo do modal */
.modal-body-padding {
    padding:   36px 24px 80px;
    max-width: 780px;
    margin:    0 auto;
    width:     100%;
}

/* Badge de vocação */
.vocation-badge {
    display:        block;
    text-align:     center;
    color:          var(--gold);
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-size:      0.75rem;
    margin-bottom:  36px;
    font-family:    'Inter', sans-serif;
}

/* Contêiner da biografia */
.biografia-container {
    font-family: 'Georgia', serif;
    line-height: 1.9;
    color:       #2a2520;
    font-size:   1rem;
}

/* Botão fechar — spring animation */
.close-modal {
    position:      fixed;
    top:           24px;
    right:         24px;
    width:         44px;
    height:        44px;
    border-radius: 50%;
    background:    var(--white);
    color:         var(--gold);
    border:        1.5px solid var(--gold-border);
    font-size:     22px;
    cursor:        pointer;
    box-shadow:    var(--shadow-md);
    z-index:       var(--z-modal-controls);
    display:       flex;
    align-items:   center;
    justify-content: center;
    line-height:   1;
    transition:    all var(--duration) var(--ease-spring);
}

.close-modal:hover {
    transform:    rotate(90deg) scale(1.08);
    background:   var(--gold);
    color:        var(--white);
    border-color: var(--gold);
    box-shadow:   var(--shadow-gold);
}

/* Botão toggle de marcação */
.toggle-highlight {
    position:      fixed;
    top:           24px;
    right:         78px;
    background:    var(--white);
    border:        1.5px solid var(--gold-border);
    color:         var(--gold);
    font-size:     16px;
    cursor:        pointer;
    border-radius: var(--radius-sm);
    padding:       8px 13px;
    z-index:       var(--z-modal-top);
    box-shadow:    var(--shadow-md);
    line-height:   1;
    transition:    all var(--duration) var(--ease);
}

.toggle-highlight:hover {
    background:   var(--gold-pale);
    border-color: var(--gold);
    box-shadow:   var(--shadow-gold);
}

/* Botão Marcar como finalizado */
.btn-finalizado {
    display:        block;
    margin:         40px auto 0;
    padding:        13px 36px;
    background:     var(--white);
    color:          var(--success-dark);
    border:         1.5px solid var(--success);
    border-radius:  var(--radius-sm);
    font-weight:    600;
    font-size:      0.9rem;
    cursor:         pointer;
    letter-spacing: 0.3px;
    font-family:    'Inter', sans-serif;
    transition:     all var(--duration) var(--ease);
}

.btn-finalizado:hover {
    background:  var(--success);
    color:       var(--white);
    box-shadow:  0 6px 20px var(--success-glow);
    transform:   translateY(-1px);
}

.btn-finalizado.ativo {
    background:   var(--success);
    color:        var(--white);
    border-color: var(--success);
}

/* =========================================
   10. MARCAÇÃO DE LINHAS
   ========================================= */
.modo-marcacao .linha {
    cursor:        pointer;
    border-radius: 4px;
    padding:       1px 4px;
    margin:        0 -4px;
    transition:    background 0.2s ease;
}

.modo-marcacao .linha:hover {
    background: rgba(212, 175, 55, 0.12);
}

.linha-marcada {
    background:    rgba(212, 175, 55, 0.15) !important;
    border-radius: 4px;
    position:      relative;
    padding-left:  12px !important;
}

.linha-marcada::before {
    content:       '';
    position:      absolute;
    left:          0;
    top:           4px;
    bottom:        4px;
    width:         2px;
    background:    var(--gold);
    border-radius: 2px;
}

/* =========================================
   11. CONTEÚDO DE BIOGRAFIA (sl-wrap)
   ========================================= */
.sl-wrap {
    font-family: 'Georgia', serif;
    color:       var(--text-dark);
    max-width:   720px;
    margin:      0 auto;
    padding:     8px 4px 60px;
}

.sl-intro {
    text-align:    center;
    padding:       32px 24px 40px;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 48px;
}

.sl-intro p {
    font-size:  15px;
    color:      #666;
    font-style: italic;
    line-height: 1.7;
    max-width:  480px;
    margin:     0 auto;
}

/* Navegação por abas */
.sl-nav {
    display:         flex;
    justify-content: center;
    margin-bottom:   48px;
    border-bottom:   1px solid var(--border-light);
}

.sl-nav-btn {
    background:     none;
    border:         none;
    border-bottom:  2px solid transparent;
    margin-bottom:  -1px;
    cursor:         pointer;
    font-family:    'Georgia', serif;
    font-size:      10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color:          #aaa;
    padding:        14px 28px;
    transition:     color var(--duration) ease;
}

.sl-nav-btn:hover { color: var(--gold); }

.sl-nav-btn.ativo {
    color:         var(--gold);
    border-bottom: 2px solid var(--gold);
}

.sl-painel        { display: none; }
.sl-painel.ativo  { display: block; }

/* Seção */
.sl-secao {
    margin-bottom: 56px;
}

.sl-secao-header {
    display:       flex;
    align-items:   center;
    gap:           14px;
    margin-bottom: 32px;
}

.sl-secao-num,
.sl-secao-titulo {
    font-size:      10px;
    letter-spacing: 3px;
    color:          var(--gold);
    text-transform: uppercase;
    white-space:    nowrap;
    padding-top:    2px;
}

.sl-secao-linha {
    flex:       1;
    height:     1px;
    background: var(--border-light);
}

/* Bloco de conteúdo */
.sl-bloco {
    margin-bottom:  40px;
    padding-bottom: 40px;
    border-bottom:  1px solid var(--border-pale);
}

.sl-bloco:last-child {
    border-bottom:  none;
    padding-bottom: 0;
}

.sl-bloco h3 {
    font-size:      17px;
    font-weight:    normal;
    color:          var(--text-dark);
    margin:         0 0 14px;
    letter-spacing: 0.2px;
    line-height:    1.4;
}

.sl-bloco p {
    font-size:   15px;
    color:       var(--text-body);
    line-height: 1.85;
    margin:      0 0 10px;
    text-align:  left;
}

.sl-bloco p:last-child { margin-bottom: 0; }

/* Letra capitular */
.sl-capitular {
    font-size:   3.2em;
    font-weight: bold;
    color:       var(--gold);
    float:       left;
    line-height: 0.8;
    margin:      6px 10px 0 0;
    font-family: 'Georgia', serif;
}

/* Citação */
.sl-citacao {
    margin:        32px 0;
    padding:       24px 32px;
    border-left:   2px solid var(--gold);
    background:    linear-gradient(135deg, var(--bg-card) 0%, #f8f4ee 100%);
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    position:      relative;
}

.sl-citacao::before {
    content:     '\201C';
    font-size:   5em;
    color:       var(--gold);
    position:    absolute;
    top:         -8px;
    left:        12px;
    opacity:     0.12;
    font-family: Georgia, serif;
    line-height: 1;
}

.sl-citacao p {
    font-size:   15px;
    font-style:  italic;
    color:       #444;
    line-height: 1.75;
    margin:      0 0 8px;
}

.sl-citacao .sl-fonte {
    font-size:      11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color:          var(--gold);
    font-style:     normal;
}

/* Destaque */
.sl-destaque {
    background:    linear-gradient(120deg, var(--bg-card) 0%, #f5efe3 100%);
    padding:       24px 32px;
    border-left:   3px solid var(--gold-light);
    margin:        32px 0;
    font-style:    italic;
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    font-size:     15px;
    color:         #444;
    line-height:   1.85;
}

/* Card de milagre */
.sl-milagre-card {
    background:    var(--bg-card);
    border:        1px solid var(--border-light);
    border-left:   3px solid var(--gold);
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    padding:       24px 28px;
    margin-bottom: 24px;
    position:      relative;
    transition:    box-shadow 0.25s ease;
}

.sl-milagre-card:hover {
    box-shadow: 0 4px 20px rgba(139, 111, 61, 0.10);
}

.sl-milagre-card::after {
    content:    '✦';
    position:   absolute;
    top:        -13px;
    right:      20px;
    background: var(--bg-card);
    padding:    0 8px;
    color:      var(--gold-light);
    font-size:  1.1em;
}

.sl-milagre-card h3 {
    font-size:      15px;
    font-weight:    normal;
    color:          var(--text-dark);
    margin:         0 0 10px;
    letter-spacing: 0.2px;
    font-family:    'Georgia', serif;
}

.sl-milagre-card p {
    font-size:   14px;
    color:       #555;
    line-height: 1.8;
    margin:      0;
    text-align:  left;
}

.sl-milagre-num {
    display:        block;
    font-size:      9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color:          var(--gold);
    margin-bottom:  8px;
}

/* Seção escura */
.sl-secao-escura {
    background:    linear-gradient(135deg, #1a1a1a 0%, #2c241b 100%);
    color:         #f5f0e8;
    padding:       40px;
    border-radius: var(--radius-sm);
    margin:        40px 0;
    box-shadow:    0 6px 20px rgba(0,0,0,0.3);
}

.sl-secao-escura .sl-secao-titulo,
.sl-secao-escura .sl-secao-num  { color: var(--gold-light); }
.sl-secao-escura .sl-secao-linha { background: rgba(212,175,55,0.3); }
.sl-secao-escura .sl-bloco h3   { color: #f5f0e8; }
.sl-secao-escura .sl-bloco p    { color: #e8dfd0; }
.sl-secao-escura .sl-bloco      { border-bottom-color: rgba(255,255,255,0.07); }

/* Grid de informações */
.sl-info-grid {
    display:        grid;
    grid-template-columns: 1fr 1fr;
    gap:            1px;
    background:     var(--border-light);
    border:         1px solid var(--border-light);
    border-radius:  6px;
    overflow:       hidden;
    margin-bottom:  40px;
}

.sl-info-item {
    background: var(--bg-card);
    padding:    18px 20px;
    transition: background 0.2s ease;
}

.sl-info-item:hover {
    background: #f0ead8;
}

.sl-info-label {
    display:        block;
    font-size:      9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color:          var(--gold);
    margin-bottom:  6px;
}

.sl-info-valor {
    font-size:   14px;
    color:       var(--text-dark);
    line-height: 1.5;
}

/* Box de lista */
.sl-box {
    background:    var(--white);
    border:        1px solid var(--border-light);
    border-top:    3px solid var(--gold);
    border-radius: 0 0 var(--radius-xs) var(--radius-xs);
    padding:       28px 32px;
    margin:        32px 0;
}

.sl-box h3 {
    font-size:      11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color:          var(--gold);
    margin:         0 0 20px;
    text-align:     center;
}

.sl-lista {
    list-style: none;
    padding:    0;
    margin:     0;
}

.sl-lista li {
    padding:       11px 0 11px 28px;
    position:      relative;
    border-bottom: 1px solid var(--border-pale);
    font-size:     14px;
    color:         var(--text-body);
    line-height:   1.6;
    transition:    padding-left 0.2s ease, color 0.2s ease;
}

.sl-lista li:hover {
    padding-left: 32px;
    color:        var(--text-dark);
}

.sl-lista li:last-child { border-bottom: none; }

.sl-lista li::before {
    content:  '❧';
    position: absolute;
    left:     0;
    color:    var(--gold);
    font-size: 1em;
}

/* Linha do tempo */
.sl-timeline {
    border-left:  2px solid var(--border-light);
    padding-left: 24px;
    margin:       32px 0;
}

.sl-timeline-item {
    position:      relative;
    margin-bottom: 20px;
    font-size:     14px;
    color:         var(--text-body);
    line-height:   1.7;
}

.sl-timeline-item::before {
    content:       '';
    position:      absolute;
    left:          -30px;
    top:           6px;
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    var(--gold);
    box-shadow:    0 0 0 3px rgba(139, 111, 61, 0.15);
    transition:    box-shadow 0.2s ease;
}

.sl-timeline-item:hover::before {
    box-shadow: 0 0 0 5px rgba(139, 111, 61, 0.20);
}

.sl-timeline-item strong {
    display:        block;
    font-size:      10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color:          var(--gold);
    margin-bottom:  4px;
}

/* Nota de rodapé */
.sl-nota {
    font-size:   12px;
    color:       var(--text-light);
    font-style:  italic;
    margin-top:  6px;
    line-height: 1.6;
}

/* Separador ornamental */
.sl-sep {
    text-align:     center;
    margin:         48px 0;
    color:          var(--gold-light);
    font-size:      14px;
    letter-spacing: 8px;
}

/* Tag inline */
.sl-tag {
    display:        inline-block;
    font-size:      9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color:          var(--gold);
    border:         1px solid var(--gold-light);
    padding:        3px 10px;
    border-radius:  2px;
    margin-bottom:  12px;
}

/* Bloco de oração */
.sl-oracao {
    background:    linear-gradient(135deg, var(--bg-card) 0%, #f5efe3 100%);
    border:        1px solid var(--border-light);
    border-radius: var(--radius-xs);
    padding:       36px 40px;
    margin:        40px 0;
    text-align:    center;
    font-style:    italic;
    font-size:     15px;
    color:         #444;
    line-height:   2.1;
}

.sl-oracao .sl-oracao-titulo {
    display:        block;
    font-style:     normal;
    font-size:      10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color:          var(--gold);
    margin-bottom:  24px;
}

/* =========================================
   12. ANIMAÇÕES
   ========================================= */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0);    }
}

@keyframes waveSlide {
    from { transform: translateX(0);    }
    to   { transform: translateX(-50%); }
}

@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

/* =========================================
   13. RESPONSIVO — TABLET (≤ 768px)
   ========================================= */
@media (max-width: 768px) {

    .santos-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap:     14px;
        padding: 20px 14px 40px;
    }

    .santo-card .image-container { height: 150px; }
    .santo-card h3               { font-size: 0.95rem; }
    .btn-primary                 { font-size: 0.8rem; padding: 10px 16px; }

    .hist-card     { width: 180px; }
    .hist-img-wrap { height: 130px; }

    .modal-header-img   { min-height: 28vh; }
    .modal-body-padding { padding: 28px 18px 60px; }
    .close-modal        { top: 16px; right: 16px; }
    .toggle-highlight   { top: 16px; right: 68px; }

    .sl-secao-escura  { padding: 28px 20px; }
    .sl-oracao        { padding: 24px 20px; }
    .sl-capitular     { font-size: 2.5em; }
    .sl-nav-btn       { padding: 12px 14px; letter-spacing: 2px; font-size: 9px; }
    .sl-bloco h3      { font-size: 15px; }
    .sl-bloco p       { font-size: 14px; }
    .sl-citacao p     { font-size: 14px; }
    .sl-info-grid     { grid-template-columns: 1fr; }
}

/* =========================================
   14. RESPONSIVO — MOBILE (≤ 480px)
   ========================================= */
@media (max-width: 480px) {

    .santos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap:     12px;
        padding: 16px 12px 40px;
    }

    #modalTitle { font-size: 1.4rem; letter-spacing: 1px; }

    .categorias-container { gap: 7px; padding: 14px; }
    .chip                 { font-size: 0.76rem; padding: 7px 13px; }
}

/* =========================================
   FIM DO ARQUIVO — santos.css
   ========================================= */