/* --- 1. Importación de Fuentes --- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&family=Cormorant+Garamond:wght@400;700&family=Montserrat:wght@400;600&family=Satisfy&display=swap');

/* --- 2. Variables de Color (Paleta) --- */
:root {
  --bg-color: #0A0A0A;
  --text-color: #F5EDE0;
  --accent-red: #C8411E;
  --accent-orange: #FF6A1A;
  --smoke-gray: #2E2E2E;
  --golden: #E6B57E;
}

/* --- 3. Estilos Base y Tipografía --- */
html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Cinzel Decorative', serif;
    color: var(--accent-red);
}

.navbar, .btn {
    font-family: 'Montserrat', sans-serif;
}

.main-nav {
    background-color: var(--bg-color);
}

.navbar-brand {
    font-family: 'Cinzel Decorative', serif;
    color: var(--golden);
}

/* --- 4. Estilos específicos del Hero Section --- */
.hero-section {
    height: 80vh; /* Ocupa el 80% de la altura de la pantalla */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative; /* Necesario para posicionar el contenido */
    
    /* --- Fondo con GIF animado --- */
    /* Reemplaza 'fondo-animado.gif' si tu archivo se llama diferente */
    background-image: linear-gradient(rgba(10, 10, 10, 0.6), rgba(10, 10, 10, 0.6)), url('../img/backgroundgif1.gif');
    background-size: cover;
    background-position: center 30%; /* Ajusta este porcentaje (ej: 20%, 40%) para encontrar el punto exacto */
}

.hero-section > div {
    position: relative;
    z-index: 2; /* Por encima de las partículas */
}

/* --- 5. Estilos sección "Sobre el Libro" --- */
.about-book-section {
    background-color: var(--smoke-gray);
}

.book-cover {
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(200, 65, 30, 0.2);
    transition: transform 0.3s ease;
}

.book-cover:hover {
    transform: scale(1.03);
}

/* --- 6. Estilos sección "Sobre la Autora" --- */
.about-author-section {
    background-color: var(--bg-color); /* Usamos el fondo principal para contraste */
}

.author-photo {
    border-radius: 50%; /* Foto circular */
    border: 3px solid var(--golden);
    box-shadow: 0 0 25px rgba(230, 181, 126, 0.2); /* Sutil brillo dorado */
}

.author-signature {
    font-family: 'Satisfy', cursive;
    color: var(--golden);
}

.social-links a {
    color: var(--golden);
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block; /* Permite aplicar transformaciones */
}

.social-links a + a {
    margin-left: 15px; /* Añade un margen a la izquierda de cada icono excepto el primero */
}

.social-links a:hover {
    color: var(--accent-red);
    transform: scale(1.1);
}

/* --- 7. Estilos sección "Universo Yajún" --- */
.universe-section {
    background-color: var(--smoke-gray);
    padding-top: 80px;
    padding-bottom: 80px;
}

.universe-section h2 {
    margin-bottom: 60px !important;
}

.symbol-item {
    position: relative;
    cursor: pointer;
    min-height: 260px;
    width: 100%;
    max-width: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    border-radius: 14px;
    overflow: hidden;
    background: #111;
}

.symbol-item img {
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: drop-shadow(0 0 8px rgba(200, 65, 30, 0.6));
    max-height: 180px;
    width: 100%;
    object-fit: cover;
    margin-bottom: 0;
}

.symbol-fixed-name {
    width: 100%;
    background: rgba(10, 10, 10, 0.92);
    color: var(--golden);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 14px 10px;
    text-align: center;
}

/* Estructura para giro al hacer clic */
.flip-card {
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    min-height: 260px;
    transition: transform 0.7s;
    transform-style: preserve-3d;
}

.flip-card.is-flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 14px;
    overflow: hidden;
}

.flip-front {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #111;
}

.flip-back {
    transform: rotateY(180deg);
    background: linear-gradient(160deg, #101010, #1f1f1f);
    color: var(--text-color);
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.symbol-desc-title {
    color: var(--golden);
    font-family: 'Cinzel Decorative', serif;
    font-size: 1rem;
    margin-bottom: 10px;
}

.symbol-desc-text {
    margin: 0;
    font-size: 0.95rem;
    text-align: center;
}

/* --- 7.1. Efecto de chispas en hover para los símbolos --- */
@keyframes multi-sparks {
    0% {
        opacity: 1;
        /* Todas las chispas comienzan en el centro como un único punto de luz */
        box-shadow: 0 0 0 2px var(--golden);
    }
    50% {
        opacity: 1;
        /* A mitad de la animación, las chispas se han dispersado parcialmente */
        box-shadow: 30px -45px 0 0px var(--accent-orange),
                    -30px -40px 0 1px var(--golden),
                    40px 0px 0 0px var(--accent-red),
                    -35px 25px 0 1px var(--accent-orange),
                    20px 45px 0 0px var(--golden),
                    -40px -15px 0 1px var(--accent-red),
                    40px 20px 0 0px var(--accent-orange),
                    -40px 40px 0 1px var(--golden);
    }
    100% {
        opacity: 0;
        /* Al final, las chispas alcanzan su máxima dispersión y se desvanecen */
        box-shadow: 60px -90px 0 -1px var(--accent-orange),
                    -60px -80px 0 0px var(--golden),
                    80px 0px 0 -1px var(--accent-red),
                    -70px 50px 0 0px var(--accent-orange),
                    40px 90px 0 -1px var(--golden),
                    -80px -30px 0 0px var(--accent-red),
                    80px 40px 0 -1px var(--accent-orange),
                    -80px 80px 0 0px var(--golden);
    }
}

.symbol-item::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none; /* Evita que el pseudo-elemento interfiera con el cursor */
    z-index: 10; /* Asegura que las chispas se muestren por encima de la imagen */
}

.symbol-item:hover::before {
    animation: multi-sparks 0.8s ease-out forwards;
}

/* --- 8. Estilos Newsletter y Footer --- */
.newsletter-section {
    background-color: var(--bg-color);
}

.newsletter-input {
    background-color: var(--smoke-gray);
    border: 1px solid var(--golden);
    color: var(--text-color);
}

.newsletter-input::placeholder {
    color: rgba(245, 237, 224, 0.5);
}

.newsletter-input:focus {
    background-color: var(--smoke-gray);
    color: var(--text-color);
    box-shadow: 0 0 10px rgba(230, 181, 126, 0.3);
    border-color: var(--golden);
}

#mlb2-38619069 {
    width: 100%;
    max-width: 700px;
}

