@keyframes openDialog {
    0%
    { 
        top: -10%;
        opacity: 0.5;
    }

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

@keyframes animacionFondo 
{
    0%
    {
        background-position: 0% 0%;
    }

    25%
    {
        background-position: 50% 50%;
    }

    50%
    {
        background-position: 100% 100%;
    }

    75%
    {
        background-position: 50% 50%;
    }

    100%
    {
        background-position: 0% 0%;
    }
}

@keyframes showSectionDownwards{
    0%
    { 
        max-height: 0px;
        clip-path: polygon(0 0, 100% 0%, 100% 0, 0 0); 
    }

    100%
    { 
        max-height: 1000px;
        clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
    }
}

@keyframes hideSectionUpwards {
    0%
    { 
        max-height: 1000px;
        clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
        margin-bottom: 30px;
    }

    100%
    { 
        max-height: 0px;
        clip-path: polygon(0 0, 100% 0%, 100% 0, 0 0);
        margin-bottom: 0px;
    }
}

.dialogAbierto
{
    animation: openDialog 0.25s linear forwards;
}

.cuerpoPantalla
{
    animation: animacionFondo 30s linear infinite;
    background-size: 200% 200%;
}

.seccionError
{
    animation: hideSectionUpwards 0.2s linear forwards;
    overflow: hidden;
    padding: 0px;
}

.seccionError.primeraVez
{
    animation: none;
    overflow: hidden;
    max-height: 0px;
    clip-path: polygon(0 0, 100% 0%, 100% 0, 0 0);
    padding: 0px;
    margin-bottom: 0px;
}

.seccionError.seccionVisible
{
    max-height: 1000px;
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%);
    animation: showSectionDownwards 0.6s cubic-bezier(0.7, 0, 1, 1) forwards;
    margin-bottom: 30px;
    padding: 16px;
    overflow: visible;
}