* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Comic Neue", serif;
}

body {
    min-height: 100vh;
    display: grid;
    place-content: center;
    background: #f8f6f1;
    overflow: hidden;
}

#encabezado-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 60px;
}

#brillo {
    /*font-size: 60px;*/
	font-size: clamp(28px, 6vw, 60px);
    font-weight: bold;
	text-align: center;
    color: rgba(255, 0, 102, 0.3);
    z-index: 10;
    background: -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff)) 0 0 no-repeat;
    -webkit-background-size: 150px;
    -webkit-background-clip: text;
    -webkit-animation-name: brillo;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    text-shadow: 0 0px 0px rgba(233, 85, 189, 0.419);
}

@-webkit-keyframes brillo {
    0%, 10% { background-position: -1000px; }
    20% { background-position: top left; }
    90% { background-position: top right; }
    100% { background-position: 1000px; }
}

.galeria {
    --d: 10s; 
    display: grid;
    place-items: center;
    width: 320px;
    /*margin-left: 320px;*/
	margin: 0 auto; /* ✅ centra horizontalmente */
}

.galeria > img {
    grid-area: 1/1;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border: 10px solid #f2f2f2;
    box-shadow: 0 0 4px #0007;
    z-index: 2;
    animation: slide var(--d) infinite, z-order var(--d) infinite steps(1);
}

.galeria img:last-child {
    animation-name: slide, z-order-last;
}

.galeria > img:nth-child(1) { animation-delay: calc(0 * var(--d)); --r: 16deg; }
.galeria > img:nth-child(2) { animation-delay: calc(-0.2 * var(--d)); --r: -1deg; }
.galeria > img:nth-child(3) { animation-delay: calc(-0.4 * var(--d)); --r: -19deg; }
.galeria > img:nth-child(4) { animation-delay: calc(-0.6 * var(--d)); --r: 6deg; }
.galeria > img:nth-child(5) { animation-delay: calc(-0.8 * var(--d)); --r: -8deg; }

@keyframes slide {
    10% { transform: translateX(120%) rotate(var(--r)); }
    0%, 100%, 20% { transform: translateX(0%) rotate(var(--r)); }
}

@keyframes z-order {
    10%, 20% { z-index: 1; }
    80% { z-index: 2; }
}

@keyframes z-order-last {
    10%, 20% { z-index: 1; }
    90% { z-index: 2; }
}

@media only screen and (max-width: 600px) {
    #brillo { font-size: 22px; }
    
    .galeria {
        width: 500px;
        margin-left: 60px;
    }
}