/* css/components.css
   ==========================================================================
   Componentes Específicos (Botones, Avatar, Tipografía)
   ==========================================================================
   Aquí detallamos cómo se ve cada elemento individual.
*/

/* --- 1. Elementos de Fondo (Background Elements) --- */

.bg-image {
    width: 100%;
    height: 60vh;
    object-fit: cover;
    /* Asegura que la imagen cubra todo el espacio sin deformarse */
    object-position: top 50%;
    /* Ajusta qué tan "arriba" se muestra la imagen en móviles. top center muestra desde la parte superior. */
}

/* En pantallas de PC, centramos la imagen un poco más hacia abajo */
@media (min-width: 768px) {
    .bg-image {
        height: 100%;
        object-position: center 50%;
    }
}

/* Capa semitransparente sólida (Ahora oculta, pues la foto va directamente) */
.bg-overlay-color {
    display: none;
}

/* Capa de gradiente para oscurecer y difuminar a la parte de abajo de nuestro fondo */
.bg-overlay-gradient {
    position: absolute;
    inset: 0;
    /* Un gradiente de arriba hacia abajo (to bottom) con un color pardo sacado de la imagen */
    background: linear-gradient(to bottom,
            rgba(164, 158, 154, 0) 0%,
            /* Transparente arriba (se ve la foto clara) */
            rgba(164, 158, 154, 0) 30%,
            /* Inicia a difuminar más abajo */
            rgb(164, 158, 154) 61%,
            /* Termina sólido color taupe/pardo en el fondo (justo al corte de 62vh) */
            rgb(164, 158, 154) 100%);
}

@media (min-width: 768px) {
    .bg-overlay-gradient {
        background: linear-gradient(to bottom,
                rgba(164, 158, 154, 0) 0%,
                rgba(164, 158, 154, 0) 40%,
                rgb(164, 158, 154) 85%);
    }
}

/* --- 2. Componente: Avatar (Foto de Perfil) --- */

.profile-avatar {
    width: 10rem;
    /* 160px (w-40) en móviles */
    height: 10rem;
    /* h-40 */
    border-radius: var(--border-radius-avatar);
    /* Totalmente redondo */
    border: 4px solid var(--color-cream-border);
    /* Borde semitransparente */
    overflow: hidden;
    /* Para que la imagen cuadrada no se salga del círculo */
    margin-bottom: 2rem;
    /* Separación con el título */
    box-shadow: var(--shadow-2xl);
    /* Sombra difuminada grande */
}

/* Hacemos el avatar más grande en pantallas medianas (tablets y PC) */
@media (min-width: 768px) {
    .profile-avatar {
        width: 12rem;
        /* 192px (w-48) */
        height: 12rem;
        /* h-48 */
    }
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- 3. Tipografía (Títulos y Textos Específicos) --- */

.profile-name {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 8vw, 1.8rem);
    /* Se ajusta dinámicamente en móviles para caber en una línea */
    font-weight: 700;
    /* Bold */
    color: var(--color-cream);
    letter-spacing: 0.025em;
    /* tracking-wide */
    white-space: nowrap;
    /* Evita que se rompa en varias líneas */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Nombre más grande en pantallas de PC */
@media (min-width: 768px) {
    .profile-name {
        font-size: 3.5rem;
        /* 56px */
    }
}

.icon-verified {
    color: var(--color-verified);
    font-size: 1.3rem;
    /* text-3xl */
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.profile-subtitle {
    font-family: var(--font-sans);
    font-size: 1rem;
    /* text-xl */
    color: var(--color-cream-text-muted);
    font-weight: 500;
    /* font-light */
    letter-spacing: 0.025em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.3);

    /* Estilo Opción 1: Píldora Translúcida (Glassmorphism) */
    background-color: rgba(17, 60, 74, 0.4);
    /* Azul principal con opacidad */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    /* Soporte para Safari */
    padding: 0.3rem 1.2rem;
    border-radius: 999px;
    display: inline-block;
    margin-bottom: 0.6rem;
    border: 1px solid rgba(244, 238, 219, 0.15);
}

@media (min-width: 768px) {
    .profile-subtitle {
        font-size: 1.5rem;
        /* text-2xl */
        padding: 0.4rem 1.5rem;
    }
}

/* --- 4. Componente: Botones de Enlaces (Linktree Buttons) --- */

.link-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /* Agrega espacio entre el icono (emoji) y el texto */
    width: 100%;
    background-color: var(--color-cream);
    padding: 1rem;
    /* Reducido para móviles */
    border-radius: 1rem;
    /* rounded-2xl (16px) */
    color: var(--color-primary);
    box-shadow: var(--shadow-lg);

    /* Configuración de animaciones y transformaciones para el intercatividad Hover */
    transition: all var(--transition-normal);
    transform: translateY(0);
    /* Estado inicial: sin mover */
}

/* Botones más grandes en pantallas de PC */
@media (min-width: 768px) {
    .link-button {
        padding: 1.5rem 2.5rem;
    }
}

.link-button:hover {
    background-color: var(--color-cream-hover);
    /* Se vuelve blanco puro */
    box-shadow: var(--shadow-xl);
    /* Aumenta la sombra */
    transform: translateY(-4px);
    /* Efecto de "levantar" el botón (hover:-translate-y-1) */
}

.link-button span {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    /* Reducido para móviles */
    font-weight: 600;
    /* font-semibold */
    transition: color var(--transition-normal);
}

@media (min-width: 768px) {
    .link-button span {
        font-size: 1.5rem;
        /* text-2xl */
    }
}

.link-button:hover span {
    color: var(--color-primary-hover);
    /* El texto se hace un poco más oscuro al pasar el ratón */
}

/* --- 5. Componente: Íconos Sociales (Footer) --- */

.social-link {
    color: var(--color-cream-text-dim);
    transition: all var(--transition-normal);
    display: inline-block;
    /* Necesario para que el transform scale funcione bien */
}

.social-link i {
    font-size: 2.25rem;
    /* text-4xl */
}

.social-link:hover {
    color: var(--color-cream-hover);
    /* Blanco brillante al hover */
    transform: scale(1.1);
    /* Crece ligeramente (hover:scale-110) */
}

/* Clase de utilidad para esconder texto para lectores de pantalla */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* --- 6. Iconos SVG (E.g. WhatsApp, etc.) --- */
.icon-svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
}