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

@font-face {
    font-family: philosopher;
    src: url(./fonts/Philosopher-Regular.ttf);
}



@font-face {
    font-family: patrick;
    src: url(./fonts/PatrickHand-Regular.ttf);
}

@font-face {
    font-family: spanart;
    src: url(./fonts/Schoolbell-Regular.ttf);
}

@font-face {
    font-family: spanvideo;
    src: url(./fonts/Quantico-Regular.ttf);
}

:root {
    --fonteprimaria: philosopher;

    --fonteterciaria: patrick;
    --fontespanvideo: spanvideo;
    --fontespanart: spanart;
}

body {

    color: black;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    background-color: #cca628;
    background-image: url(../assets/img/fondobody.webp);
    background-repeat: repeat;
    animation: fondobody 90s linear infinite;
}

@keyframes fondobody {
    0% {
        background-color: #cca628;

    }

    10% {
        background-color: #b1c733;

    }

    20% {
        background-color: #70b92b;

    }

    30% {
        background-color: #32b147;

    }

    40% {
        background-color: #2ca58b;

    }

    50% {
        background-color: #34a2b1;

    }

    60% {
        background-color: #5c38b1;

    }

    70% {
        background-color: #8326ad;

    }

    80% {
        background-color: #a7317a;

    }

    90% {
        background-color: #a73131;

    }

}

body,
input,
button {
    font-size: clamp(16px, 4vw, 22px);
    font-family: var(--fonteprimaria);
}

button {
    cursor: pointer;
}

.contedorarticulo {
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: all 1s ease-in-out;
    transform-origin: top;
}

header {
    width: 100vw;
    height: 40vw;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2vw;

}

