@import url('https://fonts.googleapis.com/css2?family=Contrail+One&display=swap');

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

/*SECCION del menu de navegacion*/
body {
    background: url("../img/zorroEnjaulado.png") no-repeat center bottom fixed;
    margin: 0;
    font-family: "Contrail One", sans-serif;
    background-size: cover;
    padding: 0;
    height: 100%;
    text-align: center;
}

ul {
    list-style: none;
}

.checkbtn{
    display: none;
}

#check{
    display: none;
}
.nav {
    background-color: transparent;
    text-align: center;
    margin: 20px 0;
}

.nav__list {
    margin: 0;
}

.nav__item {
    display: inline-block;
    margin-top: 0.5%;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.228);
    border-radius: 20px;
}

.nav__item:hover {
    background: linear-gradient(to right, white, purple);
}

.nav__link {
    color: rgb(0, 0, 0);
    text-decoration: none;
}

/*Utility clases*/

.container {
    margin: auto;
    max-width: 1300px;
    overflow: auto;
    padding: 0 20px;
}

.boton-volver {
    position: fixed;
    bottom: 20px;
    right: 30px;
    background-color: #e060d1;
    border: 1px solid orange;
    color: #000000;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    z-index: 2;
    font-weight: bold;
}

.boton-volver:hover {
    background-color: #0056b3;
}

/*main-header*/
.main-header {
    text-align: center;
}

.logo {
    width: 300px;
    padding: 20px 0px;
}

.box {
    box-sizing: border-box;
    margin: auto;
    min-width: 800px;
    width: 800px;
}

.box--img {
    height: 450px;
    filter: drop-shadow(0 20px 5px rgba(0, 0, 0, 0.378));
    position: relative;
    top: 100px;
    left: -430px;
}

.main-header>p {
    position: relative;
    background: linear-gradient(to right, black, orange);
    color: white;
    font-size: 24px;
    letter-spacing: 1px;
    border-radius: 10px;
    padding: 50px;
    text-align: justify;
    z-index: -1;
    top: -300px;
}

/*SECCION personajes Principales*/
#personajesPrincipales {
    background: url("../img/background.jpg") no-repeat center center fixed;
    min-height: 100vh;
    background-size: cover;
    text-align: center;
}

.personajesPrincipales--box {
    position: relative;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.container>h2 {
    text-align: center;
    font-size: 58px;
    margin: 40px 0;
    text-shadow: 0 1px 20px rgb(0, 0, 0);
    color: white;
}

.personajesPrincipales--column {
    max-width: 900px;
    width: 900px;
    margin: auto;
    overflow: hidden;
    padding-bottom: 150px;
}

/*--imagenes personajes*/
.imagenNaruto,
.imagenSakura,
.imagenSasuke,
.imagenKakashi,
.imagenJiraya,
.imagenItachi,
.imagenNagato,
.imagenObito {
    position: absolute;
    top: 0;
    z-index: 1;
    filter: drop-shadow(2px 12px 1px rgba(0, 0, 0, 0.471));
}

/*--Posicion Izquierda*/
.imagenNaruto {
    width: 200px;
    left: 20px;
    top: -100px;
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0, 1.04, .44, 1.17);
}

.imagenSakura {
    width: 150px;
    left: 60px;
    top: -100px;
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0, 1.04, .44, 1.17);
}

.imagenJiraya {
    width: 200px;
    left: 10px;
    top: -100px;
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0, 1.04, .44, 1.17);
}

.imagenNagato {
    width: 230px;
    left: 0;
    top: -40px;
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0, 1.04, .44, 1.17);
}

/*--Posicion Derecha*/
.imagenSasuke {
    width: 250px;
    left: 650px;
    top: -60px;
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0, 1.04, .44, 1.17);
}

.imagenKakashi {
    width: 200px;
    left: 650px;
    top: -60px;
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0, 1.04, .44, 1.17);
    padding: 30px;
}

.imagenItachi {
    width: 250px;
    left: 650px;
    top: -60px;
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0, 1.04, .44, 1.17);
    padding: 30px;
}

.imagenObito {
    width: 300px;
    left: 650px;
    top: -100px;
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0, 1.04, .44, 1.17);
    padding: 30px;
}

