* {
	margin:0;
	padding: 0;
	box-sizing: border-box;
}

html{
	scroll-behavior: smooth;
}

body{
	font-family: 'Aniron', sans-serif;
	background-color: #111;
	color: #fff;
     overflow-x: hidden;
}


h1, h2, h3{
    max-width: 100%;
    word-break: keep-all;
    overflow-wrap: normal;
}

                                              /* TIPOGRAFÍA */
h1{font-size: 3.5em;}
h2{font-size: 2.5em;}
h3{font-size: 1.6em;}
p{font-size: 1.1em; line-height: 1.6;}
ul{list-style: none;}
li{ font-size: 1.1em;}

                                                /* BOTONES */
button{
	width: 100%;
	padding: 10px;
	background: crimson;
	color:#fff;
	border:none;
	cursor: pointer;
	font-size: 1rem;
	border-radius: 8px;
	transition: .3s;
}

button:hover{
	background: rgb(172, 16, 47);
	transform: scale(1.03);
}

                                                 /* CONTENEDOR */
.contenedor{
	max-width: 1200px;
	margin: auto;
	padding: 0 20px;
}

                                            /* ========================= */
                                                   /* HEADER  */
                                            /* ========================= */


                                            /* LOGO PRO */
.logo{
    height: 60px;
    width: auto;
    object-fit: contain;
}
                                                /* EN DESKTOP MÁS GRANDE */
@media (min-width: 901px){
    .logo{
        height: 70px;
    }
}
.logo{
    height: 65px;
    filter: drop-shadow(0 0 5px rgba(212,175,55,0.6));
}


                                            /* ========================= */
                                                /* NAVBAR LOTR */
                                            /* ========================= */

header{
    background: rgba(0,0,0,0.9);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(212,175,55,0.2);
    z-index: 9999;
    position: relative;
}

                                                        /* Links */
.nav-link{
    position: relative;
    color: #ddd;
    transition: all 0.3s ease;
}

                                                    /* Hover dorado */
.nav-link:hover{
    color: #d4af37;
}

                                                /* Línea animada debajo */
.nav-link::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0%;
    height: 2px;
    background: #d4af37;
    transition: 0.3s;
}

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

                                                /* ACTIVO (página actual) */
.nav-link.active{
    color: #d4af37;
}

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

                                                    /* DROPDOWN */
.dropdown {
	position: relative;
	display: inline-block;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
	z-index: 1;
}

.dropdown-content a {
	color: black;
	padding: 12px 16px;
	display: block;
}

.dropdown-content a:hover {
	background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
	display: block;
}

.dropdown-content{
    background: rgba(0,0,0,0.95);
    border: 1px solid rgba(212,175,55,0.2);
    border-radius: 8px;
}

.dropdown-content a{
    color: #ccc;
}

.dropdown-content a:hover{
    background: rgba(212,175,55,0.1);
    color: #d4af37;
}

.flecha-dropdown{
    font-size: 0.65rem;
    margin-left: 6px;
    color: #d4af37;

    transition: transform 0.3s ease;
}

.dropdown:hover .flecha-dropdown{
    transform: rotate(180deg);
}

.nav-link i{
    margin-left: 6px;
    font-size: 0.8rem;
    transition: 0.3s;
}
.dropdown:hover i{
    transform: rotate(180deg);
    color: gold;
}

nav ul li a{
    text-transform: uppercase;
    letter-spacing: 1px;
}

nav ul{
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: nowrap; 
}

nav ul li{
    list-style: none;
}

nav ul li a{
    white-space: nowrap;
	font-size: 0.95rem; 
}

header a{
	padding: 5px 12px;
	text-decoration: none;
	font-weight: bold;
	color: black;
}

                                                           /* INICIO */

                                        /* ========================= */
                                            /* INICIO MAPA FONDO */
                                        /* ========================= */

#hero-mapa {
    height: 100vh;
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.9)),
                url("../images/tierra-media.jpg");
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

                                            /* CONTENEDOR */
