.banner-split{
    padding-top: 3.125rem;
    max-width: 100vw;
    min-height:100vh ;
    display: flex;
    max-height: 98vh;
    overflow: hidden;
}
.panel {
    /* 1. HACER CADA PANEL LA MITAD (50%) DEL CONTENEDOR FLEX */
    flex-basis: 50%; /* Es más común en Flexbox que width: 50% */
    /* Opcional: Asegurar que la imagen no estire el panel */
    flex-grow: 0;
    flex-shrink: 0; 
    /* 2. HACER EL PANEL EL CONTENEDOR RELATIVO PARA SUS HIJOS */
    position: relative; 
    background-color: black;
    
    /* Opcional: Asegurar que el contenido no se salga */
    overflow: hidden;
}
/* Para que la imagen ocupe todo el espacio del panel */

.panel img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
    object-position: center top; 
    
    /* 🔥 PEGA ESTO AQUÍ (ANTES NO LO TENÍAS EN ESTE BLOQUE) */
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

/* Para posicionar el enlace de superposición sobre el panel (que es relativo) */
.overlay-link {
    font-weight: 900;
    position: absolute; /* Se posiciona en relación a su padre .panel (que es relativo) */
    top: 85%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centra el enlace perfectamente */
    z-index: 10; /* Asegura que esté por encima de la imagen */
    /* Estilos adicionales para el texto... */
    color: var(--color-bg);
    text-decoration: none;
    font-size: 3.215rem;
    padding: 10px 20px; 
}
/* LÍNEA CENTRAL FIJA (SIEMPRE VISIBLE) */
.text-anchor::before {
    content: ''; 
    position: absolute;
    bottom: 0;
    
    /* Configuración para que sea una línea corta en el centro */
    left: 50%; /* Inicia en el centro */
    transform: translateX(-50%); /* Ajusta al centro */
    width: 20px; /* Tamaño pequeño, ajusta a tu gusto */
    
    height: 3px; 
    background-color: var(--color-bg); 
}
/* LÍNEA EXPANDIBLE (SE OCULTA CON ANCHO CERO) */
.text-anchor::after {
    content: ''; 
    position: absolute;
    bottom: 0; 
    left: 50%; /* Empezamos en el centro */
    
    width: 0; /* 🔑 Ancho inicial cero */
    height: 3px; 
    background-color: var(--color-bg); 
    
    /* 🔑 La animación se aplica a la posición y el tamaño */
    transition: width 0.3s ease-out, left 0.3s ease-out; 
}

/* EFECTO HOVER: Expande la línea */
.overlay-link:hover .text-anchor::after {
    width: 100%; /* La línea crece al 100% del ancho del texto */
    left: 0; /* Mueve el inicio de la línea a la izquierda */
}
@media (max-width: 768px) {
  .banner-split {
    flex-direction: column;
    max-height: none;
  }

  .panel {
    flex-basis: auto;
    width: 100%;
    height: auto; /* 🔑 deja que crezca según proporción */
  }

  .panel img {
    width: 100%;
    height: auto; /* 🔑 no fuerza a cubrir, conserva cabeza */
    object-fit: contain; /* muestra todo sin cortar */
    object-position: center top; /* 🔑 enfoca arriba */

  }

  .overlay-link {
    top: auto;
    bottom: 15%;
    font-size: 2rem;
  }
}
.panel img.visible {
    opacity: 1;
}