/*--HOVERS*/
/*--Posicion Izquierda*/
.imagenNaruto:hover {
    width: 250px;
    left: -10px;
}

.imagenSakura:hover {
    width: 200px;
    left: 50px;
}

.imagenJiraya:hover {
    width: 230px;
    left: 20px;
}

.imagenNagato:hover {
    width: 250px;
    left: 5px;
}

/*--Posicion Derecha*/
.imagenKakashi:hover {
    width: 220px;
    left: 670px;
}

.imagenSasuke:hover {
    width: 300px;
    left: 640px;
}

.imagenObito:hover {
    width: 320px;
    left: 640px;
}

.imagenItachi:hover {
    width: 300px;
    left: 640px;
}

/*--iconos de naturaleza de chakra*/
.flexbox {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    position: absolute;
    top: -30px;
    left: 220px;
}

.flex-item {
    margin: 0 1px;
}

.icon-element {
    width: 45px;
}

.icon-element:hover {
    width: 60px;
}

.personajesPrincipales--box>p {
    position: relative;
    background-color: rgba(238, 130, 238, 0.802);
    box-shadow: 0 0 10px black;
    border-radius: 100px;
    padding: 50px;
    margin: 200px 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.814);
    width: 600px;
    left: 150px;
    color: white;
}

/*SECCION historia*/
#historia {
    margin: 0;
    padding: -20000px;
}

.background {
    background: url("../img/fotohaeditada.png") no-repeat center center fixed;
    min-height: 100vh;
    background-size: cover;
}

.info-history {
    margin: 300px;
    text-shadow: 0px 0px 10px rgb(0, 0, 0);
    margin: 40px 200px;
    font-size: 24px;
    color: rgb(255, 255, 255);
    text-align: justify;
    letter-spacing: 1px;
    line-height: 1.5;
}

/*SECCION de jutsus y tecnicas*/
#jutsustecnicas {
    background: url("../img/itachiFondo.png") no-repeat right center fixed;
    background-size: cover;
}

.contenedor {
    background-color: rgb(255, 255, 255);
    box-shadow: 0 0 15px rgb(0, 0, 0);
    border-radius: 10px;
    padding: 15px;
    display: flex;
    align-items: center;
    margin: 50px 0;
}

.imagen1 {
    width: 200px;
    height: 200px;
    border-radius: 10px;
}

.imagen2 {
    width: 200px;
    height: 200px;
    background: url("https://staticg.sportskeeda.com/editor/2022/06/887c1-16565892147226-1920.jpg") no-repeat center center;
    background-size: cover;
    border-radius: 10px;
}

.imagen3 {
    width: 200px;
    height: 200px;
    background: url("https://staticg.sportskeeda.com/editor/2022/06/887c1-16565892147226-1920.jpg") no-repeat center center;
    background-size: cover;
    border-radius: 10px;
}

.contenido {
    flex: 1;
    padding: 0 20px;
}

/*Seccion de aldea y localización*/
#aldealocalizacion {
    background: url("../img/mapaAldeas.jpg") no-repeat center center fixed;
    background-size: cover;
    align-items: center;
}

.flexbox--aldea {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    overflow: auto;
}

.imagen-posterior>img {
    width: 500px;
    height: 500px;
    background: center center;
    border-radius: 15px;
}

.carta {
    width: 500px;
    height: 500px;
    position: relative;
    perspective: 1000px;
    margin: 50px;
    

}

.cara {
    width: 100%;
    height: 100%;
    position: absolute;
    transition: transform 0.6s;
    backface-visibility: hidden;
    filter: drop-shadow(0 10px 15px black);
}

.trasera {
    background-color: #422d2d;
    transform: rotateY(180deg);
    border-radius: 15px;
    overflow: auto;
}

.carta:hover .frontal {
    transform: rotateY(180deg);
}

.carta:hover .trasera {
    transform: rotateY(0deg);
}

.trasera>h2 {
    text-align: center;
    margin-top: 40px;
    margin-left: 20px;
    margin-right: 20px;
    text-shadow: 0 0 10px rgb(0, 0, 0);
    color: rgb(246, 246, 199);
    
}
.cara--trasera--contenedor{
    background-color: grey;
    border: 2px solid black;
}
.trasera>p {
    text-align: justify;
    margin: 20px 70px;
    color: rgb(255, 255, 255);
}