#hero-mapa .overlay {
    max-width: 800px;
    padding: 20px;
    position: relative;
    z-index: 2;
}

                                            /* TITULO DORADO */
.titulo-epico {
    font-size: 4em;
    color: gold;
    text-shadow: 
        0 0 10px rgba(255,215,0,0.7),
        0 0 20px rgba(255,215,0,0.5),
        0 0 40px rgba(255,215,0,0.3);
    margin-bottom: 20px;

    animation: fadeInUp 1.2s ease;
}

                                            /* TEXTO */
.texto-epico {
    font-size: 1.3em;
    color: #ddd;
    line-height: 1.6;

    animation: fadeInUp 1.6s ease;
}

                                            /* ANIMACION */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

                                                            /* TRAILER */
#video{
	padding: 60px 20px;
	text-align: center;
	background: #111;
	color: white;
}

                                                            /* MAPA */

#mapa{
    padding: 60px 20px;
    text-align: center;
    background: black;
    color: white;
}

#mapa iframe{
    width: 90%;
    height: 400px;
    margin-top: 20px;
    border-radius: 10px;
}

                                                            /* CTA */

#cta{
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(
    135deg,
    #000000 0%,
    #1a1a1a 35%,
    #5a4715 70%,
    #d4af37 100%);
    color: white;
}

#cta button{
    margin-top: 20px;
    width: auto;
    padding: 12px 30px;
    background: linear-gradient(45deg, #d4af37, #b8921e);
    color: black;
    font-weight: bold;
    border: none;
    border-radius: 10px;
    transition: 0.3s ease;
}

#cta button:hover{
    transform: scale(1.05);

    background: linear-gradient(
    45deg,
    #f5d76e,
    #d4af37
    );

    box-shadow:
    0 0 15px rgba(212,175,55,0.5);
}

                                                        /* RESPONSIVE */

@media (max-width: 900px){
    .flex{
        flex-direction: column;
    }

    .flex.reverse{
        flex-direction: column;
    }
}


                                            /* ========================= */
                                                    /* FOOTER  */
                                            /* ========================= */

footer{
    width:100%;
    background:#e1e1e1;

    padding:25px 20px;

    display:flex;
    justify-content:center;
    align-items:center;
}

footer .contenedor{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 25px;
	flex-wrap: nowrap;
}

footer a{
    transition:0.3s;
}

footer a:hover{
    transform:translateY(-5px) scale(1.05);
}

footer img{
    width:45px;
    height:45px;

    object-fit:cover;

    border-radius:12px;
}

.copyright{
    width:100%;
    background:#e1e1e1;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:15px 20px;

    text-align:center;
}

.copyright small{
    width:100%;

    display:block;

    margin:0 auto;

    text-align:center;

    color:black;

    font-size:0.9rem;
}

                                                    /* MOBILE */

@media(max-width:900px){

    footer .contenedor{
        gap:15px;
    }

    footer img{
        width:45px;
        height:45px;
    }

    .copyright{
        font-size:0.75rem;
        padding:10px;
    }

}

                                    /* ========================= */
                                            /* RESPONSIVE */
                                    /* ========================= */

@media (min-width: 901px){

	.pelis{
		grid-template-columns: repeat(3, 1fr);
	}

	.cric{
		grid-template-columns: repeat(2, 1fr);
	}

	#imagenes .contenedor{
		grid-template-columns: repeat(4, 1fr);
	}

	#contacto .contenedor{
		grid-template-columns: repeat(2,1fr);
	}
}

@media (min-width: 901px){

	header{
		position: fixed;
		width: 100%;
		height: 80px;
		padding: 0 7%;
		display: flex;
		align-items: center;
	}

	header .contenedor{
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
	}

	header nav{
		flex-direction: row;
		padding: 0;
	}

	nav ul li{
		display: inline-block;
	}

	nav ul li a{
		font-size: 1.2rem;
		padding-right: 2rem;
		text-transform: uppercase;
	}
}
                                            /* ========================= */
                                                    /* GALERIA */
                                            /* ========================= */

#imagenes{
    padding: 100px 20px;
    background: #111;
    color: white;
    text-align: center;
}

