/* Global Styles & Fonts */
body {
    background-color: #000000;
    color: #E5E7EB; /* Un gris claro casi blanco, bueno para texto sobre fondo oscuro */
    font-family: 'Roboto', sans-serif;
    line-height: 1.6; /* Mejora la legibilidad */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
    color: #FFFFFF; /* Titulares en blanco para contraste */
}

.font-serif {
    font-family: 'Playfair Display', serif;
}

/* Gold Theme Accents */
.gold-text {
    color: #D4AF37; /* Un dorado clásico */
}

.gold-text-hover:hover {
    color: #D4AF37;
    transition: color 0.3s ease-in-out;
}

.gold-bg {
    background-color: #D4AF37;
}

.gold-bg:hover {
    background-color: #c09e32; /* Un tono de dorado ligeramente más oscuro para el hover */
    transition: background-color 0.3s ease-in-out;
}

.gold-border {
    border-color: #D4AF37;
}

/* Navigation Styles */
.nav-link {
    position: relative;
    transition: color 0.3s ease-in-out;
    color: #E5E7EB; /* Color base de los enlaces del nav */
    padding-bottom: 6px; /* Espacio para la línea inferior */
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px; /* Línea un poco más gruesa */
    bottom: 0; /* Alineada justo debajo del texto */
    left: 50%;
    transform: translateX(-50%);
    background-color: #D4AF37;
    transition: width 0.3s ease-in-out;
}

.nav-link:hover, 
.nav-link.active {
    color: #D4AF37;
}

.nav-link:hover::after, 
.nav-link.active::after {
    width: 100%;
}

/* Ajuste para el menú móvil, ya que usa Tailwind para hover background */
#mobile-menu a {
    color: #E5E7EB;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
#mobile-menu a:hover {
    background-color: #1F2937; /* Un gris oscuro de Tailwind para el hover del fondo */
    color: #D4AF37; /* Texto dorado en hover */
}


/* Hero Section (Estilos base para escritorio y por defecto) */
.hero-section {
    min-height: 100vh;
    background-image: url('/images/bg.jpg');
    background-size: cover;
    background-position: center center; /* Asegura centrado */
    background-attachment: fixed;   /* Efecto parallax para ESCRITORIO */
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.hero-section > div { /* Estilo para el contenedor interior del hero */
    background-color: rgba(0, 0, 0, 0.75); /* Opacidad un poco mayor para mejor contraste */
}

/* --- AJUSTES PARA MÓVILES EN HERO SECTION --- */
@media (max-width: 768px) { /* Para tablets en modo retrato y móviles */
    .hero-section {
        background-attachment: scroll; /* Desactiva el 'fixed' en móviles, la imagen se desplazará con la página */
        /* background-position: top center; */ /* Descomenta y ajusta si necesitas priorizar una parte de la imagen en móviles */
    }
}


/* Card Styles */
.card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    border: 1px solid #2D3748; /* Un borde sutil para las tarjetas, si no se usa gold-border */
}

.card:hover {
    transform: translateY(-10px) scale(1.03); /* Añadido un ligero scale para más dinamismo */
    box-shadow: 0 20px 25px -5px rgba(212, 175, 55, 0.15), 0 10px 10px -5px rgba(212, 175, 55, 0.1); /* Sombra dorada más pronunciada */
}

/* Prophecy Section Image */
.prophecy-image-container {
    max-width: 500px; 
    margin: 2rem auto; 
}

.prophecy-image-container img {
    width: 100%;
    height: auto;
    border-radius: 0.5rem; /* Tailwind rounded-lg */
    border: 3px solid #D4AF37; /* Borde dorado más grueso para destacar */
    box-shadow: 0 10px 15px -3px rgba(212, 175, 55, 0.1), 0 4px 6px -2px rgba(212, 175, 55, 0.07); /* Sombra sutil dorada */
}

/* Form Input Focus (Tailwind ya lo maneja, pero se puede reforzar si es necesario) */
/* 
.form-input:focus {
    border-color: #D4AF37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.3);
} 
*/

/* Mejoras Adicionales */
html {
    scroll-behavior: smooth; /* Scroll suave global, aunque el JS ya lo maneja para los links */
}

/* Para asegurar que el fondo del header en scroll sea opaco completamente */
#header.bg-black {
    background-color: #000000 !important;
}

/* Placeholder color para los inputs (si se desea un color específico) */
input::placeholder {
    color: #6B7280; /* Un gris estándar de Tailwind */
    /* opacity: 1; */ /* Asegurar que los placeholders sean visibles si hay problemas de opacidad */
}
input:focus::placeholder {
    color: #4B5563; /* Ligeramente más oscuro en focus */
}

/* Estilos para el botón de envío, si se quieren refinar más allá de Tailwind */
button[type="submit"] {
    /* El estilo base ya es bueno con gold-bg y hover:bg-opacity-80 */
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, transform 0.2s ease-in-out;
}

button[type="submit"]:hover {
    transform: translateY(-2px); /* Ligero levantamiento en hover */
}

button[type="submit"]:active {
    transform: translateY(0px); /* Efecto de presión */
}