body {
     background: 
        linear-gradient(rgba(122, 3, 49, 0.288), rgba(156, 26, 80, 0.342)),
        url("cuadros.jpg");
        background-size: cover;
     background-attachment: fixed;

     color: rgb(0, 0, 0);
    
}

.estrellas {
    position: fixed;
    inset: 0;                /* top:0; right:0; bottom:0; left:0 */
    pointer-events: none;
    z-index: 0;

    /* pequeños puntos de luz */
    background:
        radial-gradient(2px 2px at 20% 10%, #fff, transparent 60%),
        radial-gradient(1.5px 1.5px at 80% 30%, #fff, transparent 60%),
        radial-gradient(2px 2px at 40% 70%, #fff, transparent 60%),
        radial-gradient(1px 1px at 60% 50%, #fff, transparent 60%);

    background-repeat: repeat;
    background-size: 200px 200px;

    animation: caerEstrellas 10s linear infinite;
}

@keyframes caerEstrellas {
    from { background-position: 0 0; }
    to   { background-position: 0 100vh; } /* se mueven hacia abajo */
}

.contenedor {
    max-width: 700px;
    margin: 60px auto;

    background: #ffffffc7;
    border-radius: 15px;

    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.perfil-img {
    
    width: 90%;
    height: 90%;
    object-fit: cover; 
    border-radius: 10px;

    border: 3px solid #ffb4cb;

    box-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
}

.player-bar {
    background: linear-gradient(to right, #c43c75, #f7639b);
    padding: 10px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    border-radius: 10px 10px 0 0;
}

.titulo {
    font-weight: bold;
}

.controles span {
    margin-left: 10px;
    cursor: pointer;
}

.header {
    background: #f1a6c5cc;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 15px;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "c1 c2"
        "c1 c3"
        "c4 c3";
    gap: 15px;
}

.c1 { grid-area: c1; }
.c2 { grid-area: c2; }
.c3 { grid-area: c3; }
.c4 { grid-area: c4; }
.c5 { grid-area: c5; }

.caja:nth-child(5) {
    grid-column: span 2;
}



.caja {
    background: #fa8bc8cb;
    padding: 15px;
    border-radius: 10px;
}


.caja {
    border: 1px solid #ee7291;
    box-shadow: 0 0 10px rgba(235, 54, 108, 0.774);
}



.img-caja {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 10px;
}

.menu {
    display: flex;
}

.boton {
    flex: 1;
    text-align: center;
    padding: 10px;
    background: #e9548d;
    border: 1px solid rgb(228, 94, 157);
    cursor: pointer;
}

.seccion {
    display: none;
}

/* Mostrar según radio activo */
#homeBtn:checked ~ .contenido .home {
    display: block;
}

.luz {
    position: fixed;
    width: 8px;
    height: 8px;
    background: #ffffff;
    border-radius: 50%;

    box-shadow: 0 0 10px #ffffff;

    animation: parpadear 2s infinite alternate;
    pointer-events: none;
}

/* Posiciones distintas */
.l1 { top: 80%; right: 20%; }
.l2 { top: 90%; left: 10%; animation-duration: 3s; }
.l3 { top: 80%; left: 40%; animation-duration: 1.5s; }
.l4 { top: 20%; right: 5%; animation-duration: 1.5s;}
.l5 { top: 70%; left: 60%; animation-duration: 1.5s;}

@keyframes parpadear {
    from {
        opacity: 0.2;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1.5);
    }
}