body {
     font-family: Arial;
     background: #f4f4f4;
     padding: 40px;
 }

 .menu {
     text-align: center;
     margin-bottom: 30px;
 }

 .btn {
     padding: 12px 25px;
     border: none;
     cursor: pointer;
     margin: 5px;
     border-radius: 5px;
     font-size: 16px;
 }

 .btn-primary {
     background: darkturquoise;
 }

 .btn-primary:hover {
     background: #243060;
     color: white;
 }

 .formulario {
     display: none;
 }

 .formulario.active {
     display: block;
 }

 body {
     margin: 0;
     padding: 0;
     background: #EEF1F6;
     font-family: 'IBM Plex Sans', sans-serif;
     color: #1A2540;
 }

 .hero {
     width: 100%;
     padding: 50px 20px 30px;
     text-align: center;
 }

 .hero img {
     width: 220px;
     max-width: 100%;
     margin-bottom: 20px;
 }

 .hero h1 {
     font-size: 34px;
     margin-bottom: 12px;
     color: #1A2540;
 }

 .hero p {
     max-width: 850px;
     margin: 0 auto;
     font-size: 16px;
     line-height: 1.7;
     color: #5A6070;
 }

 .menu {
     display: flex;
     justify-content: center;
     gap: 20px;
     flex-wrap: wrap;
     margin: 40px 0;
 }

 .menu-card {
     background: white;
     border-radius: 10px;
     width: 320px;
     padding: 30px;
     box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08);
     transition: .2s ease;
     border: 1px solid #D8DCE6;
 }

 .menu-card:hover {
     transform: translateY(-4px);
 }

 .menu-card h2 {
     margin-top: 0;
     margin-bottom: 15px;
     color: #1A2540;
     font-size: 22px;
 }

 .menu-card p {
     font-size: 14px;
     line-height: 1.6;
     color: #5A6070;
     margin-bottom: 25px;
 }

 .btn {
     width: 100%;
     padding: 14px;
     border: none;
     border-radius: 6px;
     background: darkturquoise;
     font-size: 15px;
     font-weight: 600;
     cursor: pointer;
     transition: .2s ease;
 }

 .btn:hover {
     background: #243060;
     color: white;
 }

 .contenedor-formulario {
     margin-top: 30px;
     margin-bottom: 60px;
 }

 .formulario {
     display: none;
 }

 .formulario.active {
     display: block;
 }

 .mensaje-inicial {
     max-width: 700px;
     margin: 0 auto 40px;
     background: white;
     padding: 40px;
     border-radius: 10px;
     text-align: center;
     box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08);
 }

 .mensaje-inicial h2 {
     margin-bottom: 15px;
     color: #1A2540;
 }

 .mensaje-inicial p {
     color: #5A6070;
     line-height: 1.6;
 }