#imagenes h2{
    font-size: 3em;
    margin-bottom: 15px;
    color: gold;
    text-shadow:
        0 0 10px rgba(255,215,0,0.5);
}

#imagenes p{
    color: #bbb;
    max-width: 800px;
    margin: auto;
    margin-bottom: 50px;
    line-height: 1.7;
}

                                                    /* GRID */

.galeria-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
    gap: 25px;
}

                                                    /* CARD */

.galeria-item{
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    cursor: pointer;

    background: #1a1a1a;

    box-shadow:
        0 10px 25px rgba(0,0,0,0.5);

    transition: 0.4s ease;
}

                                                    /* IMAGEN */

.galeria-item img{
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
    transition: 0.5s ease;
}

.galeria-item a{
    display: contents;
}
                                                    /* OVERLAY */

.galeria-overlay{
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
    linear-gradient(
        to top,
        rgba(0,0,0,0.95),
        rgba(0,0,0,0.2)
    );

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: 25px;

    opacity: 0;
    transition: 0.4s ease;

}

                                                        /* TEXTO */

.galeria-overlay h3{
    color: gold;
    margin-bottom: 10px;
    font-size: 1.5em;

    transform: translateY(20px);
    transition: 0.4s ease;
}

.galeria-overlay p{
    color: #ddd;
    font-size: 0.95rem;
    margin: 0;

    transform: translateY(20px);
    transition: 0.5s ease;
}



                                                    /* HOVER */

.galeria-item:hover{
    transform: translateY(-10px);
    box-shadow:
        0 20px 40px rgba(0,0,0,0.8);
}

.galeria-item:hover img{
    transform: scale(1.08);
}

.galeria-item:hover .galeria-overlay{
    opacity: 1;
}

.galeria-item:hover h3,
.galeria-item:hover p{
    transform: translateY(0);
}

                                                /* RESPONSIVE */

@media(max-width:900px){

    .galeria-grid{
        grid-template-columns: 1fr;
    }

    .galeria-item img{
        height: 260px;
    }

}

                                    
                                        /* ========================= */
                                            /* HERO FONDO GALERIA */
                                        /* ========================= */

#hero-galeria {
    height: 100vh;
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.9)),
                url("../images/galeria-fondo.jpg");
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

                                            /* CONTENEDOR */
#hero-galeria .overlay {
    max-width: 800px;
    padding: 20px;
    position: relative;
    z-index: 2;
}

                                            /* TITULO DORADO */
.titulo-epico {
    font-size: 4em;
    color: gold;
    text-shadow: 
        0 0 10px rgba(255,215,0,0.7),
        0 0 20px rgba(255,215,0,0.5),
        0 0 40px rgba(255,215,0,0.3);
    margin-bottom: 20px;

    animation: fadeInUp 1.2s ease;
}

                                                /* TEXTO */
.texto-epico {
    font-size: 1.3em;
    color: #ddd;
    line-height: 1.6;

    animation: fadeInUp 1.6s ease;
}

                                                /* ANIMACION */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

                                                /* ========================= */
                                                        /* PELICULAS */
                                                /* ========================= */

.peliculas-mejorado{
background: #111;
color: white;
padding: 80px 20px;
}

.peliculas-mejorado h2{
    text-align: center;
    font-size: 3em;
    margin-bottom: 50px;
    color: gold;
    text-shadow: 0 0 10px rgba(255,215,0,0.5);
}

.pelis-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
gap: 30px;
}

.peli-card{
background: #1e1e1e;
border-radius: 15px;
overflow: hidden;
transition: .3s;
box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

.peli-card:hover{
transform: translateY(-10px);
}

.peli-card img{
width: 100%;
height: 200px;
object-fit: contain;
}

.peli-info{
padding: 20px;
}

.peli-info h3{
margin-bottom: 10px;
}

.peli-info p{
font-size: 1rem;
margin-bottom: 15px;
}

                                                    /* Botón adaptado */
.peli-info button{
background: crimson;
border: none;
padding: 10px;
cursor: pointer;
width: 100%;
}

.peli-info button:hover{
background: rgb(172,16,47);
}

                                                /* GRID */
.pelis-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}


                                                /* CARD */