/*SECCION de galeria*/
#galeria {
    background: url("../img/fondoGaleria.webp") no-repeat center center fixed;
    background-size: cover;
}

.galeria {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.foto {
    flex: 1 0 450px;
    margin: 10px;
    overflow: hidden;
    filter: drop-shadow(0 0 15px black);
}

.foto img {
    width: 100%;
    height: auto;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.736);
}

.foto:hover {
    flex: 1 0 700px;
}

/*SECCION de pie de página*/
#mainfooter {
    margin: 100px;
    color: wheat;
}

.socialMedia {
}

.list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.item {
    margin: 0 30px 30px 30px;
}

.logo--rrss {
    width: 30px;
}

.logo--rrss:hover {
    width: 40px;
}

/* Media Queries */

/* Tablets */
@media (max-width: 1024px) {

    .container {
        margin: auto;
        max-width: 100%;
        overflow: auto;
        padding: 0 20px;
    }
.box--img{
    left: -40%;
    top: 300px;
}

    .nav{position: fixed;
        z-index: 3;
        right: 2%;
    }

    .main-header>p {
        margin: 15%;
    }

    .nav__list{
        position:fixed;
        width: 100%;
        height: 100vh;
        background-color: rgb(35, 27, 10);
        z-index: 3;
        top: 40px;
        left: 100%;
        text-align: center;
        transition: all .5s;
    }

    .nav__item{
        display: block;
        margin: 50px 0;
        line-height: 30px;
        background-color: transparent;
        
    }

    .nav__item a{
        font-size: 40px;
        color:white;
    }
    .nav__item:hover {
        background: linear-gradient(to right, rgba(18, 8, 8, 0.547), rgba(18, 8, 8, 0.547));
    }
    
    li a:hover, li a.active{
        background: none;
        color: rgb(255, 255, 255);
    }    

    #check:checked ~ ul{
        left: 0;
    }

    .checkbtn{
        display: block;
        left: -200px;
        position: static;
    }
    .box {
        min-width: 600px;
        width: 100%;
        flex-direction: row;
    }
    
    .box--img {
        height: 300px;
        right: 200px;
        position: relative;
    }

    
    .main-header>p {
        font-size: 20px;
        padding: 40px;
        top: -250px;
    }
    
    .personajesPrincipales--column {
        max-width: 700px;
        width: 100%;
    }

    .imagenNaruto, .imagenSakura {
        width: 18%;
        left: 0;
        top: 1%;
    }
    
    .imagenJiraya,.imagenNagato{
        width: 20%;
        left: 0;
        top: 1%;
    }

    .imagenSasuke, .imagenKakashi,.imagenObito,.imagenItachi{
        width: 23%;
        left: 80%;
        top: 10%;
    }

    .imagenNaruto:hover, .imagenSakura:hover, .imagenJiraya:hover, .imagenNagato:hover {
        width: 21%;
    }

    .imagenKakashi:hover, .imagenSasuke:hover, .imagenObito:hover, .imagenItachi:hover {
        width: 21%;
        left: 79%;
        top: 10%;
    }
    .flexbox {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        position: absolute;
        top: -30px;
        left: 180px;
    }
    
    .flex-item {
        margin: 0 1px;
    }
    
    .icon-element {
        width: 35px;
    }
    
    .icon-element:hover {
        width: 60px;
    }
    
    .personajesPrincipales--box>p {
        width: 500px;
        left: 100px;
        padding: 40px;
    }
}

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

    .nav{position: fixed;
        z-index: 3;
        right: 2%;
    }

    .nav__list{
        position:fixed;
        width: 100%;
        height: 100vh;
        background-color: rgb(35, 27, 10);
        z-index: 3;
        top: 40px;
        left: 100%;
        text-align: center;
        transition: all .5s;
    }

    .nav__item{
        display: block;
        margin: 50px 0;
        line-height: 30px;
        background-color: transparent;
        
    }

    .nav__item a{
        font-size: 40px;
        color:white;
    }
    .nav__item:hover {
        background: linear-gradient(to right, rgba(18, 8, 8, 0.547), rgba(18, 8, 8, 0.547));
    }
    
    li a:hover, li a.active{
        background: none;
        color: rgb(255, 255, 255);
    }    

    #check:checked ~ ul{
        left: 0;
    }

    .checkbtn{
        display: block;
        left: -200px;
        position: static;
    }

    .container {
        margin: auto;
        max-width: 100%;
        overflow: auto;
        padding: 0 20px;
    }
    
    .box {
        min-width: 100%;
        width: 100%;
    }
    
    .box--img {
        height: 250px;
        right: 10%;
    }
    
    .main-header>p {
        font-size: 18px;
        padding: 30px;
        top: -200px;
    }

    .main-header {
        margin: 1%;
    }
    
    .personajesPrincipales--column {
        max-width: 100%;
        width: 100%;
    }
    

    .imagenNaruto, .imagenSakura, .imagenSasuke, .imagenKakashi,.imagenObito,.imagenItachi, .imagenJiraya,.imagenNagato{
        width: 23%;
        left: 65%;
        top: -42%;
    }

    .imagenSakura{
        width: 15%;
    }

    .imagenKakashi,.imagenItachi{
        width: 40%;
        left: 60%;
        top: -60%;
    }

    .imagenNagato{
        width: 35%;
        left: 60%;
        top: -35%;
    }

    .imagenObito{
        width: 40%;
    }
    
    .personajesPrincipales--box>p {
        width: 98%;
        left: 1%;
        padding: 10%;
    }  
    /*--iconos de naturaleza de chakra*/
