ELEMENTOS
DE DISEÑO

<section class="relative min-h-screen flex items-center justify-center overflow-hidden pt-28" id="split-hero">
  <style>
    #split-hero .hover-left:hover {
      width: 60% !important;
    }
    #split-hero .hover-left:hover ~ .hover-right {
      width: 40% !important;
    }
    #split-hero .hover-right:hover {
      width: 60% !important;
    }
    #split-hero .hover-right:hover ~ .central-divider {
      left: 40% !important;
    }
    #split-hero .hover-left:hover ~ .central-divider {
      left: 60% !important;
    }
    #split-hero .hover-left:hover ~ .center-logo {
      left: 60% !important;
    }
    #split-hero .hover-right:hover ~ .center-logo {
      left: 40% !important;
    }
    #split-hero .hover-left,
    #split-hero .hover-right {
      transition: all 0.8s ease-out;
    }
    #split-hero .central-divider {
      transition: all 0.8s ease-out;
    }
    #split-hero .center-logo {
      transition: all 0.8s ease-out;
    }

    /* Card hide states - SMOOTH BUT FAST */
    #split-hero .card-hidden {
      opacity: 0 !important;
      transform: scale(0.95) !important;
    }

    /* Make the card container transitions smooth but quick */
    #split-hero .hover-left .absolute.inset-0.flex,
    #split-hero .hover-right .absolute.inset-0.flex {
      transition: opacity 0.25s ease-out, transform 0.25s ease-out !important;
    }
  </style>

  <!-- Left Image -->
  <div class="absolute left-0 top-0 w-1/2 h-full group cursor-pointer hover-left" style="width: 50%; right: auto;">
    <img src="TU_IMAGEN_IZQUIERDA.jpg" alt="Imagen Izquierda" class="w-full h-full object-cover group-hover:blur-sm transition-all duration-500">
    <div class="absolute inset-0 bg-black/30 group-hover:bg-black/70 transition-all duration-500"></div>

    <!-- Tarjeta Izquierda -->
    <div class="absolute inset-0 flex items-center justify-center z-10 transition-all duration-700 ease-out group-hover:opacity-100 opacity-100">
      <div class="bg-white/20 backdrop-blur-xl rounded-3xl lg:p-6 p-4 shadow-2xl ring-1 ring-white/20 text-center max-w-xs w-11/12 transition-all duration-500 group-hover:bg-white/30 group-hover:max-w-sm group-hover:p-8 flex flex-col justify-center group-hover:justify-start">
        <h2 class="text-white font-bold text-xl lg:text-2xl font-['Montserrat',sans-serif] leading-tight transition-all duration-500 group-hover:mb-3 lg:group-hover:mb-4">
          TÍTULO IZQUIERDO
        </h2>

        <!-- Navegación - Visible en Hover -->
        <div class="flex flex-col gap-2 lg:gap-3 opacity-0 max-h-0 overflow-hidden group-hover:opacity-100 group-hover:max-h-40 transition-all duration-500 ease-out">
          <a href="/enlace1" class="bg-[#2C3E50]/70 backdrop-blur-md hover:bg-[#34495E]/90 hover:shadow-lg hover:shadow-[#2C3E50]/20 text-white font-medium py-2.5 lg:py-3 px-5 lg:px-6 text-xs lg:text-sm rounded-2xl transition-all duration-300 shadow-lg border border-[#2C3E50]/40 font-['Montserrat',sans-serif]">
            ENLACE 1
          </a>
          <a href="/enlace2" class="bg-white/10 backdrop-blur-md text-white hover:bg-white/25 hover:shadow-lg hover:shadow-white/10 font-medium py-2.5 lg:py-3 px-5 lg:px-6 text-xs lg:text-sm rounded-2xl transition-all duration-300 shadow-lg border border-white/40 font-['Montserrat',sans-serif]">
            ENLACE 2
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- Right Image -->
  <div class="absolute right-0 top-0 w-1/2 h-full group cursor-pointer hover-right" style="width: 50%; left: auto;">
    <img src="TU_IMAGEN_DERECHA.jpg" alt="Imagen Derecha" class="w-full h-full object-cover group-hover:blur-sm transition-all duration-500">
    <div class="absolute inset-0 bg-black/30 group-hover:bg-black/70 transition-all duration-500"></div>

    <!-- Tarjeta Derecha -->
    <div class="absolute inset-0 flex items-center justify-center z-10 transition-all duration-700 ease-out group-hover:opacity-100 opacity-100">
      <div class="bg-white/20 backdrop-blur-xl rounded-3xl lg:p-6 p-4 shadow-2xl ring-1 ring-white/20 text-center max-w-xs w-11/12 transition-all duration-500 group-hover:bg-white/30 group-hover:max-w-sm group-hover:p-8 flex flex-col justify-center group-hover:justify-start">
        <h2 class="text-white font-bold text-xl lg:text-2xl font-['Montserrat',sans-serif] leading-tight transition-all duration-500 group-hover:mb-3 lg:group-hover:mb-4">
          TÍTULO DERECHO
        </h2>

        <!-- Navegación - Visible en Hover -->
        <div class="flex flex-col gap-2 lg:gap-3 opacity-0 max-h-0 overflow-hidden group-hover:opacity-100 group-hover:max-h-40 transition-all duration-500 ease-out">
          <a href="/enlace3" class="bg-[#2C3E50]/70 backdrop-blur-md hover:bg-[#34495E]/90 hover:shadow-lg hover:shadow-[#2C3E50]/20 text-white font-medium py-2.5 lg:py-3 px-5 lg:px-6 text-xs lg:text-sm rounded-2xl transition-all duration-300 shadow-lg border border-[#2C3E50]/40 font-['Montserrat',sans-serif]">
            ENLACE 3
          </a>
          <a href="/enlace4" class="bg-white/10 backdrop-blur-md text-white hover:bg-white/25 hover:shadow-lg hover:shadow-white/10 font-medium py-2.5 lg:py-3 px-5 lg:px-6 text-xs lg:text-sm rounded-2xl transition-all duration-300 shadow-lg border border-white/40 font-['Montserrat',sans-serif]">
            ENLACE 4
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- Divisor Central -->
  <div class="absolute top-0 w-1 h-full bg-white shadow-2xl z-10 central-divider" style="left: 50%; margin-left: -0.5px;"></div>

  <!-- Logo Central -->
  <div class="absolute z-20 center-logo" style="left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);">
    <div class="bg-white/30 backdrop-blur-xl rounded-3xl p-8 shadow-2xl ring-1 ring-white/20 flex items-center justify-center">
      <img src="TU_LOGO.png" alt="Logo" class="w-32 h-32 lg:w-40 lg:h-40 object-contain filter drop-shadow-2xl invert">
    </div>
  </div>

  <!-- Indicador de Scroll -->
  <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-10" style="left: 50%;">
    <div class="flex items-center justify-center">
      <i class="fas fa-chevron-down text-2xl opacity-60 text-white animate-bounce" aria-hidden="true"></i>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const leftHover = document.querySelector('#split-hero .hover-left');
      const rightHover = document.querySelector('#split-hero .hover-right');
      const leftCard = leftHover?.querySelector('.absolute.inset-0.flex');
      const rightCard = rightHover?.querySelector('.absolute.inset-0.flex');

      if (leftHover && rightHover && leftCard && rightCard) {
        // Left hover - hide right card
        leftHover.addEventListener('mouseenter', function() {
          rightCard.classList.add('card-hidden');
        });

        leftHover.addEventListener('mouseleave', function() {
          rightCard.classList.remove('card-hidden');
        });

        // Right hover - hide left card
        rightHover.addEventListener('mouseenter', function() {
          leftCard.classList.add('card-hidden');
        });

        rightHover.addEventListener('mouseleave', function() {
          leftCard.classList.remove('card-hidden');
        });
      }
    });
  </script>
</section>