.header__h1 {
    font-size: 5vw;
    font-size: clamp(18px, 4vw, 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1vw;
    border-radius: 3vw;
    padding: 0.5vw 2vw;
    background: #2b9c21;
    background: linear-gradient(180deg, rgba(235, 197, 28, 0.904) var(--porcentaxeh1a), rgba(217, 122, 22, 1) var(--porcentaxeh1b), rgb(217, 165, 22) var(--porcentaxeh1c), rgba(223, 190, 40, 0.904) var(--porcentaxeh1d));
    animation: fondoh1 20s linear infinite;
}

@property --porcentaxeh1a {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 0%;
}

@property --porcentaxeh1b {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 30%;
}

@property --porcentaxeh1c {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 70%;
}

@property --porcentaxeh1d {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%;
}

@keyframes fondoh1 {

    0%,
    100% {
        --porcentaxeh1a: 0%;
        --porcentaxeh1b: 30%;
        --porcentaxeh1c: 70%;
        --porcentaceh1d: 100%
    }

    17% {
        --porcentaxeh1a: -20%;
        --porcentaxeh1b: 10%;
        --porcentaxeh1c: 50%;
        --porcentaceh1d: 80%
    }

    34% {
        --porcentaxeh1a: 0%;
        --porcentaxeh1b: 30%;
        --porcentaxeh1c: 70%;
        --porcentaceh1d: 100%
    }

    51% {
        --porcentaxeh1a: 20%;
        --porcentaxeh1b: 40%;
        --porcentaxeh1c: 60%;
        --porcentaceh1d: 80%
    }

    68% {
        --porcentaxeh1a: 0%;
        --porcentaxeh1b: 30%;
        --porcentaxeh1c: 70%;
        --porcentaceh1d: 100%
    }

    85% {
        --porcentaxeh1a: 20%;
        --porcentaxeh1b: 50%;
        --porcentaxeh1c: 90%;
        --porcentaceh1d: 120%
    }
}

.h1vid {
    font-family: var(--fontespanvideo);
    color: #0f6f72;
    text-shadow: 0 -1px 4px #FFF, 0 -2px 10px #ff0, 0 -10px 20px #ff8000, 0 -18px 40px #F00;
}

.h1art {
    font-family: var(--fontespanart);
    color: #0f6f72;
    text-shadow: #FFFCA8 2px 2px 0px, #9C9C9C 4px 4px 0px;
}

.header__video {
    width: 75vw;
    height: 40vw;
    z-index: -3;
}

.contedortexto {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.logogaliviart {
    width: 50vw;
    height: 21vw;
}

.logogaliviart img {
    width: 100%;
    height: 100%;
}

.contedoridiomas {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20vw;
    height: 4.8vw;
    width: clamp(120px, 20.5vw, 200px);
    height: clamp(35px, 5.3vw, 50px);
    position: absolute;
    left: 0vw;
    top: 2vw;
    gap: 3.33%;
    transform-origin: right;
    padding: 0.5vw 0.5vw 0.5vw 1.5vw;

    background-color: rgba(0, 0, 255, 0.337);
    background-image: url(../assets/img/fondoidiomas.webp);
    background-size: cover;
    background-position: center;
    width: 20.5vw;
    height: 5.3vw;
    transition: all 1s linear;

}

.idiomaspechado {
    left: -14vw
}

.botonidiomas {
    height: 100%;
    width: 30%;
    border: 0px;
    position: absolute;
    left: 100%;
    background-image: url(../assets/img/fondobotonidiomas.webp);
    background-size: cover;
    background-position: center;
    border-top-right-radius: 20%;
    border-bottom-right-radius: 20%;
    background-color: transparent;
}

.botonidiomas img {
    width: 100%;
    height: 100%;
    transition: all 1s linear;
    animation: frecha 2s linear infinite
}

@keyframes frecha {

    0%,
    100% {
        scale: 1;
    }

    50% {
        scale: 1.3;
    }

}

.bandeira {
    width: 30%;
    height: 100%;
    transition: all 0.25s linear;
}

.bandeira a {
    width: 100%;
    height: 100%;
}

.bandeira a img {
    width: 100%;
    height: 100%;
}

.bandeira:hover {
    scale: 1.2;
}

.header__texto {
    width: 30vw;
    height: 15vw;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    padding: 2vw;
    left: 65vw;
    top: 30vw;
    rotate: -25deg;
    background-image: url(../assets/img/fondotextoheader.webp);
    background-position: center;
    background-size: cover;
}

.header__texto p {
    text-align: center;
    font-size: clamp(18px, 2vw, 25px);
    font-weight: 600;
}

/*seccións*/
main {
    margin-top: 10vw;
}

section {
    position: absolute;
    width: 100vw;

}



.comezoseccion {
    width: 100vw;
    height: 5vw;
    margin-left: 3vw;
}

.comezoseccion img {
    width: 100%;
    height: 100%;
}

.comezoseccion2 {
    width: 100vw;
    height: 5vw;
    margin-left: 3vw;
}

.comezoseccion2 img {
    width: 100%;
    height: 100%;
}

.contidoseccion {
    border-bottom-left-radius: 25vw;
    border-bottom-right-radius: 25vw;
    background-image: url(../assets/img/fondoseccionsb.webp);
    background-repeat: repeat;
}

/*dunkxar*/


.dunkxar {

    z-index: +20;
}

.contidodunkxar {
    opacity: 0%;
    transition: all 1s linear;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0vw 8vw 5vw 5vw;
    gap: 2vw;
    font-family: var(--fonteterciaria);

}

.cabeceiradunkxar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    gap: 2vw;
}

.cabeceiradunkxar__logo {
    width: 35vw;
    height: 17.15vw;
}

.cabeceiradunkxar__logo img {
    width: 100%;
    height: 100%;
}

.indicadordescarga {
    border: 2px dashed #ccc;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    transform: rotate(2deg);
    background-color: rgba(224, 224, 78, 0.211);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1vw;
}

.contedordescarga {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 60vw;
    height: 30vw;
    gap: 4vw;
    padding: 1vw 9vw;
    background: url(../assets/img/fondodescargas.webp);
    background-size: cover;
    background-position: center;
}

.descarga {
    width: 12vw;
    height: 12vw;
    overflow: hidden;
    border-top: #a5a87693 1vw ridge;
    border-left: #a5a87693 1vw ridge;
    border-right: #a5a87693 1vw groove;
    border-bottom: #a5a87693 1vw groove;
    background-color: #a5a87693;
    border-radius: 2vw;
    backdrop-filter: blur(2px);
    box-shadow: 0.4vw 0.4vw 0.4vw 0px;
    transition: all 0.5s linear;
}

.descarga:hover {
    box-shadow: 0.1vw 0.1vw 0.1vw 0px;
    border-top: #a5a87693 1.3vw ridge;
    border-left: #a5a87693 1.3vw ridge;
    border-right: #a5a87693 1.3vw groove;
    border-bottom: #a5a87693 1.3vw groove;
    background-color: #8c8f60cb;

}

.descarga a {
    width: 100%;
    height: 100%;
}

.descarga a img {
    width: 100%;
    height: 100%;
}

.nondisponhible {
    position: relative;
    top: -105%;
    /* animation: nondisponhible 5s linear infinite;*/
}

.disponhible {
    position: relative;
    top: -105%;
    animation: disponhible 7s linear infinite;
}

.instrucionsdescarga {
    width: 14vw;
    height: 8vw;
    position: relative;
    top: -70%;
    left: 50%;
    rotate: -45deg;
    font-size: clamp(12px, 2vw, 30px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1vw;
    border-radius: 2vw;
    font-weight: 600;
    background-color: rgb(223, 129, 115);
    border-top: 0.3vw solid rgb(140, 43, 43);
    border-left: 0.4vw solid rgb(140, 43, 43);
    border-bottom: 0.1vw solid rgb(140, 43, 43);
    border-right: 0.1vw solid rgb(140, 43, 43);
    box-shadow: 0.2vw 0.5vw 0.4vw 0px;
    text-shadow: 0 0 0.4vw #FFF, 0 0 0.8vw #FFF, 0 0 1.2vw #FFF, 0 0 1.6vw #ff1818, 0 0 2vw #ff1818, 0 0 2.4vw #ff1818, 0 0 2.8vw #ff1818, 0 0 3.2vw #ff1818;

    transition: all 0.5s linear;

}

.modalinstrucions {
    display: flex;
    scale: 0;
    align-items: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 5vw;
    border: 1px solid;
    width: 90vw;
    position: absolute;
    top: 35vw;
    left: 5vw;
    z-index: +25;
    background-color: rgba(223, 130, 115, 0.937);
    text-align: justify;
    border-radius: 2vw;
    transition: all 0.5s linear;

}

.pecharmodal {
    position: absolute;
    width: 10vw;
    height: 10vw;
    border: 0px solid;
    left: 80vw;
    top: -5vw;
    background: transparent;
    rotate: 0deg;
    transition: all 1s ease-out;
}

.pecharmodal img {
    width: 100%;
    height: 100%;
}

.resumodunkxar {
    text-align: justify;
}

/* botons e seccions ampliables*/
.botonampliar {
    display: flex;
    padding: 0.5vw 1vw;
    border-radius: 1vw;
    font-weight: 600;
    background-color: rgb(223, 129, 115);
    border-top: 0.2vw solid rgb(140, 43, 43);
    border-left: 0.4vw solid rgb(140, 43, 43);
    border-bottom: 0.4vw solid rgb(140, 43, 43);
    border-right: 0.2vw solid rgb(140, 43, 43);
    box-shadow: 0.4vw 0.4vw 0.4vw 0px;
    transition: all 0.5s linear;
    text-shadow: 0 0 0.4vw #FFF, 0 0 0.8vw #FFF, 0 0 1.2vw #FFF, 0 0 1.6vw #ff1818, 0 0 2vw #ff1818, 0 0 2.4vw #ff1818, 0 0 2.8vw #ff1818, 0 0 3.2vw #ff1818;

}

.botonpulsado {
    border-top: 0.1vw solid rgb(140, 43, 43);
    border-left: 0.1vw solid rgb(140, 43, 43);
    border-bottom: 0.1vw solid rgb(140, 43, 43);
    border-right: 0.1vw solid rgb(140, 43, 43);
    box-shadow: 0.1vw 0.1vw 0.1vw 0px;
    background-color: rgb(177, 95, 82);
    text-shadow: 0 0 0.1vw #FFF, 0 0 0.2vw #FFF, 0 0 0.3vw #FFF, 0 0 0.4vw #ff1818, 0 0 0.5vw #ff1818, 0 0 0.6vw #ff1818, 0 0 0.7vw #ff1818, 0 0 0.8vw #ff1818;
}


.desenvolvementocontido {
    text-align: justify;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: all 0.5s linear;
    transform: scaleY(0.01);
    transform-origin: top;
}

.desenvolvementocontido li {
    list-style-type: none
}

.ilustracioncontido1 {
    width: 70vw;
    height: 44.36vw;

}

.ilustracioncontido1 img {
    width: 100%;
    height: 100%;
}

.ilustracioncontido2 {
    width: 70vw;
    height: 35vw;

}

.ilustracioncontido2 img {
    width: 100%;
    height: 100%;
}


.actualizacioncontido {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2vw;
    transition: all 0.5s linear;
    transform: scaleY(0.01);
    transform-origin: top;
    text-align: justify;
}

.errocontido {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2vw;
    transition: all 0.5s linear;
    transform: scaleY(0.01);
    transform-origin: top;
    text-align: justify;
}

.taboa {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

}

.fila {
    width: 80vw;
    display: flex;
    align-items: start;
    justify-content: start;

    border: 1px solid;
    background-color: antiquewhite;
}

.primeirafila {
    font-weight: 600;
    border-top-left-radius: 2vw;
    border-top-right-radius: 2vw;
    background-color: rgb(249, 215, 170);
}

.ultimafila {
    border-bottom-left-radius: 2vw;
    border-bottom-right-radius: 2vw;
}

.columna1 {
    width: 15vw;

    padding: 1vw;
}

.columna2 {
    width: 50vw;
    border-right: 1px solid;
    border-left: 1px solid;
    padding: 1vw;
}

.columna3 {
    width: 15vw;
    padding: 1vw;
}

.produto {
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 1px solid;
    gap: 1vw;
    border-radius: 2vw;
    background: linear-gradient(180deg, rgba(240, 232, 93, 1) 0%, rgba(207, 209, 65, 1) 50%, rgba(227, 192, 39, 1) 100%);
}

.contidoproduto {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.ilustracionproduto {
    width: 50%
}

.ilustracionproduto video {
    width: 100%;
}

.ilustracionproduto img {
    width: 100%;
}

.textoproduto {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 1vw;
    gap: 1vw;
}

.textoproduto a {
    width: 7vw;
    height: 7vw;

}

.textoproduto a img {
    width: 100%;
    height: 100%;
    animation: frecha 2s linear infinite
}

/*o proxecto*/
.proxecto {

    z-index: +19;
}

.contidoproxecto {
    opacity: 0%;
    transition: all 1s linear;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0vw 8vw 5vw 5vw;
    gap: 2vw;
    font-family: var(--fonteterciaria);
    text-align: justify;
}

.contidoproxecto h2 {
    border: 2px dashed #ccc;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    transform: rotate(-2deg);
    background-color: rgba(224, 224, 78, 0.211);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1vw;
}

.pinicioproxecto {
    margin-bottom: 5vw;
}

.botonampliar2 {
    display: flex;
    padding: 0.5vw 1vw;
    border-radius: 1vw;
    font-weight: 600;
    background-color: rgb(14, 119, 232);
    border-top: 0.2vw solid rgb(43, 124, 140);
    border-left: 0.4vw solid rgb(43, 124, 140);
    border-bottom: 0.4vw solid rgb(43, 124, 140);
    border-right: 0.2vw solid rgb(43, 124, 140);
    box-shadow: 0.4vw 0.4vw 0.4vw 0px;
    transition: all 0.5s linear;
    text-shadow: 0 0 0.4vw #FFF, 0 0 0.8vw #FFF, 0 0 1.2vw #FFF, 0 0 1.6vw rgb(14, 119, 232), 0 0 2vw rgb(14, 119, 232), 0 0 2.4vw rgb(14, 119, 232), 0 0 2.8vw rgb(14, 119, 232), 0 0 3.2vw rgb(14, 119, 232);
}

.botonpulsado2 {
    border-top: 0.1vw solid rgb(43, 124, 140);
    border-left: 0.1vw solid rgb(43, 124, 140);
    border-bottom: 0.1vw solid rgb(43, 124, 140);
    border-right: 0.1vw solid rgb(43, 124, 140);
    box-shadow: 0.1vw 0.1vw 0.1vw 0px;
    background-color: rgb(14, 119, 232);
    text-shadow: 0 0 0.1vw #FFF, 0 0 0.2vw #FFF, 0 0 0.3vw #FFF, 0 0 0.4vw rgb(14, 119, 232), 0 0 0.5vw rgb(14, 119, 232), 0 0 0.6vw rgb(14, 119, 232), 0 0 0.7vw rgb(14, 119, 232), 0 0 0.8vw rgb(14, 119, 232);
}

.contextocontido {
    text-align: justify;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: all 0.5s linear;
    transform: scaleY(0.01);
    transform-origin: top;
}

.creacioncontido {
    text-align: justify;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: all 0.5s linear;
    transform: scaleY(0.01);
    transform-origin: top;
}

.ilustracioncreacion {
    width: 80vw;
    height: 31, 5vw;
}

.ilustracioncreacion img {
    width: 100%;
    height: 100%;
}

.visualcontido {
    text-align: justify;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: all 0.5s linear;
    transform: scaleY(0.01);
    transform-origin: top;
}

.ilustracionvisual1 {
    width: 30%;
    height: 30%;
}

.ilustracionvisual1 img {
    width: 100%;
    height: 100%;
}

.ilustracionvisual2 {
    width: 50vw;
    height: 40, 65vw;
}

.ilustracionvisual2 img {
    width: 100%;
    height: 100%;
}

.distribucioncontido {
    text-align: justify;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: all 0.5s linear;
    transform: scaleY(0.01);
    transform-origin: top;
}

.webcontido {
    text-align: justify;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: all 0.5s linear;
    transform: scaleY(0.01);
    transform-origin: top;
}

.futurocontido {
    text-align: justify;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: all 0.5s linear;
    transform: scaleY(0.01);
    transform-origin: top;
}

/*proximamente*/
.proximamente {

    z-index: +3;
}

.contidoproximamente {
    opacity: 0%;
    transition: all 1s linear;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0vw 8vw 5vw 5vw;
    gap: 2vw;
    font-family: var(--fonteterciaria);
    text-align: justify;
}

.contidoproximamente h2 {
    border: 2px dashed #ccc;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    transform: rotate(5deg);
    background-color: rgba(224, 224, 78, 0.211);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1vw;
}

.imaxeproximamente {
    width: 50vw;
    height: 50vw;
}

.imaxeproximamente img {
    width: 100%;
    height: 100%;
}

/*contacto*/
.contacto {

    z-index: +2;
}

.contidocontacto {
    opacity: 0%;
    transition: all 1s linear;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0vw 8vw 5vw 5vw;
    gap: 2vw;
    font-family: var(--fonteterciaria);
    text-align: justify;
}

.contedorcontacto {
    width: 70vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1vw;
    padding: 1vw;
    border-radius: 3vw;
    background-color: #dbb024;
    background-image: url(../assets/img/fondocontacto.webp);
    background-repeat: repeat;
    border-top: #dbb024 1.5vw groove;
    border-left: #dbb024 1.5vw groove;
    border-right: #dbb024 1.5vw ridge;
    border-bottom: #dbb024 1.5vw ridge;
    animation: fondocontacto 300s linear infinite;
}

@keyframes fondocontacto {
    0% {
        background-color: #cca628;
        border-top: #dbb024 1.5vw groove;
        border-left: #dbb024 1.5vw groove;
        border-right: #dbb024 1.5vw ridge;
        border-bottom: #dbb024 1.5vw ridge;
    }

    10% {
        background-color: #b1c733;
        border-top: #c0db24 1.5vw groove;
        border-left: #c0db24 1.5vw groove;
        border-right: #c0db24 1.5vw ridge;
        border-bottom: #c0db24 1.5vw ridge;
    }

    20% {
        background-color: #70b92b;
        border-top: #75cf21 1.5vw groove;
        border-left: #75cf21 1.5vw groove;
        border-right: #75cf21 1.5vw ridge;
        border-bottom: #75cf21 1.5vw ridge;
    }

    30% {
        background-color: #32b147;
        border-top: #22bd3c 1.5vw groove;
        border-left: #22bd3c 1.5vw groove;
        border-right: #22bd3c 1.5vw ridge;
        border-bottom: #22bd3c 1.5vw ridge;
    }

    40% {
        background-color: #2ca58b;
        border-top: #23c09e 1.5vw groove;
        border-left: #23c09e 1.5vw groove;
        border-right: #23c09e 1.5vw ridge;
        border-bottom: #23c09e 1.5vw ridge;
    }

    50% {
        background-color: #34a2b1;
        border-top: #24b7ca 1.5vw groove;
        border-left: #24b7ca 1.5vw groove;
        border-right: #24b7ca 1.5vw ridge;
        border-bottom: #24b7ca 1.5vw ridge;
    }

    60% {
        background-color: #5c38b1;
        border-top: #5527c0 1.5vw groove;
        border-left: #5527c0 1.5vw groove;
        border-right: #5527c0 1.5vw ridge;
        border-bottom: #5527c0 1.5vw ridge;
    }

    70% {
        background-color: #8326ad;
        border-top: #8326ad 1.5vw groove;
        border-left: #8326ad 1.5vw groove;
        border-right: #8326ad 1.5vw ridge;
        border-bottom: #8326ad 1.5vw ridge;
    }

    80% {
        background-color: #a7317a;
        border-top: #b4217c 1.5vw groove;
        border-left: #b4217c 1.5vw groove;
        border-right: #b4217c 1.5vw ridge;
        border-bottom: #b4217c 1.5vw ridge;
    }

    90% {
        background-color: #a73131;
        border-top: #c22727 1.5vw groove;
        border-left: #c22727 1.5vw groove;
        border-right: #c22727 1.5vw ridge;
        border-bottom: #c22727 1.5vw ridge;
    }

}

.caixacontacto:hover {
    scale: 1.2;
    background-color: #dde9e5e5;
}

.caixacontacto {
    height: 20vw;
    width: 15vw;
    transition: all 0.5s linear;
    background-color: #1ab3c7ab;
    border-radius: 3vw;
}

.imaxe {
    height: 15vw;
    width: 15vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.imaxe img {
    width: 90%;
    height: 90%;
}

.descripcioncontacto {
    height: 5vw;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    text-decoration: none;
    border-radius: 3vw;
    text-shadow: 0 0 20px #FFFFFF;
    background: #2a9b52;
    background: linear-gradient(0deg, rgba(42, 155, 82, 0.9) 0%, rgba(87, 199, 188, 0.9) 50%, rgba(139, 237, 83, 0.9) 100%);
    font-size: clamp(16px, 4vw, 30px);
}

.contacto h2 {
    border: 2px dashed #ccc;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    transform: rotate(-2deg);
    background-color: rgba(224, 224, 78, 0.211);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1vw;
}

/*marxeninferior 
.marxen {
    height: 30vw;
    height: clamp(150px, 30vw, 300px);
}*/
.marxen {
    height: 15vw;
    height: clamp(75px, 15vw, 150px);
}

/*etiquetas*/
.etiqueta {
    position: relative;
    rotate: 90deg;
    width: 25vw;
    height: 7vw;
    top: -9vw;
    display: flex;
    align-items: center;
    justify-content: left;
    padding-left: 1vw;
    font-size: 3.3vw;
    scale: 1;
    opacity: 70%;
    transition: all 1s linear;
    border: 0px;
    font-weight: 500;
    text-shadow: 0px 0px 10px white, 0px 0px 20px yellow;
    color: rgb(61, 44, 2);

}

.etiqueta__introducion {
    background: transparent;
    background-image: url(../assets/img/etiquetaproxecto.webp);
    background-position: center;
    background-size: cover;
    left: -7vw;
    padding-left: 2.5vw;
}

.etiqueta__dunkxar {
    background: transparent;
    background-image: url(../assets/img/etiquetadunkxar.webp);
    background-position: center;
    background-size: cover;


}

.etiqueta__dunkxar img {
    width: 100%;
    height: 100%;
}

.luminosidadedunkxar {
    position: absolute;
    z-index: -1;
    opacity: 100%;
    transition: all 2s linear;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 1vw;
}

.luminosidadedunkxar img {
    width: 100%;
    height: 100%;
}

.etiqueta__proximamente {
    background: transparent;
    background-image: url(../assets/img/etiquetaproximamente.webp);
    background-position: center;
    background-size: cover;
    left: 7vw;
    padding-left: 2.5vw;
}

.etiqueta__contacto {
    background: transparent;
    background-image: url(../assets/img/etiquetacontacto.webp);
    background-position: center;
    background-size: cover;
    left: 14vw;
    padding-left: 2.5vw;
}

/*frechas*/
.contedorfrechas {
    position: absolute;
    width: 40vw;
    height: 20vw;
    top: 37vw;
    left: 55vw;
    z-index: +20;
    display: flex;
    align-items: center;
    justify-content: center;
}

.frecha {
    width: 15vw;
    height: 15vw;
    top: 43vw;
    left: 55vw;
}

.frecha__esquerda {
    z-index: +21;
    position: absolute;
}


.frecha__esquerda img {
    width: 100%;
    height: 100%;
    transition: all 0.5s linear;
}

.frecha__dereita {
    rotate: 180deg;
    z-index: +21;
    position: absolute;
    top: 43vw;
    left: 78vw;
}

.frecha__dereita img {
    width: 100%;
    height: 100%;
    transition: all 0.5s linear;
}

/*footer*/
.limitadorfooter {
    height: 10px;
    width: 10px;

}

.footer {
    width: 100vw;
    position: fixed;
    bottom: 0;
    z-index: 21;
    opacity: 0%;
    scale: 0;
    transform-origin: bottom;
    transition: all 0.5s linear;
    display: flex;
    gap: 0vw;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding-top: 1vw;
    padding-bottom: 1vw;
    border-top-left-radius: 25vw;
    border-top-right-radius: 25vw;
    background: #fcb900;
    background: linear-gradient(180deg, rgb(252, 174, 6) var(--porcentaxe1), rgb(97, 54, 214) var(--porcentaxe2), rgb(64, 11, 114) var(--porcentaxe3));
    animation: fondofooter 10s linear infinite;
}

.footer__logo {
    width: 20vw;
}

.footer__logo img {
    width: 100%;
}

.contedorfooter {
    width: 40vw;
    border: 0.3vw solid;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5vw;
    padding: 0.5vw 2vw;
    border-radius: 3vw;
    background-color: rgba(255, 255, 255, 0.089);
    backdrop-filter: blur(5px);
}

.enlacefooter {
    width: 5vw;
    height: 5vw;
    transition: all 0.5s linear;
}

.enlacefooter:hover {
    scale: 1.2;
}

.enlacefooter img {
    width: 100%;
    height: 100%;
}

@property --porcentaxe1 {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 0%;
}

@property --porcentaxe2 {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 50%;
}

@property --porcentaxe3 {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%;
}

@keyframes fondofooter {

    0%,
    100% {
        --porcentaxe1: 0%;
        --porcentaxe2: 50%;
        --porcentaxe3: 100%
    }

    50% {
        --porcentaxe1: 30%;
        --porcentaxe2: 80%;
        --porcentaxe3: 130%
    }

}

.copyright {
    font-size: clamp(10px, 3vw, 22px);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0vw 1vw;
    background-color: #e6de7388;
    border-radius: 1vw;
}

/*clases para seccions*/
.seccionvisible {
    opacity: 100%;
}

.seccioninvisible {
    opacity: 0%;
}

/*clases para etiquetas*/
.etiquetaseleccionada {
    opacity: 100%;
    scale: 1.05;
    text-shadow: #FFF 0px 0px 5px, #FFF 0px 0px 10px, #FFF 0px 0px 15px, yellow 0px 0px 20px, yellow 0px 0px 30px, yellow 0px 0px 40px, yellow 0px 0px 50px, yellow 0px 0px 75px;

}

/*clase para contidos*/
.contidodespregado {
    transform: scaleY(1);
}

/*clases para footer*/
.footervisible {
    opacity: 100%;
    scale: 1
}

/*comeza sección keyframes*/
.animacioncabeceiradunkxar {
    position: relative;
    width: 4vw;
    height: 4vw;
    top: -5vw;
    left: 2vw;
    animation: cabeceira 15s linear infinite;
}



.personaxe {
    width: 100%;
    position: absolute;
}

.personaxe img {
    width: 100%;
}

.paso1 {
    animation: 1s paso1 linear infinite;
}

.pasoneutral {
    animation: pasoneutral 1s linear infinite;
}



.paso2 {
    animation: paso2 1s linear infinite;
}



.ollos {
    animation: ollos 20s linear infinite;
}


.animacioncabeceiraxirarosa {
    position: relative;
    width: 4vw;
    height: 4vw;
    top: -9vw;
    left: 2vw;
    animation: movementoxirarosa 15s linear infinite;
}

.xirarosa1 {
    width: 100%;
    position: absolute;

}

@keyframes movementoxirarosa {

    0%,
    100% {
        left: -5vw;
        opacity: 100%;
    }

    30% {
        left: -5vw
    }

    60% {
        left: 40vw
    }

    75% {
        left: 40vw;
        opacity: 100%;
    }

    75.001% {
        opacity: 0%;
    }

    99.99% {
        opacity: 0%;
    }

}

.xirarosa2 {
    width: 100%;
    position: absolute;

}

.xirarosa2 img {
    animation: xirarosa 1s linear infinite;
}

@keyframes xirarosa {
    0% {
        rotate: 0deg
    }

    100% {
        rotate: 360deg
    }

}

.xirarosa3 {
    width: 100%;
    position: absolute;
    animation: planta1 1s linear infinite;
}

.xirarosa4 {
    width: 100%;
    position: absolute;
    animation: planta2 1s linear infinite;
}

@keyframes planta1 {
    0% {
        opacity: 100%;
    }

    49.9% {
        opacity: 100%
    }

    50% {
        opacity: 0%;
    }


    99.9% {
        opacity: 0%;
    }

    100% {
        opacity: 100%
    }
}



@keyframes planta2 {
    0% {
        opacity: 0%;
    }

    49.9% {
        opacity: 0%
    }

    50% {
        opacity: 100%;
    }

    99.9% {
        opacity: 100%
    }

    100% {
        opacity: 0%;
    }

}


.xirarosasombra {
    width: 100%;
    position: absolute;
}

.xirarosaqueimado {
    width: 100%;
    opacity: 0%;
    animation: xirarosaqueimada 15s linear infinite, xirarosa 1s linear infinite;
}

@keyframes xirarosaqueimada {

    0%,
    100% {
        opacity: 0%;
    }

    59.999% {
        opacity: 0%;
    }

    60% {
        opacity: 100%;
    }

    75% {
        opacity: 100%;
    }

    75.001% {
        opacity: 0%;
    }

    99.99% {
        opacity: 0%;
    }

}

.animacioncabeceiralume {
    position: relative;
    width: 4vw;
    height: 4vw;
    top: -13vw;
    left: 85vw;
    rotate: 180deg;
    animation: lumemovemento 15s linear infinite
}

@keyframes lumemovemento {

    0%,
    100% {
        opacity: 0%;
        left: 85vw
    }

    53.99% {
        opacity: 0%;
        left: 85vw;
    }

    54% {
        opacity: 100%;
    }

    60% {
        opacity: 100%;
    }

    65% {
        left: 20vw;
        opacity: 0%;
    }

}

.lume1 {
    width: 100%;
    position: absolute;
    animation: lume1 0.25s linear infinite;
}

@keyframes lume1 {
    0% {
        opacity: 100%;
    }

    49% {
        opacity: 100%;
    }

    50% {
        opacity: 0%;
    }

    99% {
        opacity: 0%;
    }

    100% {
        opacity: 100%;
    }

}

.lume1 img {
    width: 100%;
}

.lume2 {
    width: 100%;
    position: absolute;
    animation: lume2 0.25s linear infinite;
}

.lume2 img {
    width: 100%;
}

@keyframes lume2 {
    0% {
        opacity: 0%;
    }

    49% {
        opacity: 0%;
    }

    50% {
        opacity: 100%;
    }

    99% {
        opacity: 100%;
    }

    100% {
        opacity: 0%;
    }

}

.animacioncabeceiraxema1 {
    position: relative;
    width: 4vw;
    height: 4vw;
    top: -17vw;
    left: 25vw;
    animation: xema1 15s linear infinite, rotar 5s linear infinite;
}

@keyframes xema1 {
    0% {
        opacity: 100%;
    }

    10% {
        opacity: 100%;
    }

    12% {
        opacity: 0%;
    }

    95% {
        opacity: 0%;
    }
}

.animacioncabeceiraxema2 {
    position: relative;
    width: 4vw;
    height: 4vw;
    top: -21vw;
    left: 50vw;
    animation: xema2 15s linear infinite, rotar2 10s linear infinite;
}

@keyframes xema2 {
    0% {
        opacity: 100%;
    }

    24% {
        opacity: 100%;
    }

    26% {
        opacity: 0%;
    }

    95% {
        opacity: 0%;
    }
}

.animacioncabeceiraxema3 {
    position: relative;
    width: 4vw;
    height: 4vw;
    top: -25vw;
    left: 75vw;
    animation: xema3 15s linear infinite, rotar 8s linear infinite;
}

@keyframes xema3 {
    0% {
        opacity: 100%;
    }

    38% {
        opacity: 100%;
    }

    40% {
        opacity: 0%;
    }

    95% {
        opacity: 0%;
    }
}

@keyframes rotar {
    0% {
        rotate: 0deg
    }

    100% {
        rotate: 360deg
    }
}

@keyframes rotar2 {
    0% {
        rotate: 0deg
    }

    100% {
        rotate: -360deg
    }
}

@keyframes ollos {

    0%,
    100% {
        opacity: 0%;
    }

    15% {
        opacity: 0%;
    }

    15.001% {
        opacity: 100%;
    }

    17% {
        opacity: 100%;
    }

    17.001% {
        opacity: 0%;
    }

    22% {
        opacity: 0%;
    }

    22.001% {
        opacity: 100%;
    }

    24% {
        opacity: 100%;
    }

    24.001% {
        opacity: 0%;
    }

    37% {
        opacity: 0%;
    }

    37.001% {
        opacity: 100%;
    }

    38% {
        opacity: 100%;
    }

    38.001% {
        opacity: 0%;
    }

    45% {
        opacity: 0%;
    }

    45.001% {
        opacity: 100%;
    }

    48% {
        opacity: 100%;
    }

    48.001% {
        opacity: 0%;
    }

    56% {
        opacity: 0%;
    }

    56.001% {
        opacity: 100%;
    }

    58% {
        opacity: 100%;
    }

    58.001% {
        opacity: 0%;
    }

    65% {
        opacity: 0%;
    }

    65.001% {
        opacity: 100%;
    }

    67% {
        opacity: 100%;
    }

    67.001% {
        opacity: 0%;
    }

    81% {
        opacity: 0%;
    }

    81.001% {
        opacity: 100%;
    }

    83% {
        opacity: 100%;
    }

    83.001% {
        opacity: 0%;
    }

    91% {
        opacity: 0%;
    }

    91.001% {
        opacity: 100%;
    }

    94% {
        opacity: 100%;
    }

    94.001% {
        opacity: 0%;
    }
}

@keyframes paso2 {
    0% {
        opacity: 0%;
    }

    74.99% {
        opacity: 0%
    }

    75% {
        opacity: 100%;
    }

    99.99% {
        opacity: 100%
    }

    100% {
        opacity: 0%;
    }
}

@keyframes pasoneutral {
    0% {
        opacity: 100%;
    }

    24.99% {
        opacity: 100%
    }

    25% {
        opacity: 0%;
    }

    49.99% {
        opacity: 0%;
    }

    50% {
        opacity: 100%
    }

    74.99% {
        opacity: 100%
    }

    75% {
        opacity: 0%;
    }

    99.99% {
        opacity: 0%;
    }

    100% {
        opacity: 100%;
    }

}

@keyframes paso1 {

    0% {
        opacity: 0%;
    }

    24.99% {
        opacity: 0%
    }

    25% {
        opacity: 100%;
    }

    49.99% {
        opacity: 100%
    }

    50% {
        opacity: 0%;
    }

    100% {
        opacity: 0%;
    }


}

@keyframes cabeceira {

    0%,
    100% {
        left: 2vw;
        transform: scaleX(1);
    }

    49.99% {
        transform: scaleX(1)
    }

    50% {
        left: 93vw;
        transform: scaleX(-1);
    }

    99.99% {
        transform: scaleX(-1)
    }

}

@keyframes nondisponhible {

    0%,
    100% {
        scale: 1.1;
    }

    50% {
        scale: 0.8;
    }

}

@keyframes disponhible {
    0% {
        top: -210%;
        opacity: 100%;
    }

    75% {
        top: 0%;
        opacity: 100%;
    }

    75.001% {
        opacity: 0%;
    }

    99.99% {
        opacity: 0%;
    }
}

.animacionxureloide {
    position: absolute;
    width: 10vw;
    height: 10vw;
    left: 10vw;
    top: 20vw;
    display: none;
}

.animacionxureloide img {
    width: 100%;
    height: 100%;
}

.xureloide1 {
    animation: paso1 0.75s linear infinite;
}

.xureloideneutral {
    animation: pasoneutral 0.75s linear infinite;
}

.xureloide2 {
    animation: paso2 0.75s linear infinite;
}
.capturacabeceira1{
    position: absolute;
    width: 20vw;
    height: 20vw;
    left: 7vw;
    top: 13vw;
    rotate:-5deg
}
.capturacabeceira1 img{
    width: 100%;
    height: 100%;
}
.animacionplanta {
    position: absolute;
    width: 10vw;
    height: 10vw;
    left: 80vw;
    top: 20vw;
    display: none;
}

.animacionplanta img {
    width: 100%;
    height: 100%;
}

.planta1 {
    position: absolute;
    animation: lume1 2s linear infinite;
}

.planta2 {
    position: absolute;
    animation: lume2 2s linear infinite;
}
.capturacabeceira2{
    position: absolute;
    width: 20vw;
    height: 20vw;
    left: 71vw;
    top: 13vw;
    rotate:5deg;
    
}
.capturacabeceira2 img{
    width: 100%;
    height: 100%;
}
/*animacions o proxecto*/
.animacionproxecto {
    width: 4vw;
    height: 4vw;
    position: relative;
}

.animacionproxecto img {
    width: 100%;
    height: 100%;
}

.htmllogo {
    top: -5vw;
    left: 8vw;
    animation: htmllogo 25s linear infinite, ladeo1 5s linear infinite;
}

@keyframes htmllogo {

    0%,
    100% {
        left: 8vw;

    }

    10% {
        scale: 1;
        z-index: +5;
    }

    40% {
        scale: 1;
        z-index: +5;
    }

    50% {
        left: 88vw;
        z-index: 0;
    }

    60% {
        scale: 0.7;
    }

    90% {
        scale: 0.7;
        z-index: 0;
    }
}

.lapiz {
    top: -9vw;
    left: 28vw;
    animation: lapiz 25s linear infinite, ladeo2 5s linear infinite;
}

@keyframes lapiz {

    0%,
    100% {
        left: 28vw;
    }

    27.5% {
        scale: 1;
        z-index: +5;
    }

    37.5% {
        left: 88vw;
        z-index: 0;
    }

    47.5% {
        scale: 0.7;
    }

    77.5% {
        scale: 0.7;
        z-index: 0;
    }

    87.5% {
        left: 8vw;
        z-index: +5;
    }

    97.7% {
        scale: 1;
    }
}

.csslogo {
    top: -13vw;
    left: 48vw;
    animation: csslogo 25s linear infinite, ladeo1 5s linear infinite;
}

@keyframes csslogo {

    0%,
    100% {
        left: 48vw;
    }

    15% {
        scale: 1;
        z-index: +5;
    }

    25% {
        left: 88vw;
        z-index: 0
    }

    35% {
        scale: 0.7;
    }

    65% {
        scale: 0.7;
        z-index: 0;
    }

    75% {
        left: 8vw;
        z-index: +5;
    }

    85% {
        scale: 1
    }
}

.pluma {
    top: -17vw;
    left: 68vw;
    animation: pluma 25s linear infinite, ladeo2 5s linear infinite;
}

@keyframes pluma {

    0%,
    100% {
        left: 68vw;
    }

    2.5% {
        scale: 1;
        z-index: +5;
    }

    12.5% {
        left: 88vw;
        z-index: 0
    }

    22.5% {
        scale: 0.7;
        z-index: 0;
    }

    62.5% {
        left: 8vw;
        z-index: +5;
    }

    72.5% {
        scale: 1
    }

}

.jslogo {
    top: -21vw;
    left: 88vw;
    animation: jslogo 25s linear infinite, ladeo1 5s linear infinite;
}

@keyframes jslogo {

    0%,
    100% {
        left: 88vw;
        z-index: 0;
    }

    10% {
        scale: 0.7
    }

    40% {
        scale: 0.7;
        z-index: 0;
    }

    50% {
        left: 8vw;
        z-index: +5;
    }

    60% {
        scale: 1;
    }

    90% {
        scale: 1;
        z-index: +5;
    }
}

@keyframes ladeo1 {

    0%,
    100% {
        rotate: -15deg;
    }

    50% {
        rotate: 15deg;
    }
}

@keyframes ladeo2 {

    0%,
    100% {
        rotate: 15deg;
    }

    50% {
        rotate: -15deg;
    }
}

.portal {
    width: 15vw;
    height: 15vw;
    position: relative;
    margin-top: 10vw;
}

.portal img {
    width: 100%;
    height: 100%;
}

.maxiaportal {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: maxiaportal1 0.25s linear infinite, maxiaportal2 10s linear infinite;
    opacity: 0%;
}

@keyframes maxiaportal1 {
    0% {
        rotate: 0deg;
    }

    100% {
        rotate: 360deg;
    }

}

@keyframes maxiaportal2 {
    0% {
        opacity: 0%;
    }

    61.999% {
        opacity: 0%;
    }

    62% {
        opacity: 100%;
    }

    100% {
        opacity: 100%;
    }

}

.marcoportal {
    position: absolute;
    width: 100%;
    height: 100%;
}

.portalluz {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0%;
}

.luz1 {
    animation: luz1 10s linear infinite;
}

@keyframes luz1 {
    0% {
        opacity: 0%;
    }

    9.999% {
        opacity: 0%;
    }

    10% {
        opacity: 100%;
    }

    100% {
        opacity: 100%;
    }
}

.luz2 {
    animation: luz2 10s linear infinite;
}

@keyframes luz2 {
    0% {
        opacity: 0%;
    }

    19.999% {
        opacity: 0%;
    }

    20% {
        opacity: 100%;
    }

    100% {
        opacity: 100%;
    }
}

.luz3 {
    animation: luz3 10s linear infinite;
}

@keyframes luz3 {
    0% {
        opacity: 0%;
    }

    29.999% {
        opacity: 0%;
    }

    30% {
        opacity: 100%;
    }

    100% {
        opacity: 100%;
    }
}

.luz4 {
    animation: luz4 10s linear infinite;
}

@keyframes luz4 {
    0% {
        opacity: 0%;
    }

    39.999% {
        opacity: 0%;
    }

    40% {
        opacity: 100%;
    }

    100% {
        opacity: 100%;
    }
}

.luz5 {
    animation: luz5 10s linear infinite;
}

@keyframes luz5 {
    0% {
        opacity: 0%;
    }

    49.999% {
        opacity: 0%;
    }

    50% {
        opacity: 100%;
    }

    100% {
        opacity: 100%;
    }
}

.luz6 {
    animation: luz6 10s linear infinite;
}

@keyframes luz6 {
    0% {
        opacity: 0%;
    }

    59.999% {
        opacity: 0%;
    }

    60% {
        opacity: 100%;
    }

    100% {
        opacity: 100%;
    }
}

/*proximamente*/
.animacioncabeceirabombilla {
    position: relative;
    width: 4vw;
    height: 4vw;
    top: -5vw;
    left: 13vw;
}

.animacioncabeceirabombilla img {
    width: 100%;
    height: 100%;
}

.bombilla {
    position: absolute;
}

.bombillaapagada {
    position: absolute;
    animation: bombillaencendida 5s linear infinite;
}

@keyframes bombillaencendida {

    0%,
    100% {
        opacity: 0%;
    }

    49.999% {
        opacity: 0%;
    }

    50% {
        opacity: 100%;
    }

    99.999% {
        opacity: 100%;
    }

}

.animacioncabeceiramartelo {
    position: relative;
    width: 4vw;
    height: 4vw;
    top: -9vw;
    left: 30vw;
}

.animacioncabeceiramartelo img {
    width: 100%;
    height: 100%;
}

.martelo {
    position: absolute;
    animation: martelo 1s linear infinite;
}

.martelo2 {
    opacity: 0%;
    position: absolute;
    animation: martelo 1s linear infinite;
    animation-delay: 0.5s;
}

@keyframes martelo {

    0%,
    100% {
        opacity: 100%;
    }

    49.99% {
        opacity: 100%;
    }

    50% {
        opacity: 0%;
    }

    99.99% {
        opacity: 0%;
    }

}

.animacioncabeceirapregunta {
    position: relative;
    width: 4vw;
    height: 4vw;
    top: -13vw;
    left: 47vw;
}

.animacioncabeceirapregunta img {
    width: 100%;
    height: 100%;
}

.pregunta {
    position: absolute;
    animation: pregunta 2s linear infinite;
}

@keyframes pregunta {

    0%,
    100% {
        scale: 0.8
    }

    50% {
        scale: 1.2;
    }

}

.animacioncabeceiramartelo2 {
    position: relative;
    width: 4vw;
    height: 4vw;
    top: -17vw;
    left: 65vw;
    transform: scaleX(-1);
}

.animacioncabeceirabombilla2 {
    position: relative;
    width: 4vw;
    height: 4vw;
    top: -21vw;
    left: 83vw;
}

/*contacto*/
.animacionsobre {
    position: relative;
    width: 4vw;
    height: 4vw;
    top: -5vw;
    left: 13vw;
}

.animacionsobre img {
    width: 100%;
    height: 100%;
}

.sobre1 {
    position: absolute;
    animation: martelo 1s linear infinite;
}

.sobre2 {
    opacity: 0%;
    position: absolute;
    animation: martelo 1s linear infinite;
    animation-delay: 0.5s;
}

.animacioncorazon {
    position: relative;
    width: 4vw;
    height: 4vw;
    top: -9vw;
    left: 30vw;
}

.animacioncorazon img {
    width: 100%;
    height: 100%;
}

.animacioncorazon {
    animation: pregunta 2s linear infinite;
}

.animaciondialogo {
    position: relative;
    width: 4vw;
    height: 4vw;
    top: -13vw;
    left: 47vw;
    animation: ladeo1 5s linear infinite;
}

.animaciondialogo img {
    width: 100%;
    height: 100%;
}

.dialogo1 {
    position: absolute;
    animation: dialogo 2s linear infinite;
}

.dialogo2 {
    opacity: 0%;
    position: absolute;
    animation: dialogo 2s linear infinite;
    animation-delay: 0.5s;
}

.dialogo3 {
    opacity: 0%;
    position: absolute;
    animation: dialogo 2s linear infinite;
    animation-delay: 1s;
}

.dialogo4 {
    opacity: 0%;
    position: absolute;
    animation: dialogo 2s linear infinite;
    animation-delay: 1.5s;
}

@keyframes dialogo {

    0%,
    100% {
        opacity: 100%;
    }

    25% {
        opacity: 100%;
    }

    25.001% {
        opacity: 0%;
    }

    99.999% {
        opacity: 0%;
    }
}

.animacionarroba {
    position: relative;
    width: 4vw;
    height: 4vw;
    top: -17vw;
    left: 65vw;
}

.animacionarroba img {
    width: 100%;
    height: 100%;
}

.arroba {
    animation: arroba 10s linear infinite;
}

@keyframes arroba {
    0% {
        rotate: 0deg
    }

    100% {
        rotate: -360deg
    }

}

.animacionhi {
    position: relative;
    width: 4vw;
    height: 4vw;
    top: -21vw;
    left: 83vw;
}

.animacionhi img {
    width: 100%;
    height: 100%;
}

.hi {
    animation: hi 6s linear infinite;
}

@keyframes hi {

    0%,
    100% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(-1);
    }

}

.xemacontacto {
    width: 15vw;
    height: 15vw;
    animation: maxiaportal1 10s linear infinite;
}

.xemacontacto img {
    width: 100%;
    height: 100%;
}

/*blog*/
.cabeceirablog{border: 2px dashed #ccc;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    transform: rotate(-2deg);
    background-color: rgba(224, 224, 78, 0.211);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1vw;}
.contedorblog {
    width: 90vw;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.blogesquerda {
    height: 8vw;
    width: 8vw;
    position: relative;
    top: -40vw;
    clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
         background: linear-gradient(90deg, rgba(7, 250, 23, 0.858) var(--porcentaxe1), rgba(22, 186, 44, 0.814) var(--porcentaxe2), rgba(2, 92, 23, 0.803) var(--porcentaxe3));
animation: fondofooter 2s linear infinite;
}

.blogdereita {
    height: 8vw;
    width: 8vw;
    position: relative;
    top: -40vw;
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
    background-color: #08ed2eb1;
     background: linear-gradient(-90deg, rgba(7, 250, 23, 0.858) var(--porcentaxe1), rgba(22, 186, 44, 0.814) var(--porcentaxe2), rgba(2, 92, 23, 0.803) var(--porcentaxe3));
animation: fondofooter 2s linear infinite;
}

.contedorartigos {
    display: flex;

    flex-wrap: nowrap;
    transition: all 0.5s linear;
}

.diapoartigo {
    min-width: 90vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1vw;
    padding: 1vw;
    background-color: rgba(245, 222, 179, 0.167);
    border-radius: 2vw;
}

.imaxediapo {
    width: 50vw;
    height: 50vw;
}

.imaxediapo img {
    width: 100%;
    height: 100%;
}

.contedorbotonsblog {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.comezoartigo{font-weight: bold;}
.indicadores {
    display: flex;
    justify-content: center;
    gap: 2vw;
    margin: 1vw 0;
}

.indicadores span {
    width: 1.5vw;
    height: 1.5vw;
    background: rgb(50, 105, 52);
    border-radius: 50%;
    cursor: pointer;
}

.indicadores span.activo {
    background: rgb(11, 228, 66);
}

/*querys*/
@media(max-width:900px) {
    .produto {
        width: 80%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        border: 1px solid;
        gap: 1vw;
        border-radius: 2vw;
    }

    .contidoproduto {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100%;
    }

    .ilustracionproduto {
        width: 100%
    }

    .ilustracionproduto video {
        width: 100%;
    }

    .ilustracionproduto img {
        width: 100%;
    }

    .textoproduto {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 1vw;
        gap: 1vw;
    }

    .textoproduto a {
        width: 10vw;
        height: 10vw;

    }

    .textoproduto a img {
        width: 100%;
        height: 100%;
    }
}

@media(max-width:600px) {
    header {
        margin-top: 7vw;
        height: 48vw;
    }

    .header__video {
        width: 90vw;
        height: 48vw;

    }

    .header__texto {
        width: 40vw;
        height: 20vw;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        padding: 2vw;
        left: 52vw;
        top: 50vw;
        rotate: -15deg;
    }

    .header__texto p {
        text-align: center;
        font-size: clamp(12px, 3vw, 25px);
    }

    .logogaliviart {
        width: 70vw;
        height: 29.4vw;
    }

    .contedoridiomas {
        top: 7vw;
        width: 30vw;
        height: 7.77vw;
    }

    .idiomaspechado {
        left: -21vw
    }

    .contedorfrechas {
        position: fixed;
        width: 85vw;
        height: 20vw;
        top: 80vh;
        left: 7.5vw;
        z-index: +22;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 50vw;
    }

    .frecha {
        width: 20vw;
        height: 20vw;
    }

    .frecha__esquerda {
        position: fixed;
        top: 80vh;
        left: 7.5vw;
        z-index: +22;
    }

    .frecha__dereita {
        position: fixed;
        top: 80vh;
        left: 75vw;
        z-index: +22;
    }

    .contedordescarga {
        width: 90vw;
        height: 45vw;
        gap: 6vw;
        padding: 1vw 15vw;
    }

    .descarga {
        width: 18vw;
        height: 18vw;
    }

    .ilustracioncontido1 {
        width: 90vw;
        height: 56.57vw;

    }

    .ilustracioncontido2 {
        width: 90vw;
        height: 45vw;

    }

    .fila {
        width: 90vw
    }

    .columna1 {
        width: 20vw;
    }

    .columna3 {
        width: 20vw;
    }

    .instrucionsdescarga {
        width: 20vw;
        height: 14vw;
        position: relative;
        top: -70%;
        left: 55%;
        rotate: -45deg;
        font-size: clamp(12px, 3vw, 30px);
    }

    .cabeceiradunkxar__logo {
        width: 40vw;
        height: 19.6vw;
    }

    .ilustracioncreacion {
        width: 90vw;
        height: 35, 43vw;
    }

    .ilustracionvisual1 {
        width: 50%;
        height: 50%;
    }

    .ilustracionvisual2 {
        width: 90vw;
        height: 73.17vw;
    }

    .contedorcontacto {
        width: 90vw;
        gap: 2vw;
        padding: 2vw;
        background-image: url(../assets/img/fondocontactomediaq.webp);
    }

    .caixacontacto {
        height: 32vw;
        width: 25vw;
    }

    .imaxe {
        height: 25vw;
        width: 25vw;
    }

    .descripcioncontacto {
        height: 7vw;
        width: 100%;

    }

    .footer__logo {
        width: 30vw;
    }

    .footer__logo img {
        width: 100%;
    }

    .contedorfooter {
        width: 40vw;
        border: 0.5vw solid;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 1vw;
        padding: 0.5vw 2vw;
        border-radius: 3vw;
    }

    .enlacefooter {
        width: 7vw;
        height: 7vw;
    }

    .contidoseccion {
        background-image: url(../assets/img/fondoseccionsbmediaq.webp);
    }

    body {
        background-image: url(../assets/img/fondobodymediaq.webp);
    }

    .footer {
        height: 45vw;
        gap: 1vw;
        padding-top: 3vw;
        padding-bottom: 1vw;
    }


        .imaxediapo {
            width: 75vw;
            height: 75vw;
        }
    
        .blogesquerda {
            height: 10vw;
            width: 10vw;
            position: relative;
            top: -60vw
        }
    
        .blogdereita {
            height: 10vw;
            width: 10vw;
            position: relative;
            top: -60vw
        }
    .animacioncabeceiradunkxar {
        top: -6vw;
    }

    .animacioncabeceiraxirarosa {
        top: -10vw;
    }

    .animacioncabeceiralume {
        top: -14vw;
    }

    .animacioncabeceiraxema1 {
        top: -18vw;
    }

    .animacioncabeceiraxema2 {
        top: -22vw;
    }

    .animacioncabeceiraxema3 {
        top: -26vw;
    }

    .htmllogo {
        top: -6vw;
    }

    .lapiz {
        top: -10vw;
    }

    .csslogo {
        top: -14vw;
    }

    .pluma {
        top: -18vw;
    }

    .jslogo {
        top: -22vw;
    }

    .animacionplanta {
        position: absolute;
        width: 15vw;
        height: 15vw;
        left: 75vw;
        display: block;

    }

    .animacionxureloide {
        position: absolute;
        width: 15vw;
        height: 15vw;
        left: 5vw;
        display: block;

    }
    .capturacabeceira2{display: none;}
    .capturacabeceira1{display: none;}
    .animacioncabeceirabombilla {
        top: -6vw;
    }

    .animacioncabeceiramartelo {
        top: -10vw;
    }

    .animacioncabeceirapregunta {
        top: -14vw;
    }

    .animacioncabeceiramartelo2 {
        top: -18vw;
    }

    .animacioncabeceirabombilla2 {
        top: -22vw;
    }

    .animacionsobre {
        top: -6vw;
    }

    .animacioncorazon {
        top: -10vw;
    }

    .animaciondialogo {
        top: -14vw;
    }

    .animacionarroba {
        top: -18vw;
    }

    .animacionhi {
        top: -22vw;
    }

    .portal {
        width: 20vw;
        height: 20vw;
    }

    .xemacontacto {
        width: 20vw;
        height: 20vw;
    }
}

@media(max-width:450px) {
    .animacioncabeceiradunkxar {
        top: -6.5vw;
    }

    .animacioncabeceiraxirarosa {
        top: -10.5vw;
    }

    .animacioncabeceiralume {
        top: -13.5vw;
    }
}

@media(max-width:327px) {
    .header__texto p {
        text-align: center;
        font-size: clamp(10px, 2vw, 25px);
        font-weight: 600;
    }
}