/* Estilos: Portada (Front Page) - Canvas Mode */

/* Hero */
html { scroll-behavior: smooth; }

.landing-hero {
    width: 100vw; 
    height: 100vh; 
    height: 100dvh; 
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; 
    padding: 2rem 1rem; /* Padding interno seguro */
    background-color: var(--color-bg);
}

body { overflow-x: hidden; } 

.hero-content {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 100%; max-width: 900px; z-index: 1; height: 100%; gap: 1.5rem; 
}

.profile-avatar-hero { 
    display: block; margin: 0 auto; width: 250px; height: 250px; 
    border-radius: 50%; object-fit: cover; 
    border: 5px solid var(--color-surface); 
    box-shadow: 0 15px 40px rgba(0,0,0,0.12); 
    transition: all 0.3s ease; 
}

.hero-title { 
    font-size: 3.5rem; font-weight: 800; letter-spacing: -1.5px; 
    line-height: 1.1; color: var(--color-text); margin: 0; 
}

@media (max-width: 768px) {
    .landing-hero { padding: 2rem 1rem; padding-bottom: 80px; }
    .hero-content { justify-content: center; gap: 1rem; }
    .profile-avatar-hero { height: 250px; max-height: clamp(150px, 35vh, 250px); margin-bottom: 0; }
    .hero-title { font-size: clamp(1.8rem, 6vw, 2.5rem); white-space: nowrap; width: auto; }
}