.peli-card {
    display: flex;
    gap: 25px;
    background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
    padding: 25px;
    border-radius: 15px;
    align-items: center;

    border: 1px solid rgba(255,255,255,0.05);

    transition: all 0.3s ease;
}

                                                /* HOVER PRO */
.peli-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 15px 40px rgba(0,0,0,0.8);
    border: 1px solid rgba(255,215,0,0.4);
}


                                                /* EFECTO IMAGEN */
.peli-card:hover img {
    border-color: gold;
    transform: scale(1.08);
}

                                                /* INFO */
.peli-card .info {
    flex: 1;
}

.peli-card h3 {
    margin-bottom: 5px;
    font-size: 1.5em;
}

.peli-card span {
    display: block;
    font-size: 0.9em;
    color: #aaa;
    margin-bottom: 10px;
}

                                                /* TEXTO */
.peli-card p {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 15px;
    color: #ddd;
}

                                                /* BOTON */
.peli-card button {
    background: crimson;
    border-radius: 8px;
    padding: 8px 15px;
    width: auto;
    transition: 0.3s;
}

.peli-card button:hover {
    background: gold;
    color: black;
    transform: scale(1.05);
}

                                        /* ========================= */
                                                /* RESPONSIVE */
                                        /* ========================= */

@media (min-width: 901px) {
    .pelis-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 901px) {
    .pelis-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .peli-card {
        flex-direction: column;
        text-align: center;
    }

    .peli-card img {
        margin-bottom: 25px;
    }
}


                                        /* ========================= */
                                            /* HERO FONDO PELICULAS */
                                        /* ========================= */

#hero-peliculas {
    height: 100vh;
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.9)),
                url("../images/peliculas-fondo.jpg");
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

                                                /* CONTENEDOR */
#hero-peliculas .overlay {
    max-width: 800px;
    padding: 20px;
}



                                            /* TITULO DORADO */
.titulo-epico {
    font-size: 4em;
    color: gold;
    text-shadow: 
        0 0 10px rgba(255,215,0,0.7),
        0 0 20px rgba(255,215,0,0.5),
        0 0 40px rgba(255,215,0,0.3);
    margin-bottom: 20px;

    animation: fadeInUp 1.2s ease;
}

                                                /* TEXTO */
.texto-epico {
    font-size: 1.3em;
    color: #ddd;
    line-height: 1.6;

    animation: fadeInUp 1.6s ease;
}

                                                /* ANIMACION */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


                                            /* ========================= */
                                                    /*  CONTACTO  */
                                            /* ========================= */

                                            /* ========================= */
                                                    /* HERO CONTACTO  */
                                            /* ========================= */
#hero-contacto {
    height: 100vh;
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.9)),
                url("../images/frodo-caminando.png");
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

                                                    /* CONTENEDOR */
#hero-contacto .overlay {
    max-width: 800px;
    padding: 20px;
}

                                                    /* TITULO DORADO */
.titulo-epico {
    font-size: 4em;
    color: gold;
    text-shadow: 
        0 0 10px rgba(255,215,0,0.7),
        0 0 20px rgba(255,215,0,0.5),
        0 0 40px rgba(255,215,0,0.3);
    margin-bottom: 20px;

    animation: fadeInUp 1.2s ease;
}

                                                        /* TEXTO */
.texto-epico {
    font-size: 1.3em;
    color: #ddd;
    line-height: 1.6;

    animation: fadeInUp 1.6s ease;
}

                                                        /* ANIMACION */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

                                        /* ========================= */
                                            /* FORMULARIO CONTACTO  */
                                        /* ========================= */

#contacto {
    min-height: 100vh;
    background: linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0.95)),
                url("../images/frodo-contacto.jpg");
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    overflow-x: hidden;
}

.contacto-container {
    width: 100%;
    max-width: 1100px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    background: rgba(0,0,0,0.7);
    padding: 40px;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    box-sizing:border-box;
}

                                                /* TEXTO IZQUIERDA */
