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

body {
    background-color: #000;
    color: #fff;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    height: 100vh;
    overflow: hidden;
}

.container {
    display: flex; /* Usamos Flexbox para simplificar el solapamiento */
    height: 100vh;
    position: relative;
    width: 100%;
}

/* Sección izquierda (Texto) */
.info {
    flex: 1; /* Ocupa todo el espacio disponible inicialmente */
    padding: 80px 50px 50px 60px; /* Arriba, Dch, Abajo, Izq */
    z-index: 2; /* Delante de la foto */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Fondo semitransparente para asegurar legibilidad cuando se solape */
    background: rgba(0, 0, 0, 0.6); 
}

/* Ajuste para pantallas muy grandes para que el texto no ocupe demasiado */
@media (min-width: 1400px) {
    .info {
        flex: 0 0 40%; /* El texto ocupa max 40% del ancho */
    }
}

h1 { font-size: 4rem; margin-bottom: 20px; }
.subtitle { font-size: 1.5rem; margin-bottom: 20px; color: #ccc; }
.texto { font-size: 0.8rem; margin-bottom: 20px; color: #ccc; }

.contact { margin-bottom: 30px; font-size: 1.2rem; }
.contact a {
    color: #fff;
    transition: color 0.3s;
}
.contact a:hover { color: #ffcc00; }

.social-icons a {
    font-size: 1.8rem;
    margin-right: 20px;
    color: #fff;
    transition: color 0.3s;
}
.social-icons a:hover { color: #ffcc00; }

/* Sección derecha (Foto de Fondo) */
.photo-bg {
    position: absolute; 
    top: 0;
    right: 0;
    width: 100%;
    /* Aseguramos que ocupe todo el alto de la pantalla siempre */
    height: 100vh; 
    z-index: 1; 
    
    /* --- CONFIGURACIÓN CLAVE MODIFICADA --- */
    background-image: url('foto.webp'); /* RUTA A TU FOTO */
    
    /* background-size: cover; <- ESTO YA NO VALE */
    
    /* Le decimos al navegador: 
       1. Ancho: 'auto' (mantiene la proporción real de la imagen).
       2. Alto: '100vh' (fuerza a que mida lo mismo que la ventana).
       Esto provoca que, en pantallas muy anchas, la imagen sobrepase el ancho 
       por la izquierda, pero mantenga el alto completo. */
    background-size: auto 100vh;
    
    /* Mantiene la imagen anclada a la derecha. 
       Si la imagen es muy ancha, el sobrante se oculta por la izquierda. */
    background-position: right center;
    
    background-repeat: no-repeat;
    
    /* Opcional: Un color de fondo por si la imagen tarda en cargar */
    background-color: #000; 
}