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

    body, html {
      height: 100%;
      font-family: 'Segoe UI', sans-serif;
    }

    #intro {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background: linear-gradient(135deg, #023490, #efc600); /* Fondo de color degradado */
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      animation: fadeOut 1s ease-in-out forwards;
      animation-delay: 20s;
    }

    .intro-contenido {
      display: flex;
      align-items: center;
      gap: 2rem;
      padding: 2rem;
      text-align: left;
    }

     .intro-img {
      width: 200px;
      height: auto;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
      transform: scale(4);
      animation: cinematicZoom 14s ease-in-out forwards;
    }

    .intro-text {
      font-size: 2.5rem;
      line-height: 1.3;
      color: white;
      opacity: 0;
      visibility: hidden;
      transition: opacity 6s ease, transform 6.5s ease;
      transform: translateY(20px);
    }

    .intro-text.visible {
      visibility: visible;
      opacity: 1;
      transform: translateY(0);
    }

    .intro-text.fade-out {
      opacity: 0;
      transform: translateY(-20px);
    }

    @keyframes cinematicZoom {
      0% {
        transform: scale(4);
        opacity: 0;
      }
      10% {
        opacity: 1;
      }
      40% {
        transform: scale(1);
      }
      75% {
        transform: scale(1);
      }
      100% {
        transform: scale(2.5);
        opacity: 0.7;
      }
    }

    @keyframes fadeOut {
     to {
        opacity: 0;
        visibility: hidden;
         }
    }