.contacto-info h2 {
    color: gold;
    font-size: 2.5em;
    margin-bottom: 20px;
}

.contacto-info p {
    color: #ccc;
    margin-bottom: 15px;
    font-size: 1rem;
}

                                                /* FORMULARIO */
.contacto-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contacto-form input,
.contacto-form textarea {
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: #1e1e1e;
    color: white;
    font-family: inherit;
    outline: none;
    transition: 0.2s;
}

.contacto-form input:focus,
.contacto-form textarea:focus {
    border: 1px solid gold;
    box-shadow: 0 0 10px rgba(255,215,0,0.4);
}

                                                /* BOTÓN */
.contacto-form button {
    background: linear-gradient(45deg, gold, #c9a400);
    color: black;
    font-weight: bold;
    border-radius: 8px;
    transition: 0.2s;
}

.contacto-form button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(255,215,0,0.6);
}

                                                /* RESPONSIVE */
@media (max-width:768px){

    .contacto-container{
        width: 100%;
        max-width: 100%;
        padding: 25px;
        margin: 0 auto;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .contacto-info{
        width: 100%;
        text-align: center;
    }

    .contacto-form{
        width: 100%;
    }

}
                                            /* ========================= */
                                                    /* RESEÑAS  */
                                            /* ========================= */

#resenas-pro{
background: #1e1e1e;
color: white;
padding: 60px 20px;
}

#resenas-pro h2{
text-align: center;
font-size: 3em;
margin-bottom: 40px;
}

.lista-resenas{
width: 100%;
display: grid;
grid-template-columns: 1fr;
gap: 25px;
}

.resena{
display: flex;
gap: 20px;
background: #2a2a2a;
padding: 20px;
border-radius: 15px;
align-items: center;
transition: .3s;
width:100%;
margin:0 auto;
}

.resena:hover{
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.6);
}

.resena img{
width: 120px;
height: 120px;
object-fit: contain;
border-radius: 50%;
border: 3px solid crimson;
}

.resena .info{
flex: 1;
}

.resena h3{
margin-bottom: 5px;
}

.resena span{
font-size: 0.9rem;
color: #ccc;
display: block;
margin-bottom: 10px;
}

.resena p{
font-size: 1rem;
margin-bottom: 15px;
}

.resena button{
background: crimson;
border: none;
padding: 8px 15px;
cursor: pointer;
}

.resena button:hover{
background: rgb(172,16,47);
}

                                                        /* RESPONSIVE */
@media(min-width:901px){
.lista-resenas{
grid-template-columns: repeat(2,1fr);
}
}

@media(max-width:768px){

    .resena{
        flex-direction:column;

        text-align:center;

        width:100%;
    }

}

                                                    /* BLOQUES NUEVOS */

.bloque{
    padding: 80px 20px;
}

.bloque.oscuro{
    background: #1e1e1e;
    color: white;
}

.bloque.claro{
    background: #f5f5f5;
    color: black;
}

.flex{
    display: flex;
    align-items: center;
    gap: 40px;
}

.flex.reverse{
    flex-direction: row-reverse;
}

.texto{
    flex: 1;
}

.texto h2{
    margin-bottom: 20px;
}

.imagen{
    flex: 1;
}

.imagen img{
    width: 100%;
    border-radius: 15px;
}

#resenas-pro {
    background: #111;
    color: white;
    padding: 80px 20px;
}

#resenas-pro h2 {
    text-align: center;
    font-size: 3em;
    margin-bottom: 50px;
    color: gold;
    text-shadow: 0 0 10px rgba(255,215,0,0.5);
}

                                                    /* GRID */
.lista-resenas {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

                                                    /* CARD */
.resena {
    display: flex;
    gap: 25px;
    background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
    padding: 25px;
    border-radius: 15px;
    align-items: center;

    border: 1px solid rgba(255,255,255,0.05);

    transition: all 0.3s ease;
}

                                                    /* HOVER PRO */
.resena:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 15px 40px rgba(0,0,0,0.8);
    border: 1px solid rgba(255,215,0,0.4);
}

                                                    /* IMAGEN */