#mlb2-38619069 .ml-form-embedWrapper {
    width: 100%;
    background: transparent;
}

#mlb2-38619069 .ml-form-embedBody {
    padding: 0;
}

#mlb2-38619069 .ml-form-formContent {
    margin: 0 0 16px 0;
}

#mlb2-38619069 .ml-form-horizontalRow {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

#mlb2-38619069 .ml-input-horizontal {
    flex: 1;
}

#mlb2-38619069 .horizontal-fields {
    width: 100%;
}

#mlb2-38619069 .ml-field-group input[type='email'] {
    width: 100%;
    height: 48px;
    background-color: var(--smoke-gray);
    color: var(--golden);
    border: 2px solid var(--golden);
    border-radius: 6px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    padding: 0 14px;
}

#mlb2-38619069 .ml-field-group input[type='email']::placeholder {
    color: rgba(230, 181, 126, 0.85);
}

#mlb2-38619069 .ml-button-horizontal {
    width: 230px;
    min-width: 230px;
}

#mlb2-38619069 .ml-button-horizontal button,
#mlb2-38619069 .ml-mobileButton-horizontal button {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 6px;
    background-color: var(--accent-red);
    color: var(--text-color);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.88rem;
    letter-spacing: 0.4px;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

#mlb2-38619069 .ml-button-horizontal button:hover,
#mlb2-38619069 .ml-mobileButton-horizontal button:hover {
    background-color: #9f3318;
}

#mlb2-38619069 .ml-form-checkboxRow {
    margin: 0;
}

#mlb2-38619069 .ml-form-checkboxRow label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

#mlb2-38619069 .ml-form-checkboxRow input[type='checkbox'] {
    margin-top: 5px;
    accent-color: var(--accent-red);
}

#mlb2-38619069 .ml-form-checkboxRow .label-description p {
    margin: 0;
    color: var(--golden);
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.95rem;
    line-height: 1.35;
}

#mlb2-38619069 .ml-form-successBody {
    border: 1px solid rgba(230, 181, 126, 0.45);
    border-radius: 8px;
    background: rgba(46, 46, 46, 0.4);
    padding: 18px;
}

#mlb2-38619069 .ml-form-successContent h4 {
    margin: 0 0 8px 0;
    font-family: 'Cinzel Decorative', serif;
    color: var(--golden);
    font-size: 1rem;
}

#mlb2-38619069 .ml-form-successContent p {
    margin: 0;
    color: var(--text-color);
}

@media (max-width: 768px) {
    #mlb2-38619069 .ml-form-horizontalRow {
        flex-direction: column;
    }

    #mlb2-38619069 .ml-button-horizontal {
        width: 100%;
        min-width: 0;
    }
}

.main-footer {
    background-color: var(--smoke-gray);
    border-top: 1px solid var(--golden);
}

.main-footer p {
    color: var(--golden);
}

.footer-symbols {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.footer-symbol-img {
    height: 20px; /* Tamaño pequeño */
    opacity: 0.4; /* Sutiles y no invasivos */
}

.powered-by {
    font-size: 0.8rem;
    color: rgba(245, 237, 224, 0.4); /* Blanco cálido con baja opacidad */
}

.powered-by a {
    color: inherit; /* Hereda el color tenue del texto padre */
    text-decoration: none; /* Quita el subrayado */
    transition: color 0.3s ease;
}

.powered-by a:hover {
    color: var(--golden); /* Al pasar el mouse, se ilumina con el color dorado */
}

/* --- Estilos para mensajes flotantes --- */
.messages-container {
    position: fixed;
    top: 90px; /* Un poco por debajo de la barra de navegación */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050; /* Asegura que esté por encima de casi todo */
    width: 90%;
    max-width: 450px; /* Lo hacemos más angosto */
}


/* --- 9. Estilos Responsivos (Media Queries) --- */
@media (max-width: 768px) {
    .hero-section {
        /* En pantallas más pequeñas, centramos completamente el fondo 
           para asegurar que el punto focal principal sea visible. */
        background-position: center center;
        height: 75vh; /* Ajustamos la altura para móviles */
    }

    .hero-section h1 {
        /* Reducimos el tamaño del título para que no ocupe tanto espacio vertical */
        font-size: 2.8rem; 
    }
}