/* --- Importar fuentes de Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=IM+Fell+English+SC&family=Cardo:ital,wght@0,400;0,700;1,400&display=swap');

/* --- Variables CSS --- */
:root {
    --color-dark-bg: #0d0b09; /* Deeper, more atmospheric black-brown */
    --color-medium-bg: #261e16; /* Rough earth brown */
    --color-accent-gold: #a67c52; /* Weathered bronze/copper */
    --color-accent-gold-light: #d9b38c; /* Lighter weathered metal */
    --color-text-primary: #d1cfcc; /* Slightly desaturated text for grit */
    --color-text-secondary: #8c7b66; /* Muted secondary text */
    --color-border: #3d2f23; /* Darker, rustic border */
    --color-red-blood: #660000; /* Dried blood red */
    --color-ember: #ff4500; /* Bright fire/ember for highlights */

    --font-heading: 'Cinzel', serif;
    --font-nav: 'IM Fell English SC', serif;
    --font-body: 'Cardo', serif;
}

/* --- Base Body Styling para Footer Sticky --- */
body {
    margin: 0;
    font-family: var(--font-body);
    background-color: var(--color-dark-bg);
    
    /* MAIN CONAN BACKGROUND */
    background-image: 
        linear-gradient(to bottom, rgba(13, 11, 9, 0.6), rgba(13, 11, 9, 0.9)),
        url('../img/conan_bg.png'); 
    
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    color: var(--color-text-primary);
    line-height: 1.8;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ATMOSPHERIC FALLING ASH EFFECT */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 20% 30%, rgba(217, 179, 140, 0.6), transparent),
        radial-gradient(1.5px 1.5px at 40% 70%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(2px 2px at 50% 10%, rgba(217, 179, 140, 0.5), transparent),
        radial-gradient(1px 1px at 80% 50%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1.5px 1.5px at 90% 90%, rgba(217, 179, 140, 0.4), transparent);
    background-size: 400px 400px;
    background-repeat: repeat;
    opacity: 0.2;
    z-index: 9999; /* ABOVE EVERYTHING */
    pointer-events: none;
    animation: ash-fall 10s linear infinite;
}

@keyframes ash-fall {
    0% { background-position: 0 0; }
    100% { background-position: 400px 400px; }
}

main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
/* --- Estilo para Botones de Imagen (Prestigio) --- */
.clase-btn-img {
    display: block;
    text-decoration: none;
    transition: all 0.3s ease;
    overflow: hidden;
    border-radius: 8px; /* Para que las esquinas de la imagen coincidan con las otras tarjetas */
    line-height: 0; /* Elimina espacios extra debajo de la imagen */
}

.clase-btn-img img {
    width: 100%; /* La imagen ocupará todo el ancho de la columna */
    height: auto;
    display: block;

    transition: all 0.3s ease;
}

/* EFECTOS AL PASAR EL RATÓN */
.clase-btn-img:hover {
    transform: translateY(-5px); /* Se eleva igual que los otros botones */
}

.clase-btn-img:hover img {
    border-color: var(--color-accent-gold);
    /* Brillo dorado alrededor de la placa de metal */
    box-shadow: 0 0 20px rgba(194, 160, 94, 0.5); 
    filter: brightness(1.1); /* Brilla un poquito más */
}
/* --- Header y Navegación --- */
header {
    background-color: rgba(0, 0, 0, 0.95); /* Aumentamos un poco la opacidad para que no se trasluzca mucho el contenido al pasar */
    /*padding: 15px 0;*/
    border-bottom: 2px solid var(--color-border);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    
    /* --- NUEVAS LÍNEAS PARA EL SCROLL --- */
    position: sticky;
    top: 0;
    z-index: 1000; /* Asegura que el header esté por encima de todo, incluso del logo flotante */
}

.header-inner {
    position: relative; /* Clave para el logo absoluto */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px; /* Altura fija para el header */
}