.resena img {
    width: 110px;
    height: 110px;
    object-fit: contain;
    border-radius: 50%;
    border: 3px solid crimson;
    transition: 0.3s;
}

                                                    /* EFECTO IMAGEN */
.resena:hover img {
    border-color: gold;
    transform: scale(1.08);
}

                                                        /* INFO */
.resena .info {
    flex: 1;
}

.resena h3 {
    margin-bottom: 5px;
    font-size: 1.5em;
}

.resena span {
    display: block;
    font-size: 0.9em;
    color: #aaa;
    margin-bottom: 10px;
}

                                                        /* TEXTO */
.resena p {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 15px;
    color: #ddd;
}

                                                        /* BOTON */
.resena button {
    background: crimson;
    border-radius: 8px;
    padding: 8px 15px;
    width: auto;
    transition: 0.3s;
}

.resena button:hover {
    background: gold;
    color: black;
    transform: scale(1.05);
}

                                        /* ========================= */
                                                /* RESPONSIVE */
                                        /* ========================= */

@media (min-width: 901px) {
    .lista-resenas {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 901px) {
    .lista-resenas {
        grid-template-columns: repeat(3, 1fr);
    }

    .resena {
        flex-direction: column;
        text-align: center;
    }

    .resena img {
        margin-bottom: 15px;
    }
}


                                        /* ========================= */
                                            /* HERO RESEÑAS  */
                                        /* ========================= */

#hero-criticas {
    height: 100vh;
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.9)),
                url("../images/gandalf-fondo.png");
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow:hidden;
}

                                                /* CONTENEDOR */
#hero-criticas .overlay {
    max-width: 800px;
    padding: 20px;
}

                                                /* TITULO DORADO */
.titulo-epico {
    font-size: 4em;
    color: gold;
    text-shadow: 
        0 0 10px rgba(255,215,0,0.7),
        0 0 20px rgba(255,215,0,0.5),
        0 0 40px rgba(255,215,0,0.3);
    margin-bottom: 20px;

    animation: fadeInUp 1.2s ease;
}

                                                    /* TEXTO */
.texto-epico {
    font-size: 1.3em;
    color: #ddd;
    line-height: 1.6;

    animation: fadeInUp 1.6s ease;
}

                                                    /* ANIMACION */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

                                    /* ========================= */
                                            /* PERSONAJES */
                                    /* ========================= */

                                    
                                        /* ========================= */
                                                /* HERO FONDO PERSONAJES */
                                        /* ========================= */

#hero-compania {
    height: 100vh;
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.9)),
                url("../images/compania-anillo.jpg");
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

                                            /* CONTENEDOR */
#hero-compania .overlay {
    max-width: 800px;
    padding: 20px;
}

                                            /* TITULO DORADO */
.titulo-epico {
    font-size: 4em;
    color: gold;
    text-shadow: 
        0 0 10px rgba(255,215,0,0.7),
        0 0 20px rgba(255,215,0,0.5),
        0 0 40px rgba(255,215,0,0.3);
    margin-bottom: 20px;

    animation: fadeInUp 1.2s ease;
}

                                                /* TEXTO */
.texto-epico {
    font-size: 1.3em;
    color: #ddd;
    line-height: 1.6;

    animation: fadeInUp 1.6s ease;
}

                                                /* ANIMACION */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#personajes {
    background: #111;
    color: white;
    padding: 80px 20px;
}

#personajes h2 {
    text-align: center;
    font-size: 3em;
    margin-bottom: 50px;
    color: gold;
    text-shadow: 0 0 10px rgba(255,215,0,0.5);
}

                                                /* GRID */
.pers {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

                                                /* CARD */
.personaje {
    display: flex;
    gap: 25px;
    background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
    padding: 25px;
    border-radius: 15px;
    align-items: center;

    border: 1px solid rgba(255,255,255,0.05);

    transition: all 0.3s ease;
}

                                                /* HOVER PRO */
.personaje:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 15px 40px rgba(0,0,0,0.8);
    border: 1px solid rgba(255,215,0,0.4);
}

                                                /* IMAGEN */
