body{
margin:0;
font-family:Arial, sans-serif;
text-align:center;
background:#f5f5f5;
}

/* INICIO */
#inicio{
height:100vh;
background-image:url("imagenes/fondo.png");
background-size:cover;
background-position:center;
position:relative;
}

/* BOTONES PRINCIPALES */
.botones{
position:absolute;
bottom:15%;
left:50%;
transform:translateX(-50%);
display:flex;
flex-direction:column;
align-items:center;
gap:15px;
}

.botones button{
font-family:"Comic Sans MS", cursive;
font-size:28px;
padding:15px 40px;
border:none;
border-radius:25px;
cursor:pointer;
transition:0.3s;
}

/* BOTÓN MENÚ */
.botones button:first-child{
background:linear-gradient(135deg, #ff9800, #ff5722);
color:white;
box-shadow:0 6px 15px rgba(0,0,0,0.3);
}

/* BOTÓN PERSONALIZAR */
.botones button:last-child{
background:white;
color:#333;
font-size:20px;
padding:10px 30px;
border:2px solid #ccc;
}

/* HOVER / CLICK */
.botones button:hover{
transform:scale(1.05);
}

.botones button:active{
transform:scale(0.95);
}

/* PANTALLAS */
.pantalla{
display:none;
padding:20px;
animation:fadeIn 0.3s ease;
}

.scroll{
height:100vh;
overflow-y:auto;
}

/* ANIMACIÓN */
@keyframes fadeIn{
from{opacity:0; transform:translateY(10px);}
to{opacity:1; transform:translateY(0);}
}

/* GRID */
.grid{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:15px;
margin-top:20px;
}

/* TARJETAS */
.card{
width:110px;
height:110px;
border-radius:15px;
overflow:hidden;
cursor:pointer;
background:white;
box-shadow:0 4px 10px rgba(0,0,0,0.2);
transition:0.2s;
}

.card img{
width:100%;
height:100%;
object-fit:cover;
}

/* HOVER TARJETAS */
.card:hover{
transform:scale(1.05);
}

/* SELECCION */
.card.seleccionado{
border:4px solid #4caf50;
box-shadow:0 0 12px rgba(76,175,80,0.8);
transform:scale(1.08);
}

/* NAV (BOTONES ATRÁS / SIGUIENTE) */
.nav{
display:flex;
justify-content:center;
gap:20px;
margin-top:30px;
}

.nav button{
font-size:20px;
padding:14px 35px;
border-radius:30px;
border:none;
cursor:pointer;
transition:0.2s;
min-width:140px;
box-shadow:0 4px 10px rgba(0,0,0,0.2);
}

/* ATRÁS */
.nav button:first-child{
background:#ddd;
color:#333;
}

/* SIGUIENTE */
.nav button:last-child{
background:linear-gradient(135deg, #4caf50, #2e7d32);
color:white;
}

/* HOVER */
.nav button:hover{
transform:scale(1.05);
}

/* CLICK */
.nav button:active{
transform:scale(0.95);
}

/* EMAIL SCREEN */
#emailScreen{
height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:15px;
}

#emailScreen input{
padding:10px;
font-size:16px;
border-radius:10px;
border:1px solid #ccc;
width:250px;
}

#emailScreen button{
padding:10px 20px;
border:none;
border-radius:10px;
background:#2196f3;
color:white;
font-size:16px;
cursor:pointer;
transition:0.2s;
}

#emailScreen button:hover{
transform:scale(1.05);
}

.config-acciones{
display:flex;
justify-content:center;
margin-top:40px;
margin-bottom:40px;
}

.config-acciones button{
font-size:20px;
padding:14px 35px;
border-radius:30px;
border:none;
cursor:pointer;
transition:0.2s;
min-width:160px;
background:linear-gradient(135deg, #4caf50, #2e7d32);
color:white;
box-shadow:0 4px 10px rgba(0,0,0,0.2);
}

.config-acciones button:hover{
transform:scale(1.05);
}

.config-acciones button:active{
transform:scale(0.95);
}