.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.main-nav li a {
    position: relative;
    text-decoration: none;
    font-family: var(--font-heading) !important;
    font-weight: 700;
    font-size: 1.1em;
    margin: 0 25px;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-block;

    /* COPPER TEXT */
    background: linear-gradient(to bottom, #d9b38c 0%, #a67c52 50%, #59412c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.8));
}

.main-nav li a:hover {
    /* EMBER GLOW EFFECT */
    filter: drop-shadow(0 0 12px var(--color-ember)) drop-shadow(0 2px 2px rgba(0,0,0,0.8));
    transform: translateY(-3px) scale(1.05);
}

/* --- Estilos para el Carrusel (Pegado arriba y Ancho Total) --- */
.carousel-container {
    width: 100%;
    position: relative;
    margin: 0; /* Esto elimina márgenes arriba y abajo */
    overflow: hidden;
    background-color: #000;
    /* --- NUEVA LÍNEA: Borde divisor --- */
    border-bottom: 3px solid #3a3025; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.5); /* Sombra para dar profundidad */
}
.carousel-track {
    display: flex; /* Pone las imágenes una al lado de la otra */
    width: 100%;
    transition: transform 0.6s cubic-bezier(0.45, 0, 0.55, 1); /* El efecto de desplazamiento */
    will-change: transform;
}

.carousel-slide {
    min-width: 100%; /* Cada imagen ocupa el 100% del ancho del contenedor */
    box-sizing: border-box;
    display: block; /* IMPORTANTE: Quitamos el display:none que usábamos en el fade */
}

.carousel-slide img {
    width: 100%;
    height: auto;
    vertical-align: middle;
    object-fit: cover;
    /* Cambia 550px por un valor más alto, por ejemplo 850px o 900px */
    max-height: 850px; 
    display: block;
}

.dot-container {
    padding: 10px;
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
}

.dot {
    cursor: pointer;
    height: 12px;
    width: 12px;
    margin: 0 4px;
    background-color: rgba(0,0,0,0.5);
    border-radius: 50%;
    display: inline-block;
    border: 1px solid var(--color-accent-gold);
}

.active, .dot:hover {
    background-color: var(--color-accent-gold);
}

.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: var(--color-accent-gold-light);
    font-weight: bold;
    font-size: 25px;
    background-color: rgba(0, 0, 0, 0.4);
    border: none;
    user-select: none;
}

.next { right: 0; }
.prev { left: 0; }

/* --- Contenido de Subpáginas --- */
.page-content {
    padding: 80px;
    max-width: 1050px;
    margin: 80px auto;
    color: var(--color-text-primary);
    position: relative;
    z-index: 2;
    border-radius: 2px;
    
    /* WEATHERED STONE EFFECT */
    background-color: #1a1510;
    background-image: 
        url('../img/wall_cracks_stains-removebg.png'), /* Existing texture */
        radial-gradient(circle at 50% 0%, rgba(166, 124, 82, 0.1), transparent),
        linear-gradient(rgba(26, 21, 16, 0.95), rgba(26, 21, 16, 0.95));
    background-blend-mode: overlay, normal, normal;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    
    /* ROUGH METAL/STONE BORDER */
    border: 4px solid #2a221a;
    box-shadow: 
        inset 0 0 50px rgba(0,0,0,0.8),
        0 20px 50px rgba(0,0,0,0.9),
        0 0 0 2px #3d2f23; /* Outer thin line */
}