.personaje img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid crimson;
    transition: 0.3s;
}

                                                /* EFECTO IMAGEN */
.personaje:hover img {
    border-color: gold;
    transform: scale(1.08);
}

                                                /* INFO */
.personaje .info {
    flex: 1;
}

.personaje h3 {
    margin-bottom: 5px;
    font-size: 1.5em;
}

.personaje span {
    display: block;
    font-size: 0.9em;
    color: #aaa;
    margin-bottom: 10px;
}

                                                /* TEXTO */
.personaje p {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 15px;
    color: #ddd;
}

                                                /* BOTON */
.personaje button {
    background: crimson;
    border-radius: 8px;
    padding: 8px 15px;
    width: auto;
    transition: 0.3s;
}

.personaje button:hover {
    background: gold;
    color: black;
    transform: scale(1.05);
}

                                        /* ========================= */
                                                /* RESPONSIVE */
                                        /* ========================= */

@media (min-width: 901px) {
    .pers {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 901px) {
    .pers {
        grid-template-columns: repeat(3, 1fr);
    }

    .personaje {
        flex-direction: column;
        text-align: center;
    }

    .personaje img {
        margin-bottom: 15px;
    }
}





                                                    /* ========================= */
                                                        /* NAV RESPONSIVE */
                                                    /* ========================= */

.nav-container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
}

                                                    /* BOTON HAMBURGUESA */

.menu-toggle{
    display:none;
    flex-direction:column;
    gap:6px;
    cursor:pointer;
    z-index:10001;
}

.menu-toggle span{
    width:28px;
    height:3px;
    background:gold;
    border-radius:10px;
    transition:0.3s;
}

                                                    /* ANIMACION X */

.menu-toggle.active span:nth-child(1){
    transform:rotate(45deg) translate(5px,6px);
}

.menu-toggle.active span:nth-child(2){
    opacity:0;
}

.menu-toggle.active span:nth-child(3){
    transform:rotate(-45deg) translate(6px,-7px);
}

                                                    /* MOBILE */

@media(max-width:900px){

    .menu-toggle{
        display:flex;
    }

    nav{
        position:absolute;
        top:80px;
        left:0;
        z-index: 99999;
        width:100%;

        background:rgba(0,0,0,0.97);

        backdrop-filter:blur(10px);

        max-height:0;
        overflow:hidden;

        transition:0.4s ease;

        border-bottom:1px solid rgba(255,215,0,0.2);
    }

    nav.active{
        max-height:500px;
    }

    nav ul{
        flex-direction:column;
        padding:25px 0;
        gap:20px;
    }

    nav ul li{
        width:100%;
        text-align:center;
    }

    nav ul li a{
        display:block;
        width:100%;
        padding:10px 0;
    }

    @media (max-width: 992px){

    header{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;

        z-index: 99999;
    }

    body{
        padding-top: 80px;
    }

}

                                    /* DESACTIVA DROPDOWN HOVER EN MOBILE */

    .dropdown-content{
        position:static;
        display:none;
        background:none;
        box-shadow:none;
        border:none;
    }

    .dropdown:hover .dropdown-content{
    display:block;
}

    .dropdown-content a{
        color:#aaa;
        font-size:0.95rem;
    }
}

                                                /*  NAV DESKTOP */

@media(min-width:901px){

    .nav-container{
        display:flex;
        justify-content:space-between;
        align-items:center;
        width:100%;
        gap:20px;
    }

    nav{
        margin-left:auto;
    }

    nav ul{
        gap:15px;
    }

    nav ul li a{
        padding-right:0;
        font-size:1rem;
    }

}

                                                        /* FIX MOBILE BLOQUES */

@media(max-width:768px){

    .flex,
    .flex.reverse{
        flex-direction:column;
    }

    .texto{
        width:100%;
        text-align:center;
    }

    .imagen{
        width:100%;
    }

    .imagen img{
        width:100%;
        height:auto;

        display:block;

        border-radius:15px;
    }

}

                                            /* ========================= */
                                                /* HERO RESPONSIVE */
                                            /* ========================= */

