/* =========================
   CONTACT PAGE STYLES (Added)
========================= */

/* Profile Card Enhancements */
.profile-card {
    /* Already exists, ensuring positioning */
    position: relative;
    isolation: isolate;
    /* Ensure overflow is hidden for the image zoom/reveal */
    overflow: hidden;
}

/* The element that holds the background image */
.profile-hover-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
    /* Behind content (content is z-index 2 or default relative) */
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Dark overlay gradient so text remains readable over the image */
.profile-hover-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 100%);
}

.profile-card:hover .profile-hover-bg {
    opacity: 1;
    transform: scale(1.0);
}

/* Content wrapper needs to stay above bg */
.profile-content {
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease;
}

.profile-card:hover .profile-content {
    /* Optional: move text slightly up */
    transform: translateY(-5px);
}

/* Hide the icon placeholder when image is shown? 
   No, user said 'aparezca la foto definida' but didn't explicitly say hide the icon.
   However, usually having the icon on top of the person's face is ugly.
   Let's fade out the placeholder icon container.
*/
.profile-img-placeholder {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.profile-card:hover .profile-img-placeholder {
    opacity: 0;
    transform: scale(0.8);
}

/* Highlight LinkedIn Button on Card Hover */
.profile-card:hover .linkedin-btn {
    background: #0077b5;
    /* LinkedIn Blue */
    color: white;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 119, 181, 0.4);
    border: 1px solid transparent;
}

/* Custom form styles for new inputs */
.form-control:focus {
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    border-color: var(--a1) !important;
    box-shadow: 0 0 0 2px rgba(110, 231, 255, 0.2) !important;
}

select.form-control option {
    background: #050712;
    /* Dark background for dropdown options */
    color: white;
}