/* ESTILOS GERAIS E VARIÁVEIS */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    background-color: #fffcf9;
    color: #333;
    line-height: 1.6;
}

/* Quebra de linha que só aparece no celular, em pontos específicos de
   alguns textos (o navegador já quebra sozinho no computador, então essa
   quebra manual fica desligada lá pra não forçar um ponto diferente). */
.quebra-mobile {
    display: none;
}

/* BARRA SUPERIOR */
/* No computador, a barra vira uma grade de 3 colunas (redes sociais |
   ícone | menu). A coluna do meio tem largura fixa (o tamanho do
   ícone) e as duas de fora dividem o espaço restante em partes iguais
   (1fr cada) - isso garante que o ícone fique exatamente centralizado
   na barra, mesmo o menu tendo bem mais itens/texto que as redes
   sociais do outro lado. */
.top-bar {
    position: relative; /* usado no celular, pra centralizar as redes sociais sem depender da largura do ícone/botão de menu */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 12px 24px;
    background-color: #f2ede4;
    color: #444;
}

.topbar-logo {
    grid-column: 2;
    justify-self: center;
    display: flex;
    align-items: center;
}

.topbar-logo img {
    display: block;
    width: 32px;
    height: 32px;
}

.social-links {
    grid-column: 1;
    justify-self: start;
    display: flex;
    gap: 15px;
}

.social-links a {
    color: #444;
    font-size: 18px;
    transition: color 0.3s;
}

.social-links a:hover {
    color: #800020;
}

.top-bar-right {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
}

/* MENU PADRÃO (DESKTOP) */
.main-menu {
    grid-column: 3;
    justify-self: end;
    display: flex;
    margin-right: 30px;
}

.main-menu ul {
    display: flex;
    align-items: center;
    gap: 26px;
    list-style: none;
}

.main-menu ul li a {
    text-decoration: none;
    color: #444;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: color 0.3s;
}

.main-menu ul li a:hover {
    color: #800020;
}

/* BOTÃO HAMBÚRGUER (só aparece no mobile) */
.menu-toggle-btn {
    display: none;
    background: none;
    border: none;
    font-size: 20px;
    color: #444;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    transition: color 0.3s, background-color 0.3s;
}

.menu-toggle-btn:hover {
    color: #800020;
    background-color: #e5dfd3;
}

/* MENU LATERAL (DRAWER) */
.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.drawer-overlay.open {
    opacity: 1;
    visibility: visible;
}

.side-drawer {
    position: fixed;
    top: 0;
    right: -320px;
    width: 300px;
    height: 100%;
    background-color: #fff;
    box-shadow: -5px 0 25px rgba(0,0,0,0.15);
    z-index: 9999;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.side-drawer.open {
    right: 0;
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #f2ede4;
    border-bottom: 1px solid #e0dad0;
}

.drawer-header h3 {
    font-size: 18px;
    color: #1a1a1a;
    font-weight: 700;
}

.drawer-close-btn {
    background: none;
    border: none;
    font-size: 26px;
    cursor: pointer;
    color: #444;
    line-height: 1;
    padding: 0 5px;
    transition: color 0.2s;
}

.drawer-close-btn:hover {
    color: #800020;
}

.drawer-links {
    list-style: none;
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.drawer-links li a {
    text-decoration: none;
    color: #333;
    font-size: 15px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid #f4f1eb;
    transition: background-color 0.2s, color 0.2s;
}

.drawer-links li a:hover {
    background-color: #faf7f2;
    color: #800020;
}

.drawer-links li a i {
    color: #800020;
    width: 22px;
    text-align: center;
    font-size: 16px;
}

/* CONTAINER PRINCIPAL */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* CABEÇALHO */
.main-header {
    text-align: center;
    margin-bottom: 30px;
}

.main-header h1 {
    font-size: 38px;
    color: #1a1a1a;
    font-weight: 700;
}

/* Título "EscritosSantos" da home: marrom (madeira da cruz) + bordô
   (sangue), só aqui - os títulos das outras páginas (Sobre Nós, Contato
   etc.) continuam pretos, já que essa simbologia é só da marca.
   Seletor mais específico que ".main-header h1" de propósito, pra
   garantir que vença a regra genérica preta. */
.main-header h1.titulo-marca {
    color: #4A2C17;
}

.main-header h1 span {
    color: #1a1a1a;
}

/* O título vira um link para a home (só existe na própria home, mas
   assim fica preparado e consistente); sem isso, o navegador pintaria
   o texto de azul sublinhado por padrão. */
.main-header h1 a {
    color: inherit;
    text-decoration: none;
}

/* "Santos" do título da home, em bordô (sangue) - só aqui, os títulos
   das outras páginas (Sobre Nós, Contato etc.) ficam pretos por
   inteiro, sem a cor da marca. */
.main-header h1.titulo-marca span {
    color: #800020;
}

.main-header p {
    font-size: 16px;
    color: #666;
    margin-top: 5px;
}

/* PESQUISA */
.search-container {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
}

.search-input-wrapper {
    position: relative;
    width: 100%;
    max-width: 600px;
    display: flex;
    align-items: center;
}

.search-input-wrapper i.fa-search {
    position: absolute;
    left: 18px;
    color: #888;
    font-size: 16px;
    pointer-events: none;
}

.search-input {
    width: 100%;
    padding: 14px 20px 14px 48px;
    font-size: 16px;
    border: 2px solid #e1e1e1;
    border-radius: 8px;
    outline: none;
    transition: border-color 0.3s;
    background-color: #fff;
}

.search-input:focus {
    border-color: #800020;
}

/* BARRA DE INFORMAÇÕES */
.info-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    font-size: 14px;
    color: #555;
    flex-wrap: wrap;
    gap: 10px;
}

.link-uso-comercial {
    color: #1e88e5;
    text-decoration: underline;
    font-weight: 600;
    margin-left: 5px;
}

/* GRID DE CARDS */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 40px;
}