.flexbox {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    position: absolute;
    top: -30px;
    left: 10%
}

.flex-item {
    margin: 0 1px;
}

.icon-element {
    width: 20px;
}

.icon-element:hover {
    width: 25px;
}
    
    .info-history {
        margin: 20px;
        font-size: 18px;
    }

    
.foto {
    flex: 1 0 70%;
    margin: 10px;
    overflow: hidden;
    filter: drop-shadow(0 0 15px black);
}


.foto:hover {
    flex: 1 0 90%;
}
/*Fondos*/

body{
    background:radial-gradient(at 32.02901581974989% 7.481061257804833%, hsla(0, 100%, 50%, 1) 0%, hsla(0, 100%, 50%, 0) 100%), radial-gradient(at 88.75261415559117% 2.084325684549204%, hsla(30.11764705882353, 100%, 50%, 1) 0%, hsla(30.11764705882353, 100%, 50%, 0) 100%), radial-gradient(at 44.21246931216011% 37.953848829562034%, hsla(0, 100%, 50%, 1) 0%, hsla(0, 100%, 50%, 0) 100%), radial-gradient(at 29.70827255779148% 49.13059473077638%, hsla(30.11764705882353, 100%, 50%, 1) 0%, hsla(30.11764705882353, 100%, 50%, 0) 100%), radial-gradient(at 0.8555923672991517% 88.27152075416724%, hsla(0, 100%, 50%, 1) 0%, hsla(0, 100%, 50%, 0) 100%), radial-gradient(at 12.922232805819311% 75.78516629175041%, hsla(30.11764705882353, 100%, 50%, 1) 0%, hsla(30.11764705882353, 100%, 50%, 0) 100%), radial-gradient(at 27.133765497038986% 45.34553534396505%, hsla(0, 100%, 50%, 1) 0%, hsla(0, 100%, 50%, 0) 100%), radial-gradient(at 4.936463777722977% 10.549417781105042%, hsla(30.11764705882353, 100%, 50%, 1) 0%, hsla(30.11764705882353, 100%, 50%, 0) 100%), radial-gradient(at 63.383695399288996% 98.44265616151021%, hsla(0, 100%, 50%, 1) 0%, hsla(0, 100%, 50%, 0) 100%), radial-gradient(at 8.663549546292382% 98.98772791070361%, hsla(30.11764705882353, 100%, 50%, 1) 0%, hsla(30.11764705882353, 100%, 50%, 0) 100%), radial-gradient(at 25.58810676275377% 28.826705912598115%, hsla(0, 100%, 50%, 1) 0%, hsla(0, 100%, 50%, 0) 100%), radial-gradient(at 98.21349953130259% 76.8469408539216%, hsla(30.11764705882353, 100%, 50%, 1) 0%, hsla(30.11764705882353, 100%, 50%, 0) 100%);
}
#personajesPrincipales {
    background:radial-gradient(at 76.10149283959036% 2.8846533047677148%, hsla(337.89473684210526, 77.37556561085974%, 56.666666666666664%, 1) 0%, hsla(337.89473684210526, 77.37556561085974%, 56.666666666666664%, 0) 100%), radial-gradient(at 11.683148259485742% 22.354133817559706%, hsla(259.4318181818182, 98.87640449438203%, 65.09803921568627%, 1) 0%, hsla(259.4318181818182, 98.87640449438203%, 65.09803921568627%, 0) 100%), radial-gradient(at 69.01323934129397% 31.66466177606938%, hsla(257.7931034482759, 68.07511737089203%, 41.764705882352935%, 1) 0%, hsla(257.7931034482759, 68.07511737089203%, 41.764705882352935%, 0) 100%), radial-gradient(at 0.18231274800423192% 95.4883430509747%, hsla(337.89473684210526, 77.37556561085974%, 56.666666666666664%, 1) 0%, hsla(337.89473684210526, 77.37556561085974%, 56.666666666666664%, 0) 100%), radial-gradient(at 60.40837825019114% 78.85229544680858%, hsla(259.4318181818182, 98.87640449438203%, 65.09803921568627%, 1) 0%, hsla(259.4318181818182, 98.87640449438203%, 65.09803921568627%, 0) 100%), radial-gradient(at 51.456230144162504% 4.061398061585275%, hsla(257.7931034482759, 68.07511737089203%, 41.764705882352935%, 1) 0%, hsla(257.7931034482759, 68.07511737089203%, 41.764705882352935%, 0) 100%), radial-gradient(at 0.9057122809945417% 32.13668891817386%, hsla(337.89473684210526, 77.37556561085974%, 56.666666666666664%, 1) 0%, hsla(337.89473684210526, 77.37556561085974%, 56.666666666666664%, 0) 100%), radial-gradient(at 73.01009377310595% 58.769702017847%, hsla(259.4318181818182, 98.87640449438203%, 65.09803921568627%, 1) 0%, hsla(259.4318181818182, 98.87640449438203%, 65.09803921568627%, 0) 100%), radial-gradient(at 97.46271440774514% 8.754349168502163%, hsla(257.7931034482759, 68.07511737089203%, 41.764705882352935%, 1) 0%, hsla(257.7931034482759, 68.07511737089203%, 41.764705882352935%, 0) 100%), radial-gradient(at 27.33935074380979% 41.81391336167031%, hsla(337.89473684210526, 77.37556561085974%, 56.666666666666664%, 1) 0%, hsla(337.89473684210526, 77.37556561085974%, 56.666666666666664%, 0) 100%);
}

