* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 body {
   font-family: 'Segoe UI', Roboto, sans-serif;
   background: transparent;
   color: #222;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   position: relative;
   overflow-x: hidden;
 }

 .container {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   position: relative;
   z-index: 10;
 }

 h1 {
   font-size: 2.5rem;
   font-weight: 800;
   margin-top: 10vh;
   margin-bottom: 1rem;
   text-transform: uppercase;
   background: linear-gradient(135deg, #6a11cb, #2575fc);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   text-align: center;
   text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
   animation: fadeSlideIn 0.8s ease-out forwards;
   opacity: 0;
   transform: translateY(-20px);
 }

 .container p {
   font-size: 1.2rem;
   font-weight: 500;
   color: #fff;
   text-align: center;
   margin-bottom: 2rem;
   opacity: 0.9;
   text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
   animation: fadeSlideIn 1s ease-out 0.3s forwards;
   opacity: 0;
   transform: translateY(-10px);
 }

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

 .card-grid {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   width: 100%;
   max-width: 500px;
   justify-content: center;
   align-items: center;
   margin-bottom: 2rem;
 }

 .card {
   display: block;
   width: 100%;
   padding: 1.5rem;
   border-radius: 16px;
   font-size: 1.3rem;
   font-weight: 600;
   text-decoration: none;
   color: #fff;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
   transition: transform 0.2s ease, box-shadow 0.2s ease;
   text-align: center;
   backdrop-filter: blur(5px);
 }

 .card:hover {
   transform: translateY(-5px);
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
 }

 .card:active {
   transform: scale(0.96);
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
 }

 .gradient-1 {
   background: linear-gradient(135deg, #ff7e5f, #feb47b);
 }

 .gradient-2 {
   background: linear-gradient(135deg, #6a11cb, #2575fc);
 }

 .gradient-3 {
   background: linear-gradient(135deg, #43cea2, #185a9d);
 }

 .gradient-4 {
   background: linear-gradient(135deg, #f7971e, #ffd200);
 }

 @media (min-width: 768px) {
   .card-grid {
     flex-direction: row;
     flex-wrap: wrap;
   }

   .card {
     flex: 1 1 calc(50% - 1rem);
     margin: 0.5rem;
   }
 }

 /* Fondo animado con burbujas */
 .background-bubbles {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   pointer-events: none;
   overflow: hidden;
   background: linear-gradient(135deg, #8fa4f3 0%, #9d6cc0 100%);
 }

 /* Burbujas individuales */
 .bubble {
   position: absolute;
   border-radius: 50%;
   pointer-events: none;
   opacity: 0;
   animation: float 6s ease-in-out infinite;
 }

 .bubble:nth-child(1) {
   width: 80px;
   height: 80px;
   left: 10%;
   background: radial-gradient(circle, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
   animation-delay: 0s;
   animation-duration: 8s;
 }

 .bubble:nth-child(2) {
   width: 120px;
   height: 120px;
   left: 20%;
   background: radial-gradient(circle, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
   animation-delay: 2s;
   animation-duration: 10s;
 }

 .bubble:nth-child(3) {
   width: 60px;
   height: 60px;
   left: 35%;
   background: radial-gradient(circle, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
   animation-delay: 4s;
   animation-duration: 7s;
 }

 .bubble:nth-child(4) {
   width: 100px;
   height: 100px;
   left: 50%;
   background: radial-gradient(circle, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.08));
   animation-delay: 1s;
   animation-duration: 9s;
 }

 .bubble:nth-child(5) {
   width: 90px;
   height: 90px;
   left: 65%;
   background: radial-gradient(circle, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
   animation-delay: 3s;
   animation-duration: 8s;
 }

 .bubble:nth-child(6) {
   width: 140px;
   height: 140px;
   left: 75%;
   background: radial-gradient(circle, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.05));
   animation-delay: 5s;
   animation-duration: 11s;
 }

 .bubble:nth-child(7) {
   width: 70px;
   height: 70px;
   left: 85%;
   background: radial-gradient(circle, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.12));
   animation-delay: 1.5s;
   animation-duration: 6s;
 }

 .bubble:nth-child(8) {
   width: 110px;
   height: 110px;
   left: 5%;
   background: radial-gradient(circle, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.07));
   animation-delay: 3.5s;
   animation-duration: 9s;
 }

 @keyframes float {
   0% {
     transform: translateY(100vh) scale(0);
     opacity: 0;
   }

   10% {
     opacity: 1;
   }

   90% {
     opacity: 1;
   }

   100% {
     transform: translateY(-100px) scale(1);
     opacity: 0;
   }
 }

 /* Partículas adicionales flotantes */
 .particle {
   position: absolute;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.6);
   pointer-events: none;
   animation: particleFloat 15s linear infinite;
 }

 .particle:nth-child(odd) {
   width: 4px;
   height: 4px;
   animation-duration: 12s;
 }

 .particle:nth-child(even) {
   width: 6px;
   height: 6px;
   animation-duration: 18s;
 }

 @keyframes particleFloat {
   0% {
     transform: translateY(100vh) translateX(0);
     opacity: 0;
   }

   10% {
     opacity: 1;
   }

   90% {
     opacity: 1;
   }

   100% {
     transform: translateY(-10px) translateX(100px);
     opacity: 0;
   }
 }