:root{
    /* La ruta ../ sube un nivel de "css" a "assets", luego entra a "img" */
    --profile-img: url('../img/perfil.webp');
    --text: #ffffff;
    --accent: #7928ca; /* Tu color morado de marca */
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.15);
}

/* Reset y Base */
*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',system-ui,-apple-system,sans-serif}

html { scroll-behavior: smooth; }

body{
    background:#050505;
    color:var(--text);
    overflow-x:hidden; 
    min-height: 100vh;
}

/* Fondo con Blur (Efecto atmósfera) */
.background-blur{
    position:fixed;inset:0;
    background-image:var(--profile-img);
    background-size:cover;background-position:center;
    filter:blur(30px) brightness(0.3); /* Un poco más oscuro para leer mejor */
    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,.85); /* Más opacidad para leer mejor */
    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:40px;height:40px;border-radius:50%;
    background-image:var(--profile-img);
    background-size:cover;background-position:center;
    border:1px solid rgba(255,255,255,0.3);
}
.header-name { font-weight: 600; font-size: 0.95rem; letter-spacing: 0.5px; }

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

/* FOTO DE PERFIL PRINCIPAL */
.profile-pic-main {
    width: 180px; /* Ajustado para mejor proporción */
    height: 180px;
    object-fit: cover;
    border-radius: 50%; /* Circular es tendencia ahora, si prefieres cuadrado usa 24px */
    border: 3px solid rgba(255,255,255,0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    margin: 0 auto 20px;
    display: block;
    animation: fadeIn 1s ease;
}

h1 { font-size: 2.2rem; margin-bottom: 5px; letter-spacing: -1px; }
p { line-height: 1.6; opacity: 0.85; margin-bottom: 25px; font-size: 1.05rem; max-width: 500px; margin-left: auto; margin-right: auto; }
h2 { margin: 40px 0 20px; font-size: 1.2rem; opacity: 0.7; text-transform: uppercase; letter-spacing: 2px; font-size: 0.9rem; }

/* REDES CIRCULARES (FILA SUPERIOR) */
.social-row{display:flex;justify-content:center;gap:15px;margin:20px 0 35px}

.social-circle{
    width:55px;height:55px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    backdrop-filter:blur(10px);
    color:white;text-decoration:none;
    transition:all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efecto rebote */
}
.social-circle i { font-size: 1.5rem; } /* Tamaño para iconos FontAwesome */
.social-circle:hover{background:white;color:#000;transform:translateY(-5px) scale(1.1);box-shadow: 0 10px 20px rgba(0,0,0,0.3);}

/* GRID DE TARJETAS (LINKS PRINCIPALES) */
.image-cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin:25px 0}

.card{
    position:relative;aspect-ratio:16/9; /* Más rectangular, mejor para leer */
    border-radius:16px;overflow:hidden;
    cursor:pointer;text-decoration:none;color:white;transition:transform .3s ease, border .3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); border: 1px solid var(--glass-border);
    isolation: isolate; 
}
@media (min-width: 600px) {
    .card { aspect-ratio: 2/1; } /* Más ancho en PC */
}

.card:hover{transform:translateY(-3px); border-color: rgba(255,255,255,0.4);}

/* Capas de la tarjeta */
.card-bg-img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; 
    transition: transform 0.6s ease; z-index: 0; 
}
/* Nuevo: Para tarjetas con color sólido (como Email) */
.card-bg-solid {
    position: absolute; inset: 0; width: 100%; height: 100%; 
    background: #1a1a1a; z-index: 0;
    transition: background 0.3s;
}
.card:hover .card-bg-solid { background: #2a2a2a; }
.card:hover .card-bg-img { transform: scale(1.1); }

.card-overlay{
    position:absolute;inset:0;
    background:linear-gradient(to top,rgba(0,0,0,0.95) 10%, rgba(0,0,0,0.2) 100%);
    z-index: 1;
}

.card-icon{
    position:absolute;top:15px;left:15px;width:40px;height:40px;
    border-radius:12px; /* Cuadrado redondeado se ve más tech */
    background:rgba(255,255,255,0.95);
    display:flex;align-items:center;justify-content:center;
    color:#000;box-shadow:0 4px 10px rgba(0,0,0,0.2); 
    z-index: 2;
}
/* Ajuste para iconos dentro de la tarjeta */
.card-icon img { width: 60%; height: 60%; object-fit: contain; }
.card-icon i { font-size: 1.2rem; color: #000; }

.card-text{
    position:absolute;bottom:15px;left:15px; /* Alineado a la izquierda */
    font-weight:700; font-size: 1.1rem;
    z-index: 2; letter-spacing: 0.5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

/* CARRUSEL INFINITO */
.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); 
    padding: 20px 0; /* Espacio para la sombra */
}
.carousel-track { display: flex; width: max-content; gap: 15px; animation: scrollLoop 20s linear infinite; }
.carousel-img { 
    height: 220px; width: auto; 
    border-radius: 12px; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.5); 
    border: 1px solid var(--glass-border); 
    object-fit: cover;
    transition: transform 0.3s;
}
.carousel-img:hover { transform: scale(1.05); border-color: white; }
.carousel-track:hover { animation-play-state: paused; }

@keyframes scrollLoop { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* FOOTER */
footer{font-size: 0.85rem; opacity:0.6;margin-top:40px; padding-bottom: 30px;}

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

/* --- AJUSTES DE IMAGENES --- */
.custom-icon { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; display: block; }
.social-circle .custom-icon { width: 60%; height: 60%; border-radius: 0; }

/* ANIMACIONES */
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* RESPONSIVE */
@media (max-width: 400px) {
    .image-cards-grid { grid-template-columns: 1fr; } /* 1 Columna en móviles muy pequeños */
    h1 { font-size: 1.8rem; }
}