﻿.caminoDeLaPalabra {
    position: relative;
    margin-top: 3em;
}

.btn-regresar {
    position: absolute;
    right: .5em;
    top: .5em;
}

.btn-regresar > img,
.clsButtonCamino > img {
    transition: transform 0.3s;
}

.btn-regresar:hover > img,
.clsButtonCamino:hover> img {
    transform: scale(1.05);
}

.textoBienvenido {
    position: absolute;
    left: 58%;
    width: 32%;
    bottom: 73%;
}

.text-amarillo {
    color: #ff9600;
}

.clsButtonCamino {
    max-width: 29em;
    position: absolute;
}

.title-btnCamino {
    color: #049100;
    font-weight: 700;
    width: max-content;
}

.text-btnCamino {
    line-height: 1;
}

.btn-cuentos {
    left: 5%;
    bottom: 65%
}

.btn-historias {
    left: 50%;
    bottom: 35%;
}

.btn-Narrativas {
    left: 5%;
    bottom: 26%;
}

.quiero-aportar {
    --ancho: 22em;
    --left: calc(var(--ancho) / 2);
    max-width: var(--ancho);
    line-height: 1;
    position: absolute;
    left: calc(50% - var(--left));
    bottom: 3.5em;
}

.informacion-logueado {
    position: absolute;
    bottom: .5em;
    left: calc(50% - 350px);
}

@media (max-width: 1150px) {
    .caminoDeLaPalabra {
        margin-top: 7em;
    }

    .textoBienvenido {
        bottom: 69%;
    }

    .btn-cuentos {
        bottom: 60%;
    }

    .btn-historias {
        bottom: 26%;
    }
}

@media (max-width: 945px) {
    .btn-historias {
        bottom: 20%;
    }

    .btn-Narrativas {
        bottom: 5%;
    }

    .quiero-aportar,
    .informacion-logueado {
        position: static;
    }
}

@media (max-width: 898px) {
    .caminoDeLaPalabra {
        margin-top: 8em;
    }
}

@media (max-width: 832px) {
    .btn-historias {
        bottom: 16%;
    }
}

@media (max-width: 770px) {
    .caminoDeLaPalabra {
        margin-top: 11em;
    }

    .clsButtonCamino {
        max-width: 23em;
    }

    .btn-historias {
        bottom: 6%;
    }

    .btn-Narrativas {
        bottom: 3%;
    }
}