@media(max-width:768px){

    .titulo-epico{
        text-shadow:
        0 0 6px rgba(255,215,0,0.6),
        0 0 12px rgba(255,215,0,0.4);
    }

    .texto-epico{
        font-size:1rem;
        padding:0 20px;
    }

}

@media(max-width:768px){

    #hero-mapa,
    #hero-galeria,
    #hero-peliculas,
    #hero-contacto,
    #hero-criticas,
    #hero-compania{

        background-position:center center;

        padding:0 20px;
    }

}

#hero-galeria{
    overflow: hidden;
    padding: 0 20px;
}

#hero-galeria .overlay{
    width: 100%;
    max-width: 100%;
}

#hero-galeria .titulo-epico{
    font-size: 3.5em;
    word-break: break-word;
}

#hero-galeria .texto-epico{
    font-size: 1.3rem;
}
@media(max-width:768px){

    #hero-criticas{
        background-position:60% center;
    }

}

@media (max-width:768px){

    h2{
        font-size: 2.2em;
        line-height: 1.3;
        word-break: break-word;
    }

    .titulo-epico{
        font-size: 2.5em;
        line-height: 1.3;
        padding: 0 10px;
    }


    #imagenes h2,
    #personajes h2,
    #resenas-pro h2,
    .contacto-info h2{
        font-size: 2em;
        line-height: 1.2;
        text-align: center;
        padding: 0 10px;
    }
}
                                            /* ========================= */
                                                /* PELICULAS MOBILE */
                                            /* ========================= */

@media(max-width:768px){

    .peli-card{
        flex-direction:column;
        text-align:center;

        padding:20px;

        height:auto;
    }

    .peli-card img{
        width:100%;
        max-width:260px;

        height:auto;

        object-fit:cover;

        margin-bottom:15px;
    }

    .peli-card .info{
        width:100%;
    }

    .peli-card p{
        font-size:0.95rem;
        line-height:1.6;

        word-break:break-word;
    }

}

                                            /* ========================= */
                                                    /* MUSICA  */
                                            /* ========================= */
.music-player{
    position: fixed;
    bottom: 20px;
    right: 20px;

    display: flex;
    align-items: center;
    gap: 10px;

    background: rgba(0,0,0,0.9);

    border: 1px solid rgba(255,215,0,0.3);

    padding: 12px 18px;

    border-radius: 50px;

    backdrop-filter: blur(8px);

    z-index: 9999;
}

.music-player button{

    width: 40px;
    height: 40px;

    border-radius: 50%;
    border: none;

    background: gold;
    color: black;

    cursor: pointer;

    font-size: 1rem;
    font-weight: bold;

    transition: 0.3s;
}

.music-player button:hover{
    transform: scale(1.08);
}

.music-info{

    display: flex;
    flex-direction: column;
}

.music-info span{
    color: gold;
    font-size: 0.85rem;
}

@media (max-width: 768px){

    .music-player{
        width: 270px;
        padding: 10px;
        transform: scale(0.9);
    }

    .music-player h3{
        font-size: 0.9rem;
    }

    .music-player select,
    .music-player button{
        font-size: 0.8rem;
        padding: 6px;
    }

}


                                            /* ========================= */
                                                /* PARTICULAS HERO  */
                                            /* ========================= */

.particles{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    top: 0;
    left: 0;

    pointer-events: none;

    z-index: 1;
}

.particles canvas{
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    top: 0;
    left: 0;
}

#hero-mapa,
#hero-galeria,
#hero-peliculas,
#hero-compania,
#hero-criticas,
#hero-contacto{
    position: relative;
    overflow: hidden;
}

#hero-mapa .overlay,
#hero-galeria .overlay,
#hero-peliculas .overlay,
#hero-compania .overlay,
#hero-criticas .overlay,
#hero-contacto .overlay{
    position: relative;
    z-index: 2;
}