*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    width:100vw;
    height:100vh;

    overflow:hidden;

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

    background:#f6dce6;

    transition:
        background-color 1.2s ease;
}

#container{

    width:500px;
    height:500px;

    cursor:pointer;

    animation:
        float 8s ease-in-out infinite;
}

svg{

    width:100%;
    height:100%;
}

#shape{

    fill:white;
}

@keyframes float{

    0%{
        transform:
            translateY(0px)
            rotate(0deg);
    }

    25%{
        transform:
            translateY(-8px)
            rotate(-1deg);
    }

    50%{
        transform:
            translateY(5px)
            rotate(1deg);
    }

    75%{
        transform:
            translateY(-5px)
            rotate(-0.5deg);
    }

    100%{
        transform:
            translateY(0px)
            rotate(0deg);
    }

}

#world{

    position:fixed;

    inset:0;

    width:100vw;
    height:100vh;

    z-index:1;

}

#container{

    z-index:10;

}

#escena3d{

    width:240px;
    height:1240px;

    position:absolute;

    top:50%;
    left:50%;

    transform:
        translate(-50%,-50%);

    display:none;

    z-index:20;
    pointer-events:none;

}

#escena3d model-viewer{

    width:100%;
    height:100%;

}

#flashOverlay{

    position:fixed;

    inset:0;

    opacity:0;

    pointer-events:none;

    z-index:9999;

}

@font-face{

    font-family:"ArgentumSans";
    src:url("../fuentes/ArgentumSans-Bold.ttf")
        format("truetype");

    font-weight:700;
    font-style:normal;
}

#instrucciones {
    position: fixed;
    top: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* CAMBIO AQUÍ: */
    font-family: 'ArgentumSans', sans-serif; 
    font-weight: 700;
    
    font-size: 2rem;
    color: #8c2041;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease;
    text-align: center;
    white-space: nowrap;
}

/* Contenedor padre que centra todo en la pantalla */
/* El contenedor padre solo sirve para organizar, no para la opacidad */
#overlay-reinicio {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

/* El círculo tiene su propia transición */
#circulo-reinicio {
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
    pointer-events: auto;
    opacity: 0; /* Empieza invisible */
    transition: opacity 600ms ease;
}

/* El contenedor del texto también tiene su propia transición */
.ui-contenedor {
    pointer-events: auto;
    text-align: center;
    margin-bottom: 40px;
    opacity: 0; /* Empieza invisible */
    transition: opacity 600ms ease;
}

.texto-reinicio {
    font-family: 'ArgentumSans', sans-serif;
    font-size: 1.2rem;
    color: #ffffff;
    margin-bottom: 15px;
}

.btn-volver {
    font-family: 'ArgentumSans', sans-serif;
    background-color: #ffffff;
    color: #8c2041;
    padding: 10px 25px;
    text-decoration: none;
    
    /* CAMBIO AQUÍ: de 25px a 0 para que sea un rectángulo */
    border-radius: 0px; 
    
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.3s ease;
    pointer-events: auto;
    
    /* Opcional: añade un borde si quieres que destaque más como rectángulo */
    border: 2px solid #ffffff; 
}

.btn-volver:hover {
    background-color: #8c2041;
    color: #ffffff;
    border-color: #ffffff;
}