.page-content h1 {
    font-family: var(--font-heading);
    font-size: 3.5em;
    text-align: center;
    margin-top: 0;
    margin-bottom: 50px;
    text-transform: uppercase;
    letter-spacing: 8px;
    
    /* WEATHERED COPPER GRADIENT */
    background: linear-gradient(to bottom, #d9b38c 0%, #a67c52 50%, #59412c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.9));
}

.page-content h2 {
    font-family: var(--font-heading) !important;
    font-size: 1.8em;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 5px;
    
    /* BRONZE GRADIENT */
    background: linear-gradient(to bottom, #d9b38c 0%, #a67c52 50%, #59412c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
    
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.page-content h3 {
    font-family: 'Cinzel', serif !important;
    font-size: 1.4em;
    text-align: left;
    margin-top: 50px;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    padding-left: 25px; /* Espacio para el icono » */

    /* EFECTO DORADO (Igual al H1 y H2) */
    background: linear-gradient(to bottom, #f1d38a 0%, #c2a05e 50%, #8a6e2f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.8));
    
    /* Línea superior sutil */
    border-top: 1px solid rgba(194, 160, 94, 0.2) !important;
    padding-top: 25px;
}
.page-content h2::before, 
.page-content h2::after {
    content: '';
    height: 2px;
    width: 60px;
    background: linear-gradient(to right, transparent, #c2a05e, transparent);
    opacity: 0.6;
}
.page-content::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    background-image: url('../img/emblema_fondo.png'); /* Tu logo con transparencia */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.1; /* Muy sutil para no molestar la lectura */
    z-index: -1;
}


.page-content h3::before {
    content: '»';
    /* Usamos un color sólido que combine con el centro del degradado */
    color: #f1d38a !important; 
    position: absolute;
    left: 0;
    font-weight: bold;
    /* Aplicamos un pequeño resplandor para que destaque */
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
    -webkit-text-fill-color: #f1d38a; /* Evita que herede la transparencia del padre */
}

.page-content p {
    font-family: 'EB Garamond', serif; /* Fuente elegante */
    font-size: 1.15em;
    line-height: 1.6;
    text-align: justify;
    color: #d1cfcc;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.page-content::after {
    content: '';
    position: absolute;
    top: 15px; left: 15px; right: 15px; bottom: 15px;
    border: 1px solid rgba(166, 124, 82, 0.2);
    pointer-events: none;
    border-radius: 2px;
}

/* DECORATIVE RUNES REMOVED BY USER REQUEST */
.page-content ul {
    list-style: none;
    padding-left: 20px;
}

.page-content ul li::before {
    content: '\2022';
    color: var(--color-accent-gold);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

footer {
    background: linear-gradient(to bottom, #0d0b09, #050403);
    padding: 30px 0 0px 0;
    border-top: 1px solid rgba(166, 124, 82, 0.3);
    margin-top: auto;
    position: relative;
    box-shadow: 0 -20px 40px rgba(0,0,0,1);
    overflow: hidden;
}

footer::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 2px;
    background: linear-gradient(to right, transparent, var(--color-accent-gold), transparent);
    opacity: 0.5;
}

footer::before {
    display: none; /* Image removed by user request */
}

.footer-content-wrapper {
    display: flex;
    justify-content: space-between; /* Columnas a la izq, Iconos a la der */
    align-items: flex-start;
    width: 100%;
    padding: 0 80px;
    box-sizing: border-box;
}
/* --- Contenedor de Columnas de Texto --- */
.footer-links-container {
    display: flex;
    flex-direction: row; /* Esto fuerza la alineación horizontal */
    gap: 100px;          /* Aumenta este valor para separar más las columnas entre sí */
    align-items: flex-start;
    flex-wrap: nowrap;   /* Evita que se bajen a otra línea en PC */
}

.footer-column {
    display: flex;
    flex-direction: column; /* El contenido interno (h4 y links) sí va uno sobre otro */
    gap: 10px;
    text-align: left;       /* Alinea el texto a la izquierda */
    min-width: 150px;       /* Ancho mínimo para que no se amontonen las letras */
}

.footer-column h4 {
    color: var(--color-accent-gold); /* Rojo en tu imagen de ejemplo, Dorado para tu tema */
    font-family: var(--font-heading);
    font-size: 1em;
    margin: 0 0 10px 0;
    letter-spacing: 2px;
}

.footer-column a {
    color: var(--color-text-primary);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.9em;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.footer-column a:hover {
    opacity: 1;
    color: var(--color-accent-gold-light);
    padding-left: 5px; /* Pequeño desplazamiento al pasar el ratón */
}

.footer-legal-links {
    display: flex;
    flex-direction: column; /* Pone Aviso Legal DEBAJO de Términos */
    /*gap: 15px;  Espacio entre los dos textos */
    text-align: left;
}

.footer-legal-links a {
    color: var(--color-text-primary);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.9em;
    transition: color 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-legal-links a:hover {
    color: var(--color-accent-gold);
}

/* --- Iconos (Derecha) --- */
.footer-icons {
    display: flex;
    gap: 35px;
}

.footer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--color-text-primary);
    font-size: 0.8em;
}

.footer-item img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    margin-bottom: 5px;
}

.footer-item:hover img {
    box-shadow: none !important; /* Sin luz */
}

/* --- Copyright y Línea Divisoria --- */
.footer-bottom {
    width: 100%;
    text-align: center;
    margin-top: 50px;
}

.footer-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, var(--color-border), transparent);
    width: 80%;
    margin: 0 auto 20px auto;
    opacity: 0.5;
}

.footer-bottom p {
    color: var(--color-text-secondary);
    font-size: 0.85em;
    font-family: var(--font-body);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .clases-basicas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .clases-basicas-grid {
        grid-template-columns: 1fr;
    }
    .footer-content-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 50px;
        padding: 0 20px;
    }
    .footer-links-container {
        gap: 40px;
        text-align: center;
    }
    .footer-column {
        align-items: center;
    }
    .footer-content-wrapper {
        flex-direction: column; /* Se apilan en móvil */
        align-items: center;
        text-align: center;
        gap: 40px;
    }
    .footer-legal-links {
        align-items: center;
    }
     .normativa-grid {
        max-width: 100%;
        padding: 0 10px;
    }
    .normativa-card {
        padding: 15px 20px;
    }
    .normativa-card h3 {
        font-size: 1.1em;
    }
    .nav-spacer {
        display: none; /* En móvil quitamos el hueco */
    }
    .header-logo-floating {
        position: relative;
        left: 0;
        top: 0;
        transform: none;
        margin-bottom: 10px;
    }
    .header-logo-floating img {
        height: 80px;
    }
    .header-inner {
        height: auto; /* El header se adapta en móvil */
        flex-direction: column;
    }
}
@media (max-width: 600px) {
    .footer-links-container {
        flex-direction: column;
        gap: 30px;
    }
}
/* Estilo para el logo de PayPal en la lista */
.paypal-button-img {
    max-width: 170px; /* Cambia este valor para el tamaño deseado */
    height: auto;
    vertical-align: middle;
    transition: transform 0.3s ease;
}

.paypal-button-img:hover {
    transform: scale(1.1); /* Se agranda un poquito al pasar el ratón */
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.6));
}
.paypal-logo {
    max-width: 100px; /* Cambia este valor para el tamaño deseado */
    height: auto;
    vertical-align: middle;
    transition: transform 0.3s ease;
}

