/* Contenedor del carrusel: ocupa el 100% del viewport */
.carrusel_simple {
    position: relative;
    /*width: 100vw;
    height: 100vh;*/
    width: 95%;
    height: 95%;
    overflow: hidden;
    text-align: center;
    margin: 0 auto; /*Se usa si width es menor que 100% */
}

.carrusel_simple .sr-only {
    position: absolute;
    pointer-events: none;
    width: 1px;
    height: 1px;
    overflow: hidden;
    color: transparent;
}

.carrusel_simple input {
    position: absolute;
    opacity: 0;
    margin-top: 95vh;
    cursor: pointer;
}

.carrusel_simple label {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: solid 2px white;
    border-radius: 999px;
    background-color: transparent;
    margin: 95vh 6px 0 6px;
    z-index: 2;
    cursor: pointer;
    transition-duration: .4s;
    box-shadow: 0 0 20px 0 #000;
}

.carrusel_simple input:checked + label {
    background-color: white;
}

/* Flecha izquierda */
.carrusel_simple input + label::after {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512' width='100'%3E%3Ccircle cx='160' cy='256' r='250' fill='rgba(0,0,0,0.6)'/%3E%3Cpath d='M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center 55%;
    background-size: 80px 80px;
    transition: background-size 200ms;
    position: absolute;
    color: white;
    height: calc(95vh - 12px);
    width: 80px;
    top: 0;
    left: 0;
    z-index: 20;
}

.carrusel_simple input + label:hover::after {
    background-size: 90px 90px;
}

.carrusel_simple input:checked + label::after {
    background-image: none;
    width: 100%;
    left: 0;
    z-index: 10;
}

.carrusel_simple input:checked + label + .slide ~ input + label::after {
    display: none;
}

/* Flecha derecha */
.carrusel_simple input:checked + label + .slide + input + label::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512' width='100'%3E%3Ccircle cx='110' cy='256' r='250' fill='rgba(0,0,0,0.6)'/%3E%3Cpath d='M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z' fill='white'/%3E%3C/svg%3E");
    display: block;
    width: 80px;
    right: 0;
    left: auto;
}

.carrusel_simple input:focus + label {
    box-shadow: 0 0 0 2px teal, 0 0 18px white;
}

.carrusel_simple .slide {
    position: absolute;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    transform: translateX(-100%);
    transition-duration: .4s;
    opacity: 1;
}

.carrusel_simple input:checked ~ .slide {
    transform: translateX(100%);
}

.carrusel_simple input:checked + label + .slide {
    transform: translateX(0);
    opacity: 1;
}