.background {
    background:radial-gradient(at 40.18119707935553% 9.153913493255716%, hsla(212.30769230769232, 65.00000000000001%, 31.372549019607842%, 1) 0%, hsla(212.30769230769232, 65.00000000000001%, 31.372549019607842%, 0) 100%), radial-gradient(at 48.19333039831517% 80.15307316627103%, hsla(203.21428571428572, 75.00000000000001%, 43.92156862745098%, 1) 0%, hsla(203.21428571428572, 75.00000000000001%, 43.92156862745098%, 0) 100%), radial-gradient(at 85.93079699925129% 21.136084975165858%, hsla(215.2941176470588, 29.824561403508774%, 44.70588235294118%, 1) 0%, hsla(215.2941176470588, 29.824561403508774%, 44.70588235294118%, 0) 100%), radial-gradient(at 4.793555037545727% 7.48270135832767%, hsla(212.30769230769232, 65.00000000000001%, 31.372549019607842%, 1) 0%, hsla(212.30769230769232, 65.00000000000001%, 31.372549019607842%, 0) 100%), radial-gradient(at 8.548197684895076% 14.910581906196697%, hsla(203.21428571428572, 75.00000000000001%, 43.92156862745098%, 1) 0%, hsla(203.21428571428572, 75.00000000000001%, 43.92156862745098%, 0) 100%), radial-gradient(at 69.38506642755237% 8.711244990426014%, hsla(215.2941176470588, 29.824561403508774%, 44.70588235294118%, 1) 0%, hsla(215.2941176470588, 29.824561403508774%, 44.70588235294118%, 0) 100%), radial-gradient(at 90.54529420043838% 59.29544071216854%, hsla(212.30769230769232, 65.00000000000001%, 31.372549019607842%, 1) 0%, hsla(212.30769230769232, 65.00000000000001%, 31.372549019607842%, 0) 100%), radial-gradient(at 31.08889378023687% 86.09770329188522%, hsla(203.21428571428572, 75.00000000000001%, 43.92156862745098%, 1) 0%, hsla(203.21428571428572, 75.00000000000001%, 43.92156862745098%, 0) 100%), radial-gradient(at 12.802182309892519% 18.102222636656773%, hsla(215.2941176470588, 29.824561403508774%, 44.70588235294118%, 1) 0%, hsla(215.2941176470588, 29.824561403508774%, 44.70588235294118%, 0) 100%), radial-gradient(at 57.624931728502624% 67.18918189009231%, hsla(212.30769230769232, 65.00000000000001%, 31.372549019607842%, 1) 0%, hsla(212.30769230769232, 65.00000000000001%, 31.372549019607842%, 0) 100%), radial-gradient(at 31.138455093660646% 18.646161918673386%, hsla(203.21428571428572, 75.00000000000001%, 43.92156862745098%, 1) 0%, hsla(203.21428571428572, 75.00000000000001%, 43.92156862745098%, 0) 100%);
}

#jutsustecnicas {
    background-image: radial-gradient(at 97.02544131749515% 87.22920028753545%, hsla(0, 0%, 0%, 1) 0%, hsla(0, 0%, 0%, 0) 100%), radial-gradient(at 85.64213907342923% 63.441148690603974%, hsla(0, 100%, 30%, 1) 0%, hsla(0, 100%, 30%, 0) 100%), radial-gradient(at 54.505970531375894% 17.673861868577887%, hsla(0, 100%, 18.03921568627451%, 1) 0%, hsla(0, 100%, 18.03921568627451%, 0) 100%), radial-gradient(at 37.258584681648884% 19.33166358755951%, hsla(0, 0%, 0%, 1) 0%, hsla(0, 0%, 0%, 0) 100%), radial-gradient(at 22.142959484162517% 20.09388888159296%, hsla(0, 100%, 30%, 1) 0%, hsla(0, 100%, 30%, 0) 100%), radial-gradient(at 50.220653312253496% 0.7798577922809136%, hsla(0, 100%, 18.03921568627451%, 1) 0%, hsla(0, 100%, 18.03921568627451%, 0) 100%), radial-gradient(at 16.429551793881615% 3.655759550694704%, hsla(0, 0%, 0%, 1) 0%, hsla(0, 0%, 0%, 0) 100%), radial-gradient(at 72.08004668243149% 61.40531950426011%, hsla(0, 100%, 30%, 1) 0%, hsla(0, 100%, 30%, 0) 100%), radial-gradient(at 85.70654681757863% 98.08565802388345%, hsla(0, 100%, 18.03921568627451%, 1) 0%, hsla(0, 100%, 18.03921568627451%, 0) 100%);
}

#aldealocalizacion {
    background-image: radial-gradient(at 97.02544131749515% 87.22920028753545%, hsla(123.75, 100%, 21.96078431372549%, 1) 0%, hsla(123.75, 100%, 21.96078431372549%, 0) 100%), radial-gradient(at 85.64213907342923% 63.441148690603974%, hsla(178.8235294117647, 100%, 30%, 1) 0%, hsla(178.8235294117647, 100%, 30%, 0) 100%), radial-gradient(at 54.505970531375894% 17.673861868577887%, hsla(0, 0%, 0%, 1) 0%, hsla(0, 0%, 0%, 0) 100%), radial-gradient(at 37.258584681648884% 19.33166358755951%, hsla(123.75, 100%, 21.96078431372549%, 1) 0%, hsla(123.75, 100%, 21.96078431372549%, 0) 100%), radial-gradient(at 22.142959484162517% 20.09388888159296%, hsla(178.8235294117647, 100%, 30%, 1) 0%, hsla(178.8235294117647, 100%, 30%, 0) 100%), radial-gradient(at 50.220653312253496% 0.7798577922809136%, hsla(0, 0%, 0%, 1) 0%, hsla(0, 0%, 0%, 0) 100%), radial-gradient(at 16.429551793881615% 3.655759550694704%, hsla(123.75, 100%, 21.96078431372549%, 1) 0%, hsla(123.75, 100%, 21.96078431372549%, 0) 100%), radial-gradient(at 72.08004668243149% 61.40531950426011%, hsla(178.8235294117647, 100%, 30%, 1) 0%, hsla(178.8235294117647, 100%, 30%, 0) 100%), radial-gradient(at 85.70654681757863% 98.08565802388345%, hsla(0, 0%, 0%, 1) 0%, hsla(0, 0%, 0%, 0) 100%);
}
#galeria {
    background-image: radial-gradient(at 69.78657667891387% 38.76926882619613%, hsla(0, 0%, 30.19607843137255%, 1) 0%, hsla(0, 0%, 30.19607843137255%, 0) 100%), radial-gradient(at 34.86399782792204% 33.729129041576236%, hsla(170.00000000000003, 3.2608695652173956%, 36.07843137254902%, 1) 0%, hsla(170.00000000000003, 3.2608695652173956%, 36.07843137254902%, 0) 100%), radial-gradient(at 17.459424066970854% 51.180884226226134%, hsla(0, 0%, 0%, 1) 0%, hsla(0, 0%, 0%, 0) 100%), radial-gradient(at 98.24040377644667% 31.23908802041577%, hsla(0, 0%, 30.19607843137255%, 1) 0%, hsla(0, 0%, 30.19607843137255%, 0) 100%), radial-gradient(at 41.70901970205703% 30.847644119622885%, hsla(170.00000000000003, 3.2608695652173956%, 36.07843137254902%, 1) 0%, hsla(170.00000000000003, 3.2608695652173956%, 36.07843137254902%, 0) 100%), radial-gradient(at 63.37991071927105% 46.411453682889814%, hsla(0, 0%, 0%, 1) 0%, hsla(0, 0%, 0%, 0) 100%), radial-gradient(at 23.130951707635283% 75.21667181414003%, hsla(0, 0%, 30.19607843137255%, 1) 0%, hsla(0, 0%, 30.19607843137255%, 0) 100%), radial-gradient(at 99.061285915308% 77.77141330177739%, hsla(170.00000000000003, 3.2608695652173956%, 36.07843137254902%, 1) 0%, hsla(170.00000000000003, 3.2608695652173956%, 36.07843137254902%, 0) 100%), radial-gradient(at 51.53985717530669% 2.6639974475978656%, hsla(0, 0%, 0%, 1) 0%, hsla(0, 0%, 0%, 0) 100%), radial-gradient(at 35.91007890225868% 19.26307376933245%, hsla(0, 0%, 30.19607843137255%, 1) 0%, hsla(0, 0%, 30.19607843137255%, 0) 100%);
}

}

@media (max-width: 600px){
    .imagen-posterior>img {
        width: 95%;
        background: center center;
        border-radius: 15px;
    }
    
    .carta {
        width: 500px;
        height: 600px;
        position: relative;
        perspective: 1000px;
        margin: 50px;
        word-wrap: break-word;
    }
    
    .cara {
        width: 100%;
        height: 100%;
        position: absolute;
        transition: transform 0.6s;
        backface-visibility: hidden;
        filter: drop-shadow(0 10px 15px black);
    }
    
    .trasera {
        background-color: #422d2d;
        transform: rotateY(180deg);
        border-radius: 15px;
        word-wrap: break-word;
    }
    
    .carta:hover .frontal {
        transform: rotateY(180deg);
    }
    
    .carta:hover .trasera {
        transform: rotateY(0deg);
    }
    
    .trasera>h2 {
        text-align: center;
        margin-top: 40px;
        margin-left: 20px;
        margin-right: 20px;
        text-shadow: 0 0 10px rgb(0, 0, 0);
        color: rgb(246, 246, 199);
        
    }
    
    .trasera>p {
        text-align: justify;
        margin: 20px 70px;
        color: rgb(255, 255, 255);
        
    }
}

@media (max-width: 500px){
    .carta {
        width: 500px;
        height: 800px;
        position: relative;
        perspective: 1000px;
        margin: 50px;
        word-wrap: break-word
        
    }

    .trasera>p {
        text-align: justify;
        margin: 10px 20px;
        color: rgb(255, 255, 255);
        
    }
    
}