.paypal-logo:hover {
    transform: scale(1.1);
}
/* Lista Vertical de Normativas (Rectángulos apilados) */
.normativa-grid {
    display: flex;
    flex-direction: column; /* Apila los elementos uno debajo de otro */
    gap: 15px; /* Espacio entre rectángulos */
    margin: 40px auto; /* Margen superior e inferior, centrado horizontalmente */
    max-width: 700px; /* Limitamos el ancho para que no se estire demasiado en pantallas grandes */
}

.normativa-card {
    background-color: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--color-border); /* Borde sutil */
    padding: 20px 30px;
    text-align: left; /* Alineamos el texto a la izquierda para estilo de lista */
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between; /* El texto a la izquierda y el icono decorativo a la derecha */
    position: relative;
    overflow: hidden;
}

/* Efecto de brillo sutil en el lateral izquierdo */
.normativa-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: var(--color-accent-gold);
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.normativa-card h3 {
    margin: 0 !important;
    border: none !important;
    padding: 0 !important;
    color: var(--color-accent-gold);
    font-size: 1.3em;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 1px;
}
/* AÑADE ESTA NUEVA REGLA para quitar la flecha de la izquierda solo aquí */
.normativa-card h3::before {
    content: none !important;
    display: none !important;
}
/* Flecha decorativa a la derecha (opcional) */
.normativa-card::after {
    content: '»';
    color: var(--color-accent-gold);
    font-size: 1.5em;
    font-weight: bold;
    transition: transform 0.3s ease;
}
/* --- EFECTOS HOVER --- */
.normativa-card:hover {
    background-color: rgba(var(--color-medium-bg), 0.6);
    border-color: var(--color-accent-gold);
    transform: translateX(10px); /* Se desplaza un poco a la derecha al pasar el ratón */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.normativa-card:hover::before {
    opacity: 1; /* El borde izquierdo brilla más */
}

.normativa-card:hover h3 {
    color: var(--color-accent-gold-light);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.normativa-card:hover::after {
    transform: translateX(5px); /* La flecha se mueve a la derecha */
}
/* --- Botón Volver al Menú --- */
.back-button {
    display: inline-block;
    padding: 12px 30px;
    color: var(--color-accent-gold-light);
    text-decoration: none;
    font-family: var(--font-nav);
    font-size: 1.1em;
    text-transform: uppercase;
    letter-spacing: 3px;
    border: 2px solid #3d2f23;
    background: 
        linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8)),
        url('../img/conan_bg.png'); /* Using a bit of the bg texture for the button */
    background-size: cover;
    border-radius: 2px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
    position: relative;
    overflow: hidden;
}