.card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.04);
    border: 1px solid #eae5df;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.card-img-wrapper {
    position: relative;
    width: 100%;
    background-color: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.card-img-wrapper img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
}

/* FAIXA SOBREPOSTA NA BASE DA IMAGEM/VÍDEO - hoje só usada em videos.php
   (botão Compartilhar sobre o iframe do YouTube); os cards de citação não
   usam mais isso, os botões deles ficam fora da imagem, no rodapé. */
.card-img-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 24px 14px 14px;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0) 100%);
}

/* CONTAINER DO VÍDEO INCORPORADO DO YOUTUBE (proporção 16:9) */
.card-video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #000;
    overflow: hidden;
}

.card-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.card-footer {
    padding: 24px;
    padding-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: #fff;
}

.card-sem-imagem {
    color: #888;
    font-size: 13px;
    text-align: center;
    padding: 20px;
}

/* BOTÃO "SOBRE ESTA CITAÇÃO" (abre pop-up com obra + link da fonte) E LINK
   "VER MAIS FRASES DO AUTOR" - os dois no mesmo estilo de "pilulazinha"
   (igual ao já usado em .video-relacionados-link), pra terem mais destaque
   que um texto solto, mas ainda menores/mais leves que os botões principais
   de Baixar/Compartilhar. align-self:flex-start evita que a pílula estique
   a largura toda do rodapé do card, já que ele é flex em coluna. */
.card-info-trigger,
.card-link-mais-autor {
    background-color: #faf3f0;
    border: 1px solid #eadcd8;
    padding: 6px 14px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    color: #800020;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    font-family: inherit;
    transition: background-color 0.2s, border-color 0.2s;
}

.card-info-trigger:hover,
.card-link-mais-autor:hover {
    background-color: #f4e6e0;
    border-color: #dfc9c2;
}

.card-info-trigger i,
.card-link-mais-autor i {
    font-size: 13px;
}

/* TÍTULO E LINKS SECUNDÁRIOS DO CARD DE VÍDEO */
.video-titulo {
    font-size: 16px;
    color: #1a1a1a;
    font-weight: 600;
    line-height: 1.4;
}

.card-video-links-secundarios {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
}

/* "VEJA TAMBÉM" - vídeos relacionados, embaixo dos links de cada vídeo */
.video-relacionados {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed #e0dad0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.video-relacionados-titulo {
    font-size: 12px;
    color: #888;
    font-weight: 600;
    margin-right: 2px;
}

