body{
margin:0;
font-family:'Poppins', sans-serif;
background-image:url("../img/fondo.avif");
background-size:cover;
background-position:center;
background-attachment:fixed;
}

/* HEADER */

header{
background:linear-gradient(90deg,#3D1717,#3D1717);
color:white;
text-align:center;
padding:35px;
animation:entrada 1s ease;
}

header h1{
font-family:'Pacifico', cursive;
background:#CF5D54;
font-size:50px;
margin:0;
color:#6b3e26;
animation:titulo 2s ease;
}

header p{
margin-top:10px;
font-size:18px;
}


/* MENU */

nav{
background:#CF5D54;
text-align:center;
padding:12px;
box-shadow:0px 4px 10px rgba(0,0,0,0.2);
}

nav a{
margin:20px;
text-decoration:none;
color:#800040;
font-weight:600;
font-size:18px;
transition:0.3s;
}

nav a:hover{
color:white;
background:#ff1493;
padding:8px 15px;
border-radius:20px;
}

/* CONTENIDO */

.principal{
text-align:center;
padding:70px;
animation:fadeUp 1.5s ease;
}

.principal h2{
font-family:'Pacifico', cursive;
font-size:40px;
color:#752B2B;
}

.principal p{
font-family:'Poppins', sans-serif;
font-size:18px;
color:#752B2B;
}

/* CAJA BLANCA INICIO */

.caja-inicio{
background:white;
padding:40px;
border-radius:15px;
max-width:800px;
margin:auto;
box-shadow:0px 8px 20px rgba(0,0,0,0.2);
}

/* CAJA NOSOTROS */

.caja-nosotros{
background:white;
padding:40px;
border-radius:15px;
max-width:800px;
margin:auto;
box-shadow:0px 8px 20px rgba(0,0,0,0.2);
}

.caja-nosotros h2{
font-family:'Poppins', sans-serif;
font-style:normal;
color:#c2185b;
}

.caja-nosotros p{
font-family:'Poppins', sans-serif;
font-style:normal;
font-size:18px;
line-height:1.6;
}

/* 	CAJA CONTACTO */

.caja-contacto{
background:white;
padding:40px;
border-radius:10px;
max-width:400px;
margin:auto;
box-shadow:0px 8px 20px rgba(0,0,0,0.2);
}

.caja-contacto p{
font-family:'Poppins', sans-serif;
font-style:normal;
font-size:20px;
line-height:1.6;
}

/* PRODUCTOS */

.productos{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
gap:30px;
padding:40px;
}

.contenedor {
display: flex;
}


.card{
background:white;
margin: 8px;
flex: 1;
padding:20px;
border-radius:15px;
box-shadow:0px 8px 20px rgba(0,0,0,0.2);
transition:0.4s;
}

.card:hover{
transform:translateY(-10px) scale(1.05);
}

.card img{
display:block;
margin:auto;
width:180px;
border-radius:10px;
}

.contacto{
text-align:center;
padding:40px;
}

.caja-contacto{
background:white;
padding:40px;
border-radius:15px;
max-width:600px;
margin:auto;
box-shadow:0px 8px 20px rgba(0,0,0,0.2);
}

/* BOTON */

.boton-pedir{
background-color:#EB3324;
color:white;
border:none;
padding:10px 20px;
border-radius:20px;
cursor:pointer;
font-size:16px;
margin-top:10px;
transition:0.3s;
}

.boton-pedir:hover{
background-color:#e63e74;
transform:scale(1.1);
}

/* BOTON MENU PROFESOR */

.boton-pedir-profesor{
background-color:#e63e74;
color:white;
border:none;
padding:10px 20px;
border-radius:20px;
cursor:pointer;
font-size:16px;
margin-top:10px;
transition:0.3s;
}

.boton-pedir-profesor:hover{
background-color:#e63e74;
transform:scale(1.1);
}

/* FOOTER */

footer{
background:#6b3e26;
color:white;
text-align:center;
padding:15px;
margin-top:40px;
}

/* ANIMACIONES */

@keyframes entrada{
from{
opacity:0;
transform:translateY(-50px);
}
to{
opacity:1;
transform:translateY(0);
}
}

@keyframes fadeUp{
from{
opacity:0;
transform:translateY(40px);
}
to{
opacity:1;
transform:translateY(0);
}
}

@keyframes titulo{
0%{
opacity:0;
transform:translateY(-60px);
}
100%{
opacity:1;
transform:translateY(0);
}
}

.menu-profesores{
text-align:center;
padding:50px;
}

.contenedor-profesores{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
gap:30px;
padding:20px;
}

.card-profesor{
background:white;
padding:20px;
border-radius:15px;
box-shadow:0px 5px 15px rgba(0,0,0,0.2);
}

.card-profesor img{
width:100%;
height:150px;
object-fit:cover;
border-radius:10px;
}

.precio{
font-weight:bold;
color:#8B4513;
font-size:18px;
}