.back-button:hover {
    color: #fff;
    border-color: var(--color-accent-gold);
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(166, 124, 82, 0.5);
    text-shadow: 0 0 10px rgba(166, 124, 82, 0.8);
}

.back-button::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(166, 124, 82, 0.2), transparent);
    transition: 0.5s;
}

.back-button:hover::before {
    left: 100%;
}

/* Efecto al hacer click */
.back-button:active {
    transform: scale(0.98);
}
/* Estilo para el contenedor del logo en el menú */
.nav-logo-li {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px; /* Espacio extra a los lados del logo */
}

/* Estilo para la imagen del logo */
.nav-logo-img {
    height: 60px; /* Ajusta la altura a tu gusto para que quepa en el header */
    width: auto;
    transition: transform 0.3s ease, filter 0.3s ease;
    display: block;
}

.nav-logo-img:hover {
    transform: scale(1.1); /* Se agranda un poquito al pasar el ratón */
    filter: drop-shadow(0 0 8px var(--color-accent-gold)); /* Brillo dorado al pasar el ratón */
}

/* Ajuste para que la navegación siga centrada correctamente */
.main-nav ul {
    align-items: center; /* Centra verticalmente los textos con el logo */
}
/* El espaciador en el menú para que los textos no choquen con el logo */
.nav-spacer {
    width: 180px; /* Ajusta este ancho según qué tan grande sea tu logo */
    pointer-events: none; /* Ignora clicks */
}
/* Estilo para la categoría seleccionada */
.main-nav li a.active-nav {
    color: var(--color-accent-gold-light) !important;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}
/* La línea base (invisible al inicio) */
.main-nav li a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--color-accent-gold-light);
    transform: scaleX(0); /* Encogida al centro */
    transform-origin: bottom right;
    transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1); /* Efecto suave */
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.6); /* Brillo de la línea */
}