.video-relacionados-link {
    font-size: 12px;
    color: #800020;
    background-color: #faf3f0;
    border: 1px solid #eadcd8;
    padding: 4px 12px;
    border-radius: 12px;
    text-decoration: none;
    transition: background-color 0.2s;
}

.video-relacionados-link:hover {
    background-color: #f4e6e0;
}

/* "OUTROS AUTORES" / "OUTROS TEMAS" - faixa de descoberta no topo das
   páginas de autor.php e tema.php, mesma linguagem visual dos chips
   usados em "Veja também" e nos links de destaque do card. */
.outros-autores {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 25px;
}

.outros-autores-titulo {
    font-size: 13px;
    color: #777;
    font-weight: 600;
    margin-right: 2px;
}

.outros-autores-link {
    font-size: 13px;
    color: #800020;
    background-color: #faf3f0;
    border: 1px solid #eadcd8;
    padding: 6px 14px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.2s, border-color 0.2s;
}

.outros-autores-link:hover {
    background-color: #f4e6e0;
    border-color: #dfc9c2;
}

/* CAIXINHA DE LINKS EXTERNOS */
.card-external-links {
    border: 1px solid #ece6dc;
    background-color: #faf7f2;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

.external-link-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    border: 1px solid #e0dad0;
    padding: 10px 14px;
    border-radius: 6px;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.external-link-btn:hover {
    background-color: #f4efe6;
    border-color: #d8d0c4;
}

/* LINKS EXTERNOS DOS CARDS (Amazon / YouTube) */
.card-link-externo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #ffffff;
    border: 1.5px solid #dcd6ce;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

.card-link-externo span i:first-child {
    margin-right: 8px;
}

.card-link-icone-amazon {
    color: #800020;
}

.card-link-icone-youtube {
    color: #ff0000;
}

.card-link-seta {
    color: #666;
    font-size: 13px;
}

/* SELO "PUBLI" - identificação exigida pelo Programa de Associados da
   Amazon perto de cada link de afiliado. Só aparece quando o link de
   "Fonte/Bibliografia" for mesmo da Amazon (ver card_frase.php) - por
   isso não tem nenhuma regra ligada ao "card-link-desativado" ou a
   outros tipos de link. */
.selo-publi-inline {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #6b5637;
    background-color: #f4efe6;
    border: 1px solid #e6ddd0;
    border-radius: 4px;
    padding: 1px 6px;
    margin-left: 8px;
    vertical-align: middle;
}

.card-link-desativado {
    opacity: 0.4;
    background: #f4f1eb;
    border: 1.5px solid #e6e1da;
    cursor: not-allowed;
}

.card-link-desativado .card-link-icone-amazon,
.card-link-desativado .card-link-icone-youtube {
    color: #999;
}

.card-link-desativado .card-link-seta {
    color: #bbb;
}

/* BOTÕES DE AÇÃO */
.action-buttons {
    display: flex;
    gap: 8px;
}

.btn {
    flex: 1;
    padding: 10px 8px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: opacity 0.2s;
}

.btn:hover {
    opacity: 0.9;
}

.btn-download {
    background-color: #800020;
    color: #fff;
}

.btn-compartilhar {
    background-color: #157347;
    color: #fff;
}

/* RODAPÉ */
.site-footer {
    background-color: #f4efe6;
    padding: 50px 20px 30px;
    text-align: center;
    border-top: 1px solid #e8e2d5;
    margin-top: 60px;
}

.footer-logo {
    display: inline-block;
    font-size: 24px;
    font-weight: 700;
    color: #4A2C17;
    text-decoration: none;
    margin-bottom: 12px;
}

.footer-logo span {
    color: #800020;
}

.site-footer p {
    max-width: 700px;
    margin: 0 auto 25px;
    font-size: 15px;
    color: #555;
    line-height: 1.6;
}

/* Aviso de associada Amazon: mesmo tom discreto que o site já usa pra
   "letra miúda" no rodapé (o mesmo cinza do copyright), em itálico, pra
   ficar claramente informativo sem chamar atenção nem competir
   visualmente com o resto do rodapé. */
/* Seletores compostos (2 classes) de propósito: o rodapé tem uma regra
   geral pro mobile que pinta QUALQUER link dentro do rodapé de azul
   (".site-footer a { color: #1e88e5 !important }"), e como as duas regras
   usam "!important", só uma seletor mais específico consegue vencer -
   por isso ".footer-copy-mobile .footer-aviso-afiliado" em vez de só
   ".footer-aviso-afiliado" sozinho. */
.footer-aviso-afiliado,
.footer-bottom .footer-aviso-afiliado,
.footer-copy-mobile .footer-aviso-afiliado {
    font-size: 13px !important;
    color: #a3927a !important;
    font-style: italic;
    text-decoration: none;
}

.footer-aviso-afiliado:hover {
    text-decoration: underline;
}

/* LINKS INSTITUCIONAIS NO RODAPÉ (DESKTOP) */
.footer-institutional-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 25px;
}

