/* ===================================================
       INTRO SPLASH SCREEN / BIENVENIDA (DARK NAVY & 3s)
       =================================================== */
    .intro-splash-overlay {
      position: fixed;
      inset: 0;
      width: 100vw;
      height: 100vh;
      height: 100dvh;
      z-index: 999999;
      background: radial-gradient(circle at 50% 30%, #001E42 0%, #001229 55%, #000814 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 24px 20px 70px 20px;
      overflow: hidden;
      transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: opacity, transform, filter;
    }

    .intro-splash-overlay.unlocking {
      opacity: 0;
      transform: scale(1.14);
      filter: blur(16px);
      pointer-events: none;
    }

    .intro-ambient-glow {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      filter: blur(65px);
    }

    .intro-glow-1 {
      width: 440px;
      height: 440px;
      top: 16%;
      left: 50%;
      transform: translateX(-50%);
      background: radial-gradient(circle, rgba(0, 80, 160, 0.20) 0%, rgba(0, 30, 70, 0.08) 55%, transparent 75%);
      animation: introGlowPulse1 3.5s ease-in-out infinite alternate;
      z-index: 1;
    }

    .intro-glow-2 {
      width: 360px;
      height: 360px;
      bottom: 14%;
      left: 50%;
      transform: translateX(-50%);
      background: radial-gradient(circle, rgba(0, 100, 190, 0.14) 0%, rgba(0, 20, 50, 0.12) 60%, transparent 80%);
      animation: introGlowPulse2 4s ease-in-out infinite alternate;
      z-index: 1;
    }

    @keyframes introGlowPulse1 {
      0% { transform: translateX(-50%) scale(0.92); opacity: 0.7; }
      100% { transform: translateX(-50%) scale(1.15); opacity: 1; }
    }

    @keyframes introGlowPulse2 {
      0% { transform: translateX(-50%) scale(1.1); opacity: 0.6; }
      100% { transform: translateX(-50%) scale(0.9); opacity: 0.9; }
    }

    .intro-center-card {
      position: relative;
      z-index: 5;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      max-width: 360px;
      width: 100%;
    }

    .intro-logo-wrapper {
      position: relative;
      width: 260px;
      height: 110px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24px;
      transform: translateX(18px);
    }

    .intro-logo-glass {
      position: relative;
      width: 100%;
      height: 100%;
      background: transparent;
      border: none;
      box-shadow: none;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: introLogoDynamicMove 2.6s ease-in-out infinite alternate;
      z-index: 2;
    }

    @keyframes introLogoDynamicMove {
      0% {
        transform: translateY(2px) scale(0.97);
      }
      50% {
        transform: translateY(-8px) scale(1.04);
      }
      100% {
        transform: translateY(2px) scale(0.97);
      }
    }

    .intro-logo-img {
      width: 100%;
      max-width: 240px;
      height: auto;
      max-height: 92px;
      object-fit: contain;
      position: relative;
      z-index: 3;
      filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 16px rgba(56, 189, 248, 0.75));
      animation: introLogoGlowPulse 2.4s ease-in-out infinite alternate;
    }

    @keyframes introLogoGlowPulse {
      0% {
        filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 12px rgba(0, 163, 224, 0.6));
        opacity: 0.92;
      }
      100% {
        filter: brightness(0) invert(1) drop-shadow(0 4px 14px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 24px rgba(56, 189, 248, 0.95)) drop-shadow(0 0 40px rgba(0, 163, 224, 0.5));
        opacity: 1;
      }
    }

    .intro-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(0, 163, 224, 0.15);
      border: 1px solid rgba(0, 163, 224, 0.4);
      color: #7DD3FC;
      font-size: 0.64rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      padding: 5px 12px;
      border-radius: 20px;
      margin-bottom: 12px;
      text-transform: uppercase;
    }

    .intro-title {
      color: #FFFFFF;
      font-size: 1.25rem;
      font-weight: 800;
      letter-spacing: -0.01em;
      line-height: 1.25;
      margin-bottom: 4px;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    }

    .intro-name {
      color: #38BDF8;
      font-size: 1.05rem;
      font-weight: 700;
      margin-bottom: 2px;
    }

    .intro-company {
      color: #BAE6FD;
      font-size: 0.74rem;
      font-weight: 500;
      margin-bottom: 22px;
    }

    .intro-loader-box {
      width: 100%;
      background: rgba(0, 14, 34, 0.72);
      border: 1px solid rgba(255, 255, 255, 0.1);
      padding: 12px 16px;
      border-radius: 14px;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    }

    .intro-progress-track {
      width: 100%;
      height: 6px;
      background: rgba(255, 255, 255, 0.14);
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 8px;
      position: relative;
    }

    .intro-progress-bar {
      width: 0%;
      height: 100%;
      background: linear-gradient(90deg, #00A3E0 0%, #38BDF8 50%, #34D399 100%);
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(56, 189, 248, 0.7);
      transition: width 0.05s linear;
    }

    .intro-status-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.69rem;
      font-weight: 600;
      color: #CBD5E1;
    }

    #introPercentText {
      color: #38BDF8;
      font-weight: 800;
      font-family: monospace;
    }

    .intro-unlock-badge {
      margin-top: 14px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: #34D399;
      font-size: 0.76rem;
      font-weight: 800;
      letter-spacing: 0.04em;
      opacity: 0;
      transform: translateY(6px);
      transition: all 0.25s ease;
    }

    .intro-unlock-badge.active {
      opacity: 1;
      transform: translateY(0);
    }

    /* FOOTER BRAND: SEGUROS MONTERREY & PATRIMONIA SUTIL */
    .intro-footer-brand {
      position: absolute;
      bottom: 85px;
      bottom: calc(85px + env(safe-area-inset-bottom, 0px));
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 7px;
      z-index: 5;
      opacity: 0.88;
      transition: opacity 0.3s ease;
      pointer-events: none;
      width: 100%;
      max-width: 360px;
    }

    .intro-footer-label {
      font-size: 0.58rem;
      font-weight: 700;
      letter-spacing: 0.15em;
      color: #7DD3FC;
      opacity: 0.88;
      text-transform: uppercase;
    }

    .intro-footer-logos-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      width: 100%;
    }

    .intro-footer-logo {
      height: 22px;
      width: auto;
      max-width: 135px;
      object-fit: contain;
      filter: brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
    }

    .intro-footer-logo-patrimonia {
      height: 20px;
      max-width: 125px;
    }

    .intro-footer-divider {
      width: 1px;
      height: 18px;
      background: rgba(255, 255, 255, 0.3);
      flex-shrink: 0;
    }

    .mobile-container {
      animation: cardRevealIntro 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes cardRevealIntro {
      0% { opacity: 0.8; transform: scale(0.98); }
      100% { opacity: 1; transform: scale(1); }
    }