/* Estado al pasar el ratón (opcional, para feedback visual) */
.main-nav li a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}
/* Forzamos que la línea se quede extendida cuando la clase active-nav está presente */
.main-nav li a.active-nav::after {
    transform: scaleX(1);
    transform-origin: bottom left;
    height: 3px; /* Un poco más gruesa para resaltar */
    background-color: var(--color-accent-gold);
}
/* Estilo del Logo Flotante */
.header-logo-floating {
    position: absolute;
    left: 52%; /* Adjusted from 50% for better visual centering */
    top: 50%;
    transform: translate(-50%, -40%);
    z-index: 1001;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.header-logo-floating img {
    height: 120px; /* Slightly larger */
    width: auto;
    display: block;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.9)) brightness(0.9) contrast(1.1);
}

.header-logo-floating:hover {
    transform: translate(-50%, -45%) scale(1.1) rotate(2deg);
    filter: brightness(1.1);
}

/* --- Estilos para la Cuadrícula de Clases --- */
.clases-basicas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 por fila en PC */
    gap: 20px;
    margin: 40px 0;
}
.clase-img-btn {
    display: block;
    text-decoration: none;
    transition: transform 0.3s ease, filter 0.3s ease;
    line-height: 0; /* Elimina espacios extra */
}

.clase-img-btn img {
    width: 100%;
    height: auto;
    border-radius: 0px; /* Esquinas redondeadas como en tu imagen */
    border: 0px solid #3a3025; /* Un borde sutil que combine con el metal */
    box-shadow: 0 10px 20px rgba(0,0,0,0.6);
    transition: all 0.3s ease;
}

/* EFECTOS AL PASAR EL RATÓN */
.clase-img-btn:hover {
    transform: translateY(-8px); /* Se eleva */
}

/* Responsive */
@media (max-width: 1024px) {
    .clases-basicas-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .clases-basicas-grid { grid-template-columns: 1fr; }
}
.clase-btn-card {
    background-color: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--color-border);
    padding: 30px 20px; /* Aumentamos el padding para que el botón sea alto */
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centramos el icono y el nombre */
    justify-content: center;
    text-align: center;
}

.clase-btn-card:hover {
    border-color: var(--color-accent-gold);
    background-color: rgba(194, 160, 94, 0.1);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

.clase-card-title {
    color: var(--color-accent-gold);
    font-family: var(--font-heading);
    font-size: 1.2em; /* Tamaño equilibrado */
    margin: 0;
    display: block;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.prestigio-list-inline {
    list-style: none;
    padding: 0;
    margin: 0;
}
.prestigio-grid-4 {
    grid-template-columns: repeat(4, 1fr) !important; /* Fuerza 4 columnas */
    gap: 20px;
}
.prestigio-list-inline li {
    color: var(--color-text-primary);
    font-size: 0.95em;
    margin-bottom: 5px;
    opacity: 0.8;
}

.prestigio-list-inline li::before {
    content: '✦ ';
    color: var(--color-accent-gold);
}

/* --- Estilos para las Páginas de Clase Individuales --- */
.stats-banner {
    display: flex;
    justify-content: space-around;
    background: rgba(0, 0, 0, 0.5);
    padding: 15px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    margin: 20px 0;
}

.stats-banner p {
    margin: 0 !important;
    font-weight: bold;
    color: var(--color-accent-gold-light);
}

.dotes-box {
    margin: 30px 0;
    padding: 25px;
    border: 4px double var(--color-accent-gold); /* Borde doble medieval */
    background: rgba(43, 37, 31, 0.4);
}

.dotes-box h4 {
    text-align: center;
    color: var(--color-accent-gold);
    text-transform: uppercase;
    margin-top: 0;
}

.dotes-box ul {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas para dotes */
    gap: 10px;
    list-style: none;
    padding: 0;
}

.example-box {
    background: rgba(0,0,0,0.3); 
    padding: 20px; 
    border: 1px solid var(--color-border); 
    margin: 30px 0; 
    border-radius: 5px;
}


[style*="color: var(--color-red-blood)"] {
    /* Si el texto es rojo, le aplicamos el contorno */
    text-shadow: 
        -1px -1px 0 #000000,  /* Sombra arriba-izquierda */
         1px -1px 0 #000000,  /* Sombra arriba-derecha */
        -1px  1px 0 #000000,  /* Sombra abajo-izquierda */
         1px  1px 0 #000000,  /* Sombra abajo-derecha */
         0px  0px 2px rgba(255,255,255,0.5); /* Resplandor extra sutil */
    
    font-weight: bold; /* Aseguramos que sea grueso para mejorar legibilidad */
}
/* --- Ajuste específico para Mutaciones en el Index --- */
.mutations-index {
    background-image: none !important; /* Quita el pergamino */
    background-color: transparent !important; /* Quita el color marrón */
    box-shadow: none !important; /* Quita la sombra del cuadro */
    border: none !important; /* Quita cualquier borde */
    padding: 40px 20px !important; /* Ajustamos el espacio */
}

/* Cambiamos el texto a blanco/dorado para que se vea sobre el muro de piedra */
.mutations-index h1, 
.mutations-index h2, 
.mutations-index h3, 
.mutations-index p, 
.mutations-index li, 
.mutations-index strong {
    color: var(--color-text-primary) !important; /* Vuelve al crema/blanco */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8) !important; /* Sombra para resaltar sobre la piedra */
}

/* Los subtítulos h3 en el index no necesitan la línea divisoria de arriba */
.mutations-index h3 {
    border-top: 1px solid rgba(194, 160, 94, 0.3) !important;
}

/* --- EFECTO DE CENIZAS CAYENDO --- */

/* Contenedor principal: cubre toda la pantalla y no se puede tocar */
.ash-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Por detrás de todo pero delante del muro de piedra */
    pointer-events: none; /* Permite hacer clic en los botones a través de las cenizas */
    overflow: hidden;
}