.footer-institutional-links a,
.footer-institutional-links a:visited {
    color: #0d47a1 !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 400 !important;
    transition: opacity 0.2s;
}

.footer-institutional-links a:hover,
.footer-institutional-links a:active {
    text-decoration: none !important; 
    opacity: 0.7;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    padding-top: 20px;
    border-top: 1px solid #e0dad0;
    font-size: 13px;
    color: #666;
}

.footer-copy {
    display: inline-block;
}

.footer-email {
    display: inline-block;
}

.footer-email a,
.footer-email a:visited {
    color: #0d47a1 !important;
    text-decoration: none !important;
    font-weight: 400 !important;
    transition: opacity 0.2s;
}

.footer-email a:hover,
.footer-email a:active {
    text-decoration: none !important;
    opacity: 0.7;
}

/* BLOCOS MOBILE */
.footer-social-mobile,
.footer-institutional-mobile,
.footer-copy-mobile {
    display: none;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed #d8d0c4;
}

.footer-social-mobile p,
.footer-institutional-mobile p {
    font-size: 14px;
    color: #444;
    margin-bottom: 12px;
}

.footer-copy-mobile {
    font-size: 13px;
    color: #666;
    text-align: center;
}

.footer-copy-mobile a {
    display: inline-block;
    margin-top: 6px;
    font-size: 14px;
}

.social-links-mobile {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.social-links-mobile a {
    color: #333;
    font-size: 20px;
}

/* PÁGINAS DE TEXTO (Sobre, Contato, Políticas, Termos, Cookies) */
.container-estreito {
    max-width: 800px;
}

.header-espacado {
    margin-bottom: 40px;
}

.pagina-conteudo {
    background: #fff;
    padding: 40px;
    border-radius: 16px;
    border: 1px solid #eae5df;
    box-shadow: 0 6px 20px rgba(0,0,0,0.04);
    font-size: 16px;
    color: #444;
    line-height: 1.8;
}

/* FORMULÁRIO DE CONTATO */
.contato-titulo {
    font-size: 22px;
    color: #1a1a1a;
    margin-bottom: 20px;
    font-weight: 700;
}

.contato-intro {
    margin-bottom: 30px;
}

.contato-aviso {
    padding: 20px;
    border-radius: 8px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 20px;
}

.contato-sucesso {
    background: #e8f5e9;
    border: 1px solid #c8e6c9;
    color: #2e7d32;
    margin-bottom: 36px;
}

.contato-erro {
    background: #ffebee;
    border: 1px solid #ffcdd2;
    color: #c62828;
}

.contato-voltar-wrapper {
    text-align: center;
}

.contato-voltar-btn {
    display: inline-block;
    background: #fff;
    color: #555;
    padding: 8px 16px;
    border: 1.5px solid #dcd6ce;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 500;
    text-decoration: none;
}

.contato-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contato-label {
    display: block;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 8px;
}

.contato-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 15px;
    outline: none;
}

.contato-select {
    background: #fff;
    cursor: pointer;
}

.contato-textarea {
    resize: vertical;
}

/* Campo-armadilha (honeypot) contra spam: escondido da tela, mas continua
   presente no HTML para os robôs automatizados encontrarem e preencherem. */
.contato-campo-oculto {
    position: absolute;
    left: -9999px;
    top: -9999px;
    height: 0;
    width: 0;
    overflow: hidden;
}

