```css id="3p6jfa"
/*
=================================================

CENTRO VIRTUAL DE AUTOAPRENDIZAJE

Archivo:
estilos.css

Diseño general responsive

=================================================
*/



/* ==========================
   CONFIGURACIÓN GENERAL
========================== */


*{

margin:0;
padding:0;
box-sizing:border-box;

}



body{


font-family:'Montserrat',Arial,sans-serif;


background:

linear-gradient(
135deg,
#eff6ff,
#f8fafc
);


color:#0f172a;


min-height:100vh;


}



.container{


width:100%;


max-width:1200px;


margin:auto;


padding:30px;


}




/* ==========================
   BOTONES
========================== */


.btn{


display:block;


padding:16px 25px;


background:

linear-gradient(
135deg,
#2563eb,
#0ea5e9
);


color:white;


text-decoration:none;


border-radius:18px;


font-weight:800;


text-align:center;


transition:.3s;


cursor:pointer;


border:none;


}



.btn:hover{


transform:translateY(-3px);


opacity:.9;


}





/* ==========================
   ENCABEZADOS
========================== */


.titulo{


font-size:32px;


font-weight:800;


margin-bottom:25px;


}



.subtitulo{


color:#64748b;


font-size:18px;


line-height:1.6;


}





/* ==========================
   HERO PRINCIPAL
========================== */


.hero{


background:


linear-gradient(

90deg,

rgba(15,23,42,.92),

rgba(37,99,235,.85)

);


background-size:cover;


background-position:center;


padding:55px;


border-radius:35px;


color:white;


box-shadow:


0 20px 45px rgba(0,0,0,.18);


margin-bottom:35px;


}




.hero h1{


font-size:45px;


font-weight:800;


margin-bottom:20px;


}



.hero p{


font-size:18px;


line-height:1.7;


opacity:.9;


}



/* ==========================
   TARJETAS
========================== */


.grid{


display:grid;


grid-template-columns:

repeat(auto-fit,minmax(280px,1fr));


gap:25px;


}




.card{


background:white;


padding:30px;


border-radius:28px;


box-shadow:


0 10px 30px rgba(0,0,0,.08);


transition:.3s;


}




.card:hover{


transform:translateY(-7px);


}




.card h2{


font-size:22px;


margin-bottom:15px;


}




.card p{


color:#64748b;


line-height:1.6;


}





/* ==========================
   LOGO
========================== */


.logo{


display:flex;


align-items:center;


gap:15px;


font-size:24px;


font-weight:800;


}



.logo img{


width:60px;


height:60px;


object-fit:contain;


}




/* ==========================
   RECURSOS MULTIMEDIA
========================== */


.media{


width:100%;


aspect-ratio:16/9;


height:auto;


border:none;


border-radius:20px;


}





.spotify{


width:100%;


height:250px;


}





/* ==========================
   FORMULARIOS LOGIN
========================== */


.input{


width:100%;


padding:16px;


border-radius:15px;


border:2px solid #e2e8f0;


font-size:16px;


margin-bottom:15px;


outline:none;


}



.input:focus{


border-color:#2563eb;


}





/* ==========================
   TRIVIA
========================== */


.pregunta{


font-size:22px;


font-weight:800;


margin-bottom:20px;


}




.opcion{


display:block;


width:100%;


padding:18px;


border-radius:18px;


border:2px solid #e2e8f0;


background:white;


margin-bottom:15px;


cursor:pointer;


transition:.3s;


font-size:16px;


}



.opcion:hover{


background:#eff6ff;


border-color:#2563eb;


}





/* ==========================
   BOTÓN SALIR
========================== */


.salir{


background:#ef4444;


color:white;


padding:12px 20px;


border:none;


border-radius:15px;


font-weight:700;


cursor:pointer;


}



/* ==========================
   PIE DE PÁGINA
========================== */


.footer{


text-align:center;


padding:30px;


color:#94a3b8;


font-size:14px;


}





/* ==========================
   RESPONSIVE CELULAR
========================== */



@media(max-width:768px){



.container{


padding:20px;


}




.hero{


padding:30px 20px;


border-radius:25px;


}



.hero h1{


font-size:30px;


}




.hero p{


font-size:16px;


}





.grid{


grid-template-columns:1fr;


}




.card{


padding:22px;


}





.logo{


font-size:18px;


}




.logo img{


width:45px;


height:45px;


}





.titulo{


font-size:26px;


}




.btn{


font-size:16px;


padding:18px;


}




.media{


aspect-ratio:16/9;


}




.opcion{


padding:20px;


font-size:16px;


}




}




@media(max-width:480px){



body{


font-size:15px;


}




.hero h1{


font-size:26px;


}



.card h2{


font-size:20px;


}



}

```