/* Cada capa de ceniza */
.ash-layer {
    position: absolute;
    top: -100%; /* Empieza fuera de pantalla arriba */
    left: 0;
    width: 100%;
    height: 200%; /* Doble de alto para el bucle infinito */
    /* Aumentamos la cantidad añadiendo más puntos y reduciendo el background-size */
    background-image: 
        radial-gradient(2px 2px at 10% 10%, #aaa, transparent),
        radial-gradient(3px 3px at 25% 25%, #aaa, transparent),
        radial-gradient(2px 2px at 40% 45%, #aaa, transparent),
        radial-gradient(4px 4px at 55% 65%, #aaa, transparent),
        radial-gradient(2px 2px at 70% 15%, #aaa, transparent),
        radial-gradient(3px 3px at 85% 85%, #aaa, transparent),
        radial-gradient(2px 2px at 95% 35%, #aaa, transparent),
        radial-gradient(3px 3px at 15% 75%, #aaa, transparent);
    
    /* Al reducir este número, las cenizas se multiplican en pantalla */
    background-size: 300px 400px; 
    
    animation: fall-ashes linear infinite;
    /* Aumentamos la opacidad general para que brillen más */
    opacity: 0.1; 
}

/* Diferentes velocidades y opacidades para dar profundidad */
.ash-layer:nth-child(2) {
    animation-duration: 12s;
    background-size: 400px 600px;
    opacity: 0.4;
    filter: blur(1px); /* Las del fondo se ven borrosas */
}

.ash-layer:nth-child(3) {
    animation-duration: 20s;
    background-size: 800px 1000px;
    opacity: 0.2;
    filter: blur(2px);
}

/* Animación del movimiento */
@keyframes fall-ashes {
    0% {
        transform: translateY(0) translateX(0);
    }
    50% {
        /* Un pequeño balanceo hacia la derecha simulando viento */
        transform: translateY(25vh) translateX(20px); 
    }
    100% {
        transform: translateY(100vh) translateX(0);
    }
}