.contato-btn-enviar {
    background: #1a1a1a;
    color: #fff;
    padding: 14px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.contato-email-direto {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: #555;
}

.contato-email-direto a {
    color: #800020;
    font-weight: 600;
    text-decoration: none;
}

.contato-email-direto a:hover {
    text-decoration: underline;
}

/* MODAIS */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal-content {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    text-align: center;
    /* Sem isso, um texto grande (ex: "Frase na íntegra" expandida com "Ler
       mais") empurra o conteúdo pra fora da tela e não tem como rolar pra
       alcançar o resto (nem voltar pro topo) - o .modal em volta é
       position:fixed com altura travada em 100%, então quem precisa rolar
       é a própria caixa do pop-up, não a página. 40px = os 20px de padding
       de cima e de baixo do .modal. */
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* MODAL "USO NÃO COMERCIAL" */
.modal-uso-titulo {
    color: #800020;
    margin-bottom: 10px;
    font-size: 18px;
}

.modal-uso-texto {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
    margin-bottom: 20px;
    text-wrap: balance;
}

.modal-uso-botao {
    background: #800020;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}

/* MODAL "ESCOLHA O FORMATO" (baixar) */
.modal-acoes-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.modal-acoes-titulo {
    font-size: 16px;
    color: #1a1a1a;
    margin: 0;
}

.modal-acoes-fechar {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #666;
    padding: 0 5px;
}

.modal-acoes-conteudo {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* BOTÕES DE OPÇÃO DENTRO DOS POP-UPS (formatos e "sobre esta citação") */
.modal-btn-opcao {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: #fff;
    border: 1.5px solid #e0dad0;
    padding: 12px 16px;
    border-radius: 8px;
    color: #1a1a1a;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    box-sizing: border-box;
    transition: all 0.2s;
}

.modal-btn-opcao:hover {
    background: #f4efe6;
    border-color: #d8d0c4;
}

/* Ícone do formato (quadrado/vertical) + nome, do lado esquerdo de cada
   opção nos pop-ups de Baixar e Compartilhar. */
.modal-btn-formato {
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-btn-formato i {
    color: #800020;
    font-size: 15px;
}

/* Conjunto de ícones (Instagram, WhatsApp, Pinterest, TikTok, e-mail) que
   aparece do lado direito de cada opção de formato, nos dois pop-ups. */
.modal-btn-icones {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}

.modal-btn-icones i {
    font-size: 15px;
}

/* Avisinho de uso não comercial, embaixo dos links de formato nos
   pop-ups de Baixar e Compartilhar. */
.modal-aviso-uso {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e8e2d5;
    text-align: center;
    font-size: 12px;
    color: #888;
    line-height: 1.4;
}

.modal-aviso-uso a,
.modal-uso-texto a {
    color: #800020;
    font-weight: 600;
}

.modal-info-texto {
    font-size: 14px;
    color: #444;
    line-height: 1.5;
    margin-bottom: 15px;
    text-align: center;
}

/* Descrição de vídeo: texto mais longo, com vários links - lê melhor à esquerda */
.modal-info-texto-video {
    text-align: left;
}

.modal-info-texto-video a {
    color: #800020;
    word-break: break-word;
}

/* Campos opcionais "Frase na íntegra" e "Descrição" do pop-up "Sobre esta
   citação" - texto mais longo, então lê melhor à esquerda (igual à
   descrição de vídeo), com rótulo e um link "Ler mais" no fim do próprio
   trecho quando o texto cadastrado passa do limite de truncamento do
   script.js. */
.modal-info-bloco {
    margin-bottom: 15px;
    text-align: left;
}

.modal-info-bloco .modal-info-texto {
    text-align: left;
    margin: 0 0 10px;
}

/* Quando a Descrição vira vários parágrafos (um por Enter digitado), dá um
   respiro visual entre eles - só o último fica colado no fim do bloco. */
.modal-info-bloco .modal-info-texto:last-child {
    margin-bottom: 0;
}

.modal-info-rotulo {
    font-size: 13px;
    font-weight: 600;
    color: #800020;
    margin: 0 0 4px;
}

/* Frase na íntegra: itálico, por ser uma citação direta (a Descrição fica
   normal, já que é comentário livre, não citação). */
.modal-info-texto-italico {
    font-style: italic;
}

/* O "Ler mais"/"Ler menos" é um <span>, não um <button> (ver script.js) -
   assim fica um linkzinho simples dentro do próprio parágrafo, sem cair na
   regra "#modalConteudo button" que dá aparência de caixa/botão a tudo que
   é <button> dentro do pop-up. Azul igual aos outros links do site (ex:
   Links Úteis do rodapé), não bordô, pra ficar claro que é um link de
   texto e não mais uma opção/ação como os botões abaixo. */
.modal-info-ler-mais {
    color: #0d47a1;
    font-weight: 600;
    font-style: normal; /* não herda o itálico da "Frase na íntegra" - é um link, não citação */
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}

.modal-info-ler-mais:hover {
    color: #08306b;
}

/* MENSAGENS DE LISTA VAZIA (sem cards / busca sem resultado) */
.grid-mensagem-vazia {
    grid-column: 1 / -1;
    text-align: center;
    color: #777;
    padding: 40px;
}

/* BOTÃO "CARREGAR MAIS" */
.carregar-mais-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 35px;
}

.btn-carregar-mais {
    background-color: #fff;
    color: #800020;
    border: 1.5px solid #800020;
    padding: 12px 28px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.btn-carregar-mais:hover {
    background-color: #800020;
    color: #fff;
}

/* Botão "Outra reflexão surpresa" (página Reflexão Surpresa) - mais
   discreto que o "carregar mais", já que aqui não é uma ação de lista,
   é só um convite pra ver outra frase */
.nova-reflexao-wrapper {
    display: flex;
    justify-content: center;
    margin: 0 0 28px;
}

.btn-nova-reflexao {
    display: inline-block;
    background-color: transparent;
    color: #800020;
    border: 1.5px solid #eadcd8;
    padding: 10px 24px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.btn-nova-reflexao:hover {
    background-color: #faf3f0;
    border-color: #800020;
}

#modalConteudo button,
#modalConteudo .modal-btn-opcao {
    background-color: #faf7f2 !important;
    border: 1px solid #e0dad0 !important;
    color: #1a1a1a !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: left !important;
    width: 100% !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background-color 0.2s !important;
}

#modalConteudo button:hover,
#modalConteudo .modal-btn-opcao:hover {
    background-color: #f4efe6 !important;
}

/* RESPONSIVIDADE E CORREÇÃO FORÇADA PARA MOBILE */
@media (max-width: 768px) {
    .quebra-mobile {
        display: inline;
    }

    /* O espaço entre o título e o subtítulo ficava grande no celular por
       causa da altura de linha do h1/logo (herdada do body) - não é a
       margem em si. Reduzindo a altura de linha do título, o espaço
       encolhe sem precisar colar um no outro. Mesmo ajuste aplicado no
       título do rodapé com o subtítulo dele. */
    .main-header h1 {
        line-height: 1.05;
    }

    .main-header p {
        margin-top: 4px;
        line-height: 1.35;
    }

    .footer-logo {
        line-height: 1.05;
        margin-bottom: 12px;
    }

    .top-bar {
        display: flex; /* no celular a barra volta a ser flex (a grade de 3 colunas é só pro computador) */
        padding: 10px 15px;
    }

    .main-menu {
        display: none;
    }

    .menu-toggle-btn {
        display: inline-flex;
    }
    
    /* No celular, o ícone SS volta a ficar no fluxo normal, fixo à
       esquerda da barra (em vez de centralizado como no computador). */
    .topbar-logo {
        position: static;
        transform: none;
    }

    /* No celular a barra é flex (não grade), então o botão de menu
       precisa do margin-left:auto de volta pra ser empurrado até o
       canto direito - no computador quem faz isso é a grade (coluna 3
       + justify-self:end), por isso essa regra só existe aqui. */
    .top-bar-right {
        margin-left: auto;
    }

    .topbar-logo img {
        width: 30px;
        height: 30px;
    }

    /* Os ícones de rede social passam a ficar centralizados na barra,
       numa cor tom sobre tom com o fundo da barra em vez do cinza usado
       no computador - independente da largura do ícone SS ou do botão
       de menu dos dois lados. */
    .social-links {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        gap: 20px;
    }

    .social-links a {
        color: #9c8b6e;
        font-size: 21px;
    }

    .footer-institutional-links {
        display: none;
    }

    /* No mobile, o rodapé inferior (copy + email) desktop fica oculto,
       pois cada informação passa a ter seu próprio bloco mobile abaixo */
    .footer-bottom {
        display: none;
    }

    .footer-social-mobile {
        display: block;
    }

    .footer-institutional-mobile {
        display: block;
    }

    .footer-copy-mobile {
        display: block;
    }

    /* Ícones das redes sociais no mobile em PRETO (#000000) */
    .social-links-mobile a i {
        color: #000000 !important;
    }

    /* Links do rodapé no mobile em 2 linhas de texto simples, separadas
       por " | ", cada uma centralizada como um parágrafo comum - por
       isso fica sempre certinho embaixo do título "Links Úteis",
       independente do tamanho de cada palavra. */
    .institutional-grid-mobile {
        text-align: center;
        line-height: 1.6;
    }

    .separador-links {
        color: #c4bca8;
        margin: 0 3px;
    }

    /* LINKS DO RODAPÉ NO MOBILE: mesmo azul dos links do desktop */
    .site-footer a,
    .site-footer a:visited,
    .site-footer a:active,
    .institutional-grid-mobile a,
    .institutional-grid-mobile a:visited,
    .footer-email a,
    .footer-email a:visited {
        color: #0d47a1 !important;
        text-decoration: none !important;
        font-weight: 400 !important;
    }

    /* O logo "Escritos Santos" do rodapé não deve virar azul junto com os
       demais links - mantém a cor marrom/bordô da marca mesmo no mobile. */
    .site-footer a.footer-logo,
    .site-footer a.footer-logo:visited,
    .site-footer a.footer-logo:active {
        color: #4A2C17 !important;
        font-weight: 700 !important;
    }

    .site-footer a.footer-logo span {
        color: #800020 !important;
    }

    .institutional-grid-mobile a {
        font-size: 13px;
        padding: 4px 0;
    }
}
/* ^ Fecha o @media (max-width: 768px) aberto lá em cima - faltava esse
   fechamento, o que fazia TUDO daqui pra baixo (títulos das páginas
   internas, classes mobile-only/desktop-only e até o segundo @media)
   ficar preso dentro dele sem querer, sumindo no computador. */

/* TAMANHOS DOS TÍTULOS NAS PÁGINAS INTERNAS */
.container h1 {
    font-size: 30px; /* Título principal da página */
    margin-bottom: 20px;
}

.container h2 {
    font-size: 22px; /* Títulos das seções (ex: "1. O que são cookies", etc.) */
    margin-top: 25px;
    margin-bottom: 10px;
    color: #1a1a1a;
}

.container h3 {
    font-size: 18px; /* Subtítulos menores */
    margin-top: 15px;
    margin-bottom: 8px;
}

	/* Força o tamanho do e-mail isoladamente no mobile */
.site-footer .footer-email a {
    font-size: 15px !important; /* Teste 14px ou 14.5px se precisar */
}

	/* No Desktop: mostra a versão limpa e oculta a mobile */
.mobile-only {
    display: none !important;
}
.desktop-only {
    display: inline !important;
}

/* No Celular (até 768px): oculta a desktop e mostra a que tem a quebra */
@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
    .mobile-only {
        display: inline !important;
    }
}

/* ============================================================
   PÁGINA "BIO" (link na bio do Instagram/TikTok) - layout próprio,
   centralizado numa coluna estreita, no estilo Linktree/Beacons.
   ============================================================ */
.bio-pagina {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    padding: 48px 20px 40px;
}

.bio-coluna {
    width: 100%;
    max-width: 420px;
    text-align: center;
}

.bio-foto {
    display: block;
    margin: 0 auto;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: contain;
    border: none;
    background-color: transparent;
}

.bio-nome {
    margin-top: 4px;
    font-size: 22px;
    font-weight: 700;
    color: #4A2C17; /* "Escritos" em marrom - mesma ordem de cor usada no
                        título da home e no rodapé (marrom primeiro, bordô
                        depois) */
}

.bio-nome span {
    color: #800020; /* "Santos" em bordô */
}

.bio-descricao {
    margin-top: 8px;
    font-size: 14.5px;
    color: #555;
}

.bio-lista-links {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bio-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    background-color: #fff;
    border: 1.5px solid #eadcd8;
    border-radius: 14px;
    color: #333;
    text-decoration: none;
    font-weight: 600;
    font-size: 15.5px;
    transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.bio-link:hover {
    border-color: #800020;
    background-color: #faf3f0;
    transform: translateY(-2px);
}

.bio-link i {
    font-size: 19px;
    color: #800020;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}

.bio-link-destaque {
    background-color: #800020;
    border-color: #800020;
    color: #fff;
}

.bio-link-destaque i {
    color: #fff;
}

.bio-link-destaque:hover {
    background-color: #660019;
    border-color: #660019;
}

.bio-separador {
    margin: 26px 0 6px;
    font-size: 12.5px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #999;
}

.bio-redes-sociais {
    margin-top: 26px;
}

.bio-redes-icones {
    display: flex;
    justify-content: center;
    gap: 22px;
}

.bio-redes-icones a {
    color: #800020;
    font-size: 22px;
    transition: transform 0.15s ease, color 0.15s ease;
}

.bio-redes-icones a:hover {
    color: #4A2C17;
    transform: translateY(-2px);
}

.bio-rodape {
    margin-top: 36px;
    font-size: 12.5px;
    color: #999;
}

.bio-rodape a {
    color: #800020;
    text-decoration: none;
}

/* Aviso de nome duplicado (autor/tema) no admin - some por padrão, o
   JavaScript mostra na hora que detecta o nome repetido. */
.aviso-duplicado {
    display: none;
    color: #a33;
    font-size: 12px;
    margin-top: 4px;
}

/* Texto de ajuda embaixo de campos do admin (ex: como escrever a descrição
   do vídeo pra virar link clicável) */
.ajuda-campo {
    display: block;
    color: #777;
    font-size: 12px;
    line-height: 1.6;
    margin-top: 6px;
}
.ajuda-campo code {
    background: #f0f0f0;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11.5px;
}

/* Botão "+ Novo autor" / "+ Novo tema" e a caixinha que abre embaixo dele,
   no cadastro/edição de card - permite cadastrar um autor ou tema novo sem
   sair da página (e sem perder o que já foi digitado na frase e na obra). */
.btn-novo-inline {
    margin-top: 6px;
    background: none;
    border: none;
    color: #800020;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
    text-decoration: underline;
}

.caixa-novo-inline {
    margin-top: 8px;
    padding: 10px;
    background-color: #faf3f0;
    border: 1px solid #eadcd8;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.caixa-novo-inline .campo-novo-nome {
    flex: 1;
    min-width: 160px;
}

.aviso-novo-inline {
    width: 100%;
    font-size: 12px;
    color: #a33;
}

.aviso-novo-inline.sucesso {
    color: #2a7a2a;
}

/* BANNER DE COOKIES - barra fixa na base da tela, mesma paleta do resto
   do site (marrom/bordô sobre o bege da marca). Só aparece quando o
   Google Analytics estiver configurado (ver includes/scripts-terceiros.php)
   e a pessoa ainda não tiver escolhido aceitar ou recusar. */
.banner-cookies {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background-color: #f4efe6;
    border-top: 1px solid #e0dad0;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
    padding: 16px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.banner-cookies-texto {
    margin: 0;
    max-width: 640px;
    font-size: 13px;
    color: #4A2C17;
    line-height: 1.5;
    flex: 1 1 320px;
}

.banner-cookies-texto i {
    color: #800020;
    margin-right: 6px;
}

.banner-cookies-texto a {
    color: #800020;
    font-weight: 600;
    text-decoration: underline;
}

.banner-cookies-botoes {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.banner-cookies-btn {
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: opacity 0.2s;
    white-space: nowrap;
}

.banner-cookies-btn:hover {
    opacity: 0.85;
}

.banner-cookies-btn-aceitar {
    background-color: #800020;
    color: #fff;
}

.banner-cookies-btn-recusar {
    background-color: transparent;
    border-color: #c9beac;
    color: #4A2C17;
}

@media (max-width: 600px) {
    .banner-cookies {
        justify-content: flex-start;
        text-align: left;
    }

    .banner-cookies-botoes {
        width: 100%;
    }

    .banner-cookies-btn {
        flex: 1 1 auto;
    }
}