* {
    margin: 0;
}

html {
    scroll-behavior: smooth;
}

@font-face {
    font-family: "nata-sans";
    src: url(fonts/Nata_Sans/NataSans-VariableFont_wght.ttf)
}

@font-face {
    font-family: "playwriteustrad";
    src: url(fonts/Playwrite_US_Trad/PlaywriteUSTrad-VariableFont_wght.ttf)
}

/*LA PORTADA*/

header {
    background: linear-gradient(rgb(14, 9, 22), rgb(24, 4, 78));
    /*degradado*/
}

.fondoportada {
    height: 460px;
}

.portada {
    position: relative;
    /* para que flote el resto pero que quede quieto*/
    overflow: hidden;
    /* Corta lo que se sale del borde */
}

.portadaletras img {
    width: 650px;
    position: absolute;
    /* para que flote pues y lo muevas */
    top: 0%;
    left: 19%;
    /* separa borde izquierdo */
    z-index: 0;
}

.portadapj img {
    width: 450px;
    height: auto;
    top: 0%;
    margin-left: 52%;
    position: absolute;
    z-index: 1;
}

.viga img {

    display: block;
}

/*ABOUT ME*/



@keyframes nubesnoche {
    0% {
        transform: translateX(-50vw);
        /* empieza fuera de la pantalla */
    }

    to {
        transform: translateX(200vw);
        /* hasta el final de la pantalla */
    }
}

.nube1 img {
    animation: 30s linear 0s infinite running nubesnoche;
    width: 400px;
    height: auto;
    animation-delay: -6s;
    margin-left: 50%;
    margin-top: 10%;
}

.nube2 img {
    animation: 31s linear 0s infinite running nubesnoche;
    width: 600px;
    height: auto;
    animation-delay: -0s;
    margin-left: -300px;

}

.nube3 img {
    animation: 29s linear 0s infinite running nubesnoche;
    width: 200px;
    height: auto;
    animation-delay: -12s;
}

.nube4 img {
    animation: 30s linear 0s infinite running nubesnoche;
    width: 700px;
    height: auto;
    animation-delay: -24s;
    margin-left: -500px;
}

.nube5 img {
    animation: 30s linear 0s infinite running nubesnoche;
    width: 300;
    height: auto;
    animation-delay: -8s;
    margin-left: -300px;
}


.aboutme {

    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;

}

.aboutmecielo {
    background: linear-gradient(rgb(23, 14, 76), rgb(54, 33, 178));
    height: 1317px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.nubesnoche {
    position: absolute;
    z-index: 1;
}

.gigantografia {
    position: absolute;
    z-index: 19;
    width: 720px;
    height: 400px;
    background: radial-gradient(rgb(195, 255, 54), rgb(146, 207, 3));
    margin-left: 36.5%;
    margin-top: 7%;
    font-family: nata-sans;
    border: 18px solid rgb(10, 16, 56);
    color: #0A1038;

}

.intro {
    display: flex;
    flex-direction: row;
    padding: 30px;
    padding-left: 60px;
    padding-right: 60px;
    gap: 20px;
    padding-bottom: 10px;


}

.introtexto {
    line-height: 1.3;
}

.gigantofila2 {
    display: flex;
    flex-direction: row;
    padding-left: 60px;
    padding-right: 60px;
}

.presentacion {
    text-align: center;
    margin-left: 25%;
    line-height: 1.5;
}

.destacado{
    font-weight: bolder;
}

.contacto {
    display: flex;
    flex-direction: row;
    padding-left: 60px;
    padding-right: 60px;
    gap: 40px;

}

.contactotexto {
    display: flex;
    justify-content: flex-start;
    margin-left: 58px;
    margin-bottom: 10px;
    margin-top: -10px;
    font-weight: bolder;
}

.yt{
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #0C1427;
    transition: color 1s ease;
    transition: background 1s ease;
}

.yt:hover, .instagram:hover {
    color: #ffffff;
    background: radial-gradient(#6bc900e1, #0c142700, #0c142700);
}

.instagram{
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #0C1427;
    transition: color 0.3s ease;
    transition: background 0.3s ease;
}

.programastexto {
    font-weight: bolder;
    padding: 0%;
    margin: none;
}


.about {
    font-family: nata-sans;
    color: rgb(157, 213, 27);
    font-weight: bolder;
    font-size: 60px;
    margin-left: 72%;
}

.me1 {
    position: absolute;
    font-family: playwriteustrad;
    color: rgb(222, 29, 174);
    font-weight: bolder;
    font-size: 60px;
    margin-left: 81%;

}

.me2 {
    position: absolute;
    font-family: playwriteustrad;
    color: rgb(255, 119, 221);
    font-weight: lighter;
    font-size: 60px;
    margin-left: 81%;
    filter: blur(2px);
}

.aboutmetitulo {
    position: absolute;
    z-index: 20;
    width: 100%;
    line-height: 0.3;
    margin-top: 6%;
}

.poste1 {
    position: absolute;
    height: 150px;
    width: 40px;
    z-index: 2;
    background: linear-gradient(rgb(14, 9, 22), rgb(24, 4, 78));
    margin-top: 38%;
    margin-left: 40%;
}

.poste2 {
    position: absolute;
    height: 150px;
    width: 40px;
    z-index: 2;
    background: linear-gradient(rgb(14, 9, 22), rgb(24, 4, 78));
    margin-top: 38%;
    margin-left: 87%;
}


.barrotefondo {
    position: absolute;
    z-index: 5;
    margin-top: 43%;

}

.edificio {
    position: absolute;
    z-index: 6;
    margin-top: 47%;

}

.elpiso {
    position: absolute;
    z-index: 7;
    margin-top: 70%;

}

.barrotesgrandes {
    position: absolute;
    z-index: 8;
    margin-top: 50%;

}

.cartel {
    position: absolute;
    z-index: 9;
    margin-top: 50%;

}


.lampara {
    position: absolute;
    z-index: 10;
    margin-top: 10%;

}

.motiontitulo {
    z-index: 11;
    margin-top: 90%;
    margin-left: 38%;
    position: absolute;
    font-family: nata-sans;
    color: rgb(47, 207, 224);
    font-weight: bolder;
    font-size: 40px;
}

.textoporfo {
    position: absolute;
    z-index: 11;
    margin-top: 54%;
    margin-left: 20%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;

}

.portafolio {
    font-family: nata-sans;
    color: rgb(47, 207, 224);
    font-weight: bolder;
    font-size: 40px;
}

.motion {
    font-family: nata-sans;
    color: rgb(157, 213, 27);
    font-weight: normal;
    font-size: 20px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;

}

.ilustracion {
    font-family: nata-sans;
    color: rgb(157, 213, 27);
    font-weight: normal;
    font-size: 20px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
}

.animacion {
    font-family: nata-sans;
    color: rgb(157, 213, 27);
    font-weight: normal;
    font-size: 20px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
}

.contacto2 {
    font-family: nata-sans;
    color: rgb(157, 213, 27);
    font-weight: normal;
    font-size: 20px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
}

.motion:hover, .ilustracion:hover, .animacion:hover, .contacto2:hover {
    color: #6BC9FF;
}

.separador {
    width: 100%;
    height: 30px;
    background-color: rgb(10, 16, 56);
    border-top: 9px solid;
    border-bottom: 9px solid;
    border-color: rgb(54, 33, 178);
    z-index: 21;
}


/*MOTION*/
.motiongraphics {
    overflow: hidden;
    position: relative;

}

.oficina {
    background: linear-gradient(rgb(31, 17, 105), rgb(126, 40, 206));
    height: 600px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.nubesoficina {
    position: absolute;

}

@keyframes nubesoficina {
    0% {
        transform: translateX(-50vw);
    }

    to {
        transform: translateX(200vw);
    }
}

.cloud1 img {
    animation: 30s linear 0s infinite running nubesoficina;
    width: 400px;
    height: auto;
    animation-delay: -6s;
    margin-left: 50%;
    margin-top: 10%;
}

.cloud2 img {
    animation: 31s linear 0s infinite running nubesoficina;
    width: 300px;
    height: auto;
    animation-delay: -0s;
    margin-left: -300px;

}

.cloud3 img {
    animation: 29s linear 0s infinite running nubesoficina;
    width: 600px;
    height: auto;
    animation-delay: -12s;
}

.cloud4 img {
    animation: 34s linear 0s infinite running nubesoficina;
    width: 200px;
    height: auto;
    animation-delay: -24s;
    margin-left: -500px;
}


.ventanal {
    position: absolute;
    margin-top: -2%;

}

.constructora {
    position: absolute;
    user-select: none;
    margin-left: 6.6%;
    margin-top: 5%;
}

.pantalla {
    position: absolute;
    margin-left: 6%;


}

.director img {
    position: absolute;
    width: 450px;
    height: auto;
    margin-left: 60%;
    margin-top: 5%;
}

.dialogo {
    position: relative;
    margin-left: 60%;
    margin-top: 4.5%;
}

.dialogo img {
    position: absolute;
    z-index: 1;


}

.dialogotexto {
    position: absolute;
    z-index: 2;
    margin-left: 32px;
    margin-right: 32px;
    margin-top: 30px;
    font-family: nata-sans;
    color: rgb(23, 14, 76);
    font-weight: normal;
    font-size: 15px;

}

.portafoliopublicidad img {
    margin-top: -2px;
    overflow: hidden;
    width: 1351px;
}


.motionvideopared {
    background-color: rgb(31, 17, 105);
    height: 600px;
    width: 100%;
    position: relative;
    overflow: hidden;

}

.motionvideos {
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: -40%;
    justify-content: center;
    width: 100%;
    height: auto;
}

.expo iframe,
.candado iframe,
.idea iframe {
    pointer-events: none;
    user-select: none;
    padding-left: 10px;
    padding-bottom: 10px;
    width: 400px;
    height: 225px;

}


/*Tienda ilustracion*/


.pareddeladrillo {
    background: linear-gradient(#153075, #081536);
    height: 1300px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.ilustraciones {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 5%;
    display: flex;
    justify-content: center;

}

.ilutitulo {
    position: absolute;
    color: #081536;
    display: flex;
    margin-left: 43%;
    font-weight: bolder;
    font-family: nata-sans;
    z-index: 4;
    margin-top: 200px;
    font-size: 40px;
}

.are-u-there,
.gemma,
.duo,
.lesbians,
.rocio,
.Millen {
    margin: 1%;
}

.are-u-there img,
.Millen img {
    width: 250px;
    height: 350px;
    object-fit: cover;
}

.gemma img,
.rocio img {
    width: 350px;
    height: auto;
    object-fit: cover;
}

.duo img,
.lesbians img {
    width: 250px;
    height: 350px;
    object-fit: cover;
}

.ladrillos img {
    width: 1000px;
    height: auto;

}

.ladrillos {
    display: flex;
    justify-content: center;
}

.fondoilu {
    position: absolute;
    width: 100%;
    height: 1000px;
    background-color: #08095a;
    z-index: -1;
    overflow: hidden;

}


.album {
    position: absolute;
    z-index: 1;
    font-family: nata-sans;
    font-weight: bolder;
    font-size: 30px;
    display: flex;
    margin-left: 175px;
    margin-top: -7px;
}

.conan {
    position: absolute;
    z-index: 2;
    color: rgb(157, 213, 27);
    font-weight: lighter;
    font-family: playwriteustrad;
    font-size: 30px;
    display: flex;
    margin-left: 155px;
    margin-top: 10px;

}

.conan .g {
    font-size: 40px;
    margin-top: -10px;
    font-weight: lighter;
}

.infoconan p {
    margin-top: 70px;
    font-family: nata-sans;
    color: rgb(255, 255, 255);
    font-weight: normal;
    font-size: 15px;
    position: absolute;
    z-index: 2;
    width: 350px;
}

.fanarttitulo {
    color: rgb(157, 213, 27);
    font-weight: bolder;
    font-family: nata-sans;
    font-size: 40px;
    margin-top: 3%;
    margin-left: 20%;
    padding: 0;
}

.carrouselconan {
    position: absolute;
    z-index: 3;
}

.fanartconan {
    position: absolute;
    display: flex;
    flex-direction: row;
    margin-top: 2.5%;


}

.infoconan {
    position: absolute;
    z-index: 3;
    width: 300px;
    height: 200px;
    background-color: #1e1cb1;
    padding: 3%;
    padding-top: 2%;
    padding-right: 12%;
    display: flex;
    margin-left: 65%;
    margin-top: 0%;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    text-align: right;
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);

}

.conankidkrow,
.conansuperache,
.conanfoundheaven,
.conanwishbone {
    width: 200px;
    height: 200px;
    display: flex;
    flex-direction: row;
    margin-left: 3%;


}

.conankidkrow img,
.conansuperache img,
.conanfoundheaven img,
.conanwishbone img {
    width: 210px;
    height: 210px;
    display: flex;
    flex-direction: row;
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);

}

.carrouselpjs {
    margin-top: 400px;
}

/*Segundo carrousel*/

.disenodepj {
    color: rgb(157, 213, 27);
    font-weight: bolder;
    font-family: nata-sans;
    font-size: 40px;
    margin-top: 20%;
    margin-left: 50%;
    padding: 0;
}

.carrouselpjs {
    align-items: flex-start;
    display: flex;
    flex-direction: row;
    position: relative;
    z-index: 3;
    margin-top: 30px;
    padding-left: 5%;
    gap: 20px;
}

.infopjs {
    flex-shrink: 0;
    width: 400px;
    height: auto;
    min-height: 220px;
    background-color: #1e1cb1;
    padding: 25px;
    border-radius: 20px;
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 5;
    text-align: left;
    margin-left: -100px;
    padding-left: 110px;
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
}

.el {
    font-family: nata-sans;
    font-weight: bolder;
    font-size: 30px;
    color: black;
    text-align: left;
    margin-left: 20px;
}

.circo {
    color: rgb(157, 213, 27);
    font-family: playwriteustrad;
    font-weight: lighter;
    font-size: 30px;
    text-align: left;
    margin-top: -10px;
}

.infopjs p {
    margin-top: 20px;
    font-family: nata-sans;
    color: white;
    font-size: 15px;
    line-height: 1.4;
}

.procesopjs {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 15px;
    padding-bottom: 20px;
    margin-left: -80px;

}

.procesopjs img {
    width: 210px;
    height: 210px;
    object-fit: cover;
    border-radius: 5px;
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.moodboard,
.boceto,
.circus,
.ocs {
    width: 200px;
    height: 200px;
    display: flex;
    flex-direction: row;
    margin-left: 1%;
    margin-top: 30px;


}

/*ANIMACION*/

.animaciontitulo {
    position: absolute;
    color: rgb(157, 213, 27);
    display: flex;
    margin-left: 43%;
    font-weight: bolder;
    font-family: nata-sans;
    z-index: 20;
    margin-top: 800px;
    font-size: 40px;

}

.caneria {
    margin-top: 700px;
    position: relative;
    z-index: 3;
}

.caneria img {
    width: 100%;

}

.paredsubte {
    z-index: 2;
    margin-top: -140px;
    padding-top: 2px;
    position: relative;
    width: 100%;
    height: 790px;
    background: radial-gradient(#6BC9FF, #404799);
    overflow: hidden;

}

.guess {
    display: flex;
    flex-direction: row;
    margin-left: 10%;
    margin-top: 13%;
}

.proyectoguess {
    background: linear-gradient(#D81A9F, #D327DF);
    width: 460px;
    height: 100px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: nata-sans;
    font-weight: bolder;
    font-size: 40px;
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
}

.textoguess {
    width: 400px;
    height: 150px;
    background-color: #4887e4;
    padding: 30px;
    font-family: nata-sans;
    margin-top: 20px;
    border-radius: 20px;
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
    font-size: 15px;
    justify-content: center;
    text-align: center;

}

.creditos {
    color: #081536;
    font-weight: bolder;

}

.gue {
    color: rgb(255, 255, 255);
}

.videoguess {
    pointer-events: none;
    user-select: none;
    padding-left: 10px;
    padding-bottom: 10px;
    width: 400px;
    height: 225px;
}

.videoguess iframe {

    width: 570px;
    height: 320px;
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
    border: 15px solid #081536;
}

.banquito {
    position: absolute;
    margin-left: 50%;
    margin-top: 4%;
    z-index: 2;
}

.piso {
    width: 100%;
    height: 150px;
    background: linear-gradient(#0C1427, #272857);
    margin-top: 10%;
    z-index: 1;
}

.linea {
    position: absolute;
    width: 100%;
    height: 20px;
    background: linear-gradient(#D81A9F, #D327DF);
    margin-top: 8%;
}

footer {
    padding-top: 40%;
    width: 100%;
    height: 1400px;
    background: linear-gradient(#0C1427, #0E172E, #0E172E, #182955);
    position: relative;
    overflow: hidden;
}

.procesodeguess {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    margin-top: -400px;
    margin-bottom: 500px;
}

.miproceso {
    position: absolute;
    font-family: playwriteustrad;
    color: white;
    font-weight: lighter;
    font-size: 40px;
    margin-right: 40%;
    margin-top: -5%;
    z-index: 3;
}

.cine {
    position: absolute;
    z-index: 2;

}

.gurl iframe {
    position: absolute;
    border-radius: 10px;
    width: 470px;
    height: 280px;
    aspect-ratio: 16 / 9;
    display: flex;
    border: none;
    z-index: 3;
    margin-top: px;
    margin-left: 64%;
}

.contacto3 {
    display: flex;
    justify-content: center;
    gap: 200px;
    margin-top: 3%;
}

.mano img {
    width: 80%;
    height: auto;
}

.footredes {
    margin-top: 3%;
    max-width: 30%;
}

.ytverde {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.igverde {
    margin-top: 15%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.ytverde img{
    width: 70px;
    height: auto;
}

.igverde img{
    width: 70px;
    height: auto;
}

.ytv {
    font-family: playwriteustrad;
    color: white;
    font-weight: lighter;
    font-size: 40px;

}

.igv {
    font-family: playwriteustrad;
    color: white;
    font-weight: lighter;
    font-size: 40px;
}

.contacto-container {
    display: flex;
    justify-content: center;
}

.formulario-box {
    background-color: #1D1A6C;
    /* El azul de tus otros bloques */
    padding: 40px;
    border-radius: 30px;
    width: 100%;
    max-width: 800px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fila-input {
    display: flex;
    gap: 20px;
}

.campo,
.campo-full {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
}

label {
    color: white;
    font-family: 'nata-sans', sans-serif;
    font-weight: bold;
    font-size: 14px;
}


input,
select,
textarea {
    background-color: #081536;
    border: none;
    border-radius: 20px;
    padding: 15px 20px;
    color: #9b5dfd;
    font-family: 'nata-sans', sans-serif;
    outline: none;
}

textarea {
    height: 150px;
    resize: none;
}


.boton-enviar {
    background-color: #e619a1;
    color: white;
    border: none;
    padding: 15px 40px;
    border-radius: 15px;
    font-family: 'nata-sans', sans-serif;
    font-weight: bolder;
    font-size: 24px;
    cursor: pointer;
    align-self: center;
    margin-top: 10px;
    transition: transform 0.2s, background-color 0.2s;
}

.boton-enviar:hover {
    background-color: #ff2cb4;
    transform: scale(1.05);
}

.saludo {
    display: flex;
    flex-direction: row;
    margin-left: 10%;
}
.saludo img{
    display: flex;
    flex-direction: row;
    width: 500px;
}


.saludotexto {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'nata-sans', sans-serif;
    font-weight: bolder;
    font-size: 50px;
    color: white;
    margin-top: -20%;
    flex-direction: column;
}

.marca {
    font-family: playwriteustrad;
    font-weight: lighter;
    line-height: 5px;
    color: rgb(157, 213, 27);
}