body{
font-family: 'Inter', sans-serif;
margin:0;
background:#EFECE4;
}

/* CARDS */

.card{
width:300px;
margin:auto;
cursor:pointer;
background:white;
border-radius:20px;
overflow:hidden;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
transition:0.3s;
}

.card:hover{
transform:scale(1.03);
}

model-viewer{
width:100%;
height:250px;
}

/* CONFIGURADOR */

.configurador{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
backdrop-filter:blur(10px);
display:none;
align-items:center;
justify-content:center;
z-index:999;
animation:fade 0.3s;
}

.config-box{
background:white;
padding:20px;
border-radius:20px;
width:90%;
max-width:400px;
text-align:center;
}

.cerrar{
cursor:pointer;
float:right;
}

.colores{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
}

.color{
width:40px;
height:40px;
border-radius:50%;
cursor:pointer;
border:2px solid #ccc;
}

/* BOTONES */

.contacto-flotante{
position:fixed;
bottom:20px;
right:20px;
display:flex;
flex-direction:column;
gap:12px;
z-index:998;
opacity:0;
transform:translateY(30px);
animation:aparecer 1s forwards;
}

.btn-contacto{
width:55px;
height:55px;
border-radius:50%;
background:#FFFFFF;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
color:#000;
box-shadow:0 4px 10px rgba(0,0,0,0.2);
transition:0.3s;
}

.btn-contacto.whatsapp:hover{
background:#A4FEA4;
}

.btn-contacto.instagram:hover{
background:#FBB6DB;
}

.btn-contacto.mail:hover{
background:#CFA2FB;
}

/* ANIMACIONES */

@keyframes aparecer{
to{
opacity:1;
transform:translateY(0);
}
}

@keyframes fade{
from{opacity:0}
to{opacity:1}
}