:root{
    --profile-img:url('../img/perfil.webp');
    --text:#fff;
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
}

/* Reset y Base */
*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',system-ui,-apple-system,sans-serif}
body{background:#000;color:var(--text);overflow-x:hidden; min-height: 100vh;}

/* Fondo Optimizado */
.background-blur{
    position:fixed;inset:0;
    background-image:var(--profile-img);
    background-size:cover;background-position:center;
    filter:blur(25px) brightness(.4);
    transform:scale(1.1);
    z-index:-1;
    will-change: transform;
}

/* HEADER */
header{
    position:fixed;top:0;left:0;width:100%;height:70px;
    background:rgba(0,0,0,.75);
    backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px);
    display:flex;justify-content:space-between;align-items:center;
    padding:0 20px;z-index:1000;
    border-bottom: 1px solid var(--glass-border);
}
.header-left{display:flex;align-items:center;gap:12px}
.header-pic{
    width:48px;height:48px;border-radius:50%;
    background-image:var(--profile-img);
    background-size:cover;background-position:center;
    border:2px solid var(--glass-border)
}
.header-name { font-weight: 600; font-size: 1rem; letter-spacing: 0.5px; }

/* MAIN */
.container{
    max-width:680px;margin:0 auto;
    padding:110px 20px 60px;text-align:center
}

/* Actualiza esta clase para que funcione con la etiqueta IMG */
.profile-pic-main {
    width: 200px;
    height: 280px;
    object-fit: cover; /* Vital para que la foto no se estire */
    border-radius: 24px;
    border: 3px solid var(--glass-border);
    box-shadow: 0 20px 40px rgba(0,0,0,.5);
    margin: 0 auto 25px;
    display: block;
}

h1 { font-size: 2rem; margin-bottom: 10px; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
p { line-height: 1.6; opacity: 0.9; margin-bottom: 20px; font-size: 1.05rem; }
h2 { margin: 40px 0 20px; font-size: 1.4rem; opacity: 0.9; border-bottom: 1px solid var(--glass-border); padding-bottom: 10px; display: inline-block;}

/* REDES CIRCULARES */
.social-row{display:flex;justify-content:center;gap:15px;margin:20px 0 30px}
.social-circle{
    width:50px;height:50px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    backdrop-filter:blur(6px);
    color:white;text-decoration:none;font-size: 1.3rem;
    transition:all .3s ease;
}
.social-circle:hover{background:white;color:#000;transform:translateY(-5px);box-shadow: 0 5px 15px rgba(255,255,255,0.2);}

/* --- CORRECCIÓN EN ESTA SECCIÓN --- */
/* GRID SOCIAL CARDS */
.image-cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin:25px 0}

.card{
    position:relative;aspect-ratio:1;border-radius:20px;overflow:hidden;
    cursor:pointer;text-decoration:none;color:white;transition:transform .3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); border: 1px solid var(--glass-border);
    /* Importante: permite que el contenido absoluto se posicione correctamente */
    isolation: isolate; 
}
.card:hover{transform:scale(1.03); border-color: rgba(255,255,255,0.6);}

.card-bg-img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; 
    transition: transform 0.5s;
    /* CAMBIO: z-index positivo bajo */
    z-index: 0; 
}
.card:hover .card-bg-img { transform: scale(1.1); }

.card-overlay{
    position:absolute;inset:0;
    background:linear-gradient(to top,rgba(0,0,0,.9) 0%,transparent 60%);
    /* CAMBIO: z-index mayor que la imagen */
    z-index: 1;
}

.card-icon{
    position:absolute;top:12px;left:12px;width:38px;height:38px;
    border-radius:50%;background:white;display:flex;align-items:center;justify-content:center;
    color:#000;box-shadow:0 4px 10px rgba(0,0,0,.3); 
    /* CAMBIO: z-index mayor que el overlay */
    z-index: 2;
}
.card-text{
    position:absolute;bottom:15px;left:0;width:100%;text-align:center;font-weight:700;
    /* CAMBIO: z-index mayor que el overlay */
    z-index: 2; 
    letter-spacing: 0.5px;
}

/* Colores Específicos */
/* Colores Oficiales de Marcas (2025) */

/* Facebook (Azul oficial) */
.fa-facebook-f, .fa-facebook { color: #1877F2; }

/* Instagram (Como es degradado, usamos un truco para el texto) */
.fa-instagram { 
background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #bc1888; /* Fallback */
}

/* TikTok (Negro oficial) */
.fa-tiktok { color: #000000; filter: drop-shadow(2px 0px 0px #FD3E3E) drop-shadow(-2px -2px 0px #4DE8F4); }

/* Twitter / X (Negro) */
.fa-x-twitter { color: #000000; }

/* YouTube (Rojo oficial) */
.fa-youtube { color: #FF0000; }

/* WhatsApp (Verde oficial) */
.fa-whatsapp { color: #25D366; }

/* Snapchat (Amarillo oficial) */
.fa-snapchat { color: #FFFC00; text-shadow: 1px 1px 0px #000; } /* Sombra para que se vea en fondo blanco */

/* Spotify (Verde oficial) */
.fa-spotify { color: #1DB954; }

/* LinkedIn (Azul oficial) */
.fa-linkedin, .fa-linkedin-in { color: #0077B5; }

/* CARRUSEL */
.carousel-container { width: 100%; overflow: hidden; margin-bottom: 40px; position: relative; mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); }
.carousel-track { display: flex; width: max-content; gap: 15px; animation: scrollLoop 30s linear infinite; }
.carousel-img { height: 180px; width: auto; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.5); border: 1px solid var(--glass-border); object-fit: cover;}
.carousel-track:hover { animation-play-state: paused; }
@keyframes scrollLoop { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* FOOTER */
footer{font-size: 0.9rem; opacity:0.9;margin-top:40px; padding-bottom: 20px;}

/* BOTON COMPARTIR */
#shareButton { cursor: pointer; transition: transform 0.2s; padding: 10px; }
#shareButton:active { transform: scale(0.9); }

/* --- ESTILOS PARA TUS IMÁGENES PROPIAS --- */

/* Clase general para el icono */
.custom-icon {
width: 100%;
height: 100%;
border-radius: 50%; /* Hace que la imagen sea redonda */
object-fit: contain;  /* "cover" hace que la foto rellene todo el circulo (bueno para fotos jpg) */
display: block;
}

/* AJUSTE ESPECIAL PARA LA FILA DE ARRIBA (Círculos transparentes) */
/* Si tus logos son PNG transparentes, usa esto para que no toquen los bordes */
.social-circle .custom-icon {
width: 70%;  /* Reducimos un poco el tamaño para que tenga margen */
height: 70%;
object-fit: contain; /* "contain" asegura que el logo se vea entero sin recortarse */
border-radius: 0;
}

/* --- ACCESIBILIDAD Y MEJORAS FINALES --- */

/* Borde visible al navegar con teclado (Vital para accesibilidad) */
a:focus-visible, button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
    border-radius: 4px;
}

/* Evita que se seleccione el texto al arrastrar el carrusel (Mejora UX) */
.carousel-track {
    user-select: none;
    -webkit-user-select: none;
}

/* Accesibilidad: Respetar si el usuario desactivó animaciones */
@media (prefers-reduced-motion: reduce) {
    .carousel-track { animation: none; }
    .background-blur, .card:hover, .social-circle:hover { 
        transition: none; transform: none; 
    }
}