/* MADERA 29:11 - Hoja de Estilos Principal
    Estilo: Minimalista, Artesanal, Vintage Moderno.
    Inspiración: Maderistica.cl / Jeremías 29:11
*/

/* Importamos tipografías de Google Fonts */
/* 'Playfair Display': Elegante, tipo serif, para títulos (toque vintage) */
/* 'Montserrat': Limpia, moderna, para textos largos (toque minimalista) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&family=Playfair+Display:wght@400;700&display=swap');

:root {
    /* --- PALETA DE COLORES --- */
    /* Basados en la descripción del logo: Azul, Gris, toque Morado */
    
    /* Color principal (Navy/Azul profundo - Para textos fuertes y el logo) */
    --color-primario: #2C3E50; 
    
    /* Color secundario (Gris carbón - Para textos generales) */
    --color-secundario: #4A4A4A;

    /* Color de acento (Morado añejo/Lacre - Para detalles, botones, hover) */
    --color-acento: #6D5D7A; 

    /* Fondos */
    /* Un blanco roto, casi crema, para simular papel de arte, no blanco clínico */
    --color-fondo-body: #FDFBF7; 
    --color-fondo-claro: #FFFFFF;

    /* Maderas (para fondos sutiles o bordes) */
    --color-madera-clara: #E5D3B3;

    /* --- TIPOGRAFÍA --- */
    --fuente-titulos: 'Playfair Display', serif;
    --fuente-cuerpo: 'Montserrat', sans-serif;

    /* --- GENERALES --- */
    --espaciado-estandar: 2rem;
    --borde-suave: 1px solid rgba(0,0,0,0.1);
}

/* Reseteo básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--fuente-cuerpo);
    background-color: var(--color-fondo-body);
    color: var(--color-secundario);
    line-height: 1.6;
    font-weight: 300; /* Letra fina y elegante */
}

h1, h2, h3, h4 {
    font-family: var(--fuente-titulos);
    color: var(--color-primario);
    font-weight: 700;
    margin-bottom: 1rem;
}

/* Clase utilitaria para contenedores centrados (estilo Maderistica) */
.container {
    width: 90%;
    max-width: 1200px; /* No queremos que se estire demasiado en pantallas gigantes */
    margin: 0 auto;
}

/* Pruebas visuales temporales */
.header-temporal {
    text-align: center;
    padding: 4rem 0;
    border-bottom: var(--borde-suave);
}
.versiculo-inspiracion {
    font-family: var(--fuente-titulos);
    color: var(--color-acento);
    font-style: italic;
    margin-top: 1rem;
}