.transparency {
    background-color: #3f3f3f47;
}

.white-text {
    color: #ffffff;
}

.white-text-secondary {
    color: #ffffff60;
}

.Header {
    height: 74px;
    width: 100%;
    display: flex; /* <--- El ingrediente secreto */
    align-items: center; /* Centra los elementos verticalmente */
    justify-content: space-between; /* Distribuye el espacio de forma igualitaria */
}

.global-paddings-sides {
    padding-right: 4rem;
    padding-left: 4rem;
}


/*Header*/
.header-button {
    /* Dimensiones y Forma */
    height: 48px;
    border-radius: 14px; /* Esquinas redondeadas */
    /* Colores y Transparencias */
    background-color: #4e4e4e14; /* Ese 14 al final es el canal alfa */
    color: rgba(255, 255, 255, 0.60); /* ffffff al 60% */
    /* Espaciado (Padding) */
    padding: 10px 22px; /* 10 vertical, 22 horizontal */
    /* Tipografía */
    font-size: 20px;
    font-weight: 400; /* 400 es el equivalente a "Regular" */
    /* Reset de estilos por defecto (Importante para botones) */
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease; /* Para que el hover se vea suave */
}


    /* Tip de Senior: Siempre agrega un estado Hover para que el usuario sienta feedback */
    .header-button:hover {
        background-color: #4e4e4e30;
        color: rgba(255, 255, 255, 0.90);
    }

.header-button-icon {
    /* Dimensiones y Forma */
    height: 48px;
    border-radius: 14px; /* Esquinas redondeadas */
    /* Colores y Transparencias */
    background-color: transparent; /* Ese 14 al final es el canal alfa */
    color: rgba(255, 255, 255, 0.60); /* ffffff al 60% */
    /* Espaciado (Padding) */
    padding: 10px 22px; /* 10 vertical, 22 horizontal */
    /* Tipografía */
    font-size: 20px;
    font-weight: 400; /* 400 es el equivalente a "Regular" */
    /* Reset de estilos por defecto (Importante para botones) */
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease; /* Para que el hover se vea suave */
}

    /* Tip de Senior: Siempre agrega un estado Hover para que el usuario sienta feedback */
    .header-button-icon:hover {
        color: rgba(255, 255, 255, 0.90);
    }

/* Clase extra para botones que solo tienen icono */
.icon-button {
    padding: 0; /* Quitamos el padding para que sea cuadrado */
    width: 48px; /* Lo hacemos igual de ancho que de alto */
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-icon {
    width: 34px; /* Ajusta el tamaño del icono según tu Figma */
    height: 34px;
    filter: opacity(0.7); /* Para que herede ese look semitransparente que te gusta */
    transition: filter 0.2s;
}

.icon-button:hover .nav-icon {
    filter: opacity(1); /* Se ilumina al pasar el mouse */
}



/*Footer*/
.Footer {
    min-height: 500px; /* Usamos min-height por si el contenido crece */
    width: 100%;
    display: flex; /* Ponemos las 3 columnas en horizontal */
}

.footer-column {
    flex: 1; /* Esto hace que cada div ocupe exactamente 1/3 del total */
    padding: 40px 0px; /* 44px arriba/abajo, 0px a los lados para que no peguen al borde */
    display: flex;
    flex-direction: column; /* Alineamos el título y los links uno abajo del otro */
    align-items: flex-start; /* Alinea todo a la izquierda de la columna */
}

.footer-title {
    font-size: 24px;
    color: #ffffff;
    margin-bottom: 20px; /* Espacio entre el título y el primer link */
    font-weight: 600;
    font-weight: 400; /* 400 es el equivalente a "Regular" */
}

.footer-link {
    font-size: 20px;
    font-weight: 400; /* 400 es el equivalente a "Regular" */
    color: rgba(255, 255, 255, 0.60); /* ffffff al 60% */
    text-decoration: none; /* Quitamos la línea de link por defecto */
    margin-bottom: 12px; /* Espacio entre cada link */
    transition: color 0.2s ease;
}

    .footer-link:hover {
        color: #ffffff; /* Se ilumina al pasar el mouse */
    }



/* --- SECCIÓN SUPERIOR (Horizontal) --- */
.top-content-section {
    width: 100%;
    display: flex;
    flex-direction: row; /* Horizontal */
    align-items: stretch; /* Esto hace que ambos midan lo mismo de alto si quieres */
    gap: 40px; /* El gap que pediste */
}

/* --- SECCIÓN INFERIOR (Vertical) --- */
.bottom-content-section {
    width: 100%;
    display: flex;
    flex-direction: column; /* Vertical */
    gap: 10px; /* El gap que pediste */
}

/* --- TRUCO DE SENIOR PARA EL ANCHO FIJO --- */
/* En el componente ProfileCard, asegúrate de ponerle un ancho fijo 
   para que SkillsPanel sea el que se adapte automáticamente */
.profile-card-container {
    flex: 0 0 400px; /* No crece, no se encoge, siempre mide 400px (o lo que diga tu Figma) */
}

.skills-panel-container {
    flex: 1; /* Ocupa todo el espacio restante */
}



/* --- Esto deveria ir en ShowreelGalery.razor.css pero no hagarra ahi --- */
.see-more-button {
    height: 48px;
    width: 200px; /* Aquí definimos el ancho fijo solo para desktop */
    border-radius: 14px;
    background-color: #4e4e4e14;
    color: rgba(255, 255, 255, 0.60);
    padding: 10px 22px;
    font-size: 20px;
    font-weight: 400;
    border: 1px solid rgba(255, 255, 255, 0.05); /* Un borde sutil para que resalte más que los del header */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

    .see-more-button:hover {
        background-color: #4e4e4e30; /* Un poco más de brillo al pasar el mouse */
        color: rgba(255, 255, 255, 1);
        transform: translateY(-2px);
    }



/* --- MOBILE MEDIA QUIERIES --- */

@media (max-width: 768px) {

    .global-paddings-sides {
        /* Sobrescribimos el valor para que sea más pequeño en móviles */
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    .top-content-section {
        /* Pasamos de horizontal a vertical */
        flex-direction: column-reverse;
        /* En mobile, 'stretch' estirará los componentes al ancho total de la pantalla */
        align-items: stretch;
        /* Reducimos un poco el espacio para no desperdiciar pantalla en scroll */
        gap: 24px;
    }

    .profile-card-container {
        width: 100% !important; /* Ocupa todo el ancho del celular */
        max-width: 100%;
    }

    .profile-image-wrapper {
        width: 100%; /* La imagen se ajusta al ancho del dispositivo */
        height: auto;
        aspect-ratio: 1 / 1; /* Mantiene el cuadrado perfecto */
    }

    /* --- Esto deveria ir en ShowreelGalery.razor.css pero no hagarra ahi --- */
    .see-more-wrapper {
        justify-content: center; /* Centramos el contenedor en mobile */
        width: 100%;
    }

    .see-more-button {
        width: 100% !important; /* Ahora sí, 100% real sin hardcodeo */
        height: 54px; /* Un poquito más alto para que sea más fácil de tocar (Touch Target) */
        font-size: 18px; /* Ajuste sutil de fuente */
    }

    
    /*Header*/
    .header-button {
        /* Dimensiones y Forma */
        height: 44px;
        border-radius: 10px; /* Esquinas redondeadas */
        /* Colores y Transparencias */
        /* Espaciado (Padding) */
        padding: 14px 16px; /* 10 vertical, 22 horizontal */
        /* Tipografía */
        font-size: 14px;
    }

    .header-button-icon {
        /* Dimensiones y Forma */
        height: 38px;
        width: 38px;
        border-radius: 10px; /* Esquinas redondeadas */
        /* Espaciado (Padding) */
        padding: 0px 0px; /* 10 vertical, 22 horizontal */

    }
    .nav-icon {
        width: 28px; /* Ajusta el tamaño del icono según tu Figma */
        height: 28px;
        filter: opacity(0.7); /* Para que herede ese look semitransparente que te gusta */
        transition: filter 0.2s;
    }


    /*Footer*/
    .Footer {
        /* Cambiamos a columna para que las secciones se apilen */
        flex-direction: column;
        /* Reducimos el min-height ya que en vertical el contenido lo estirará naturalmente */
        min-height: auto;
        /* Añadimos padding vertical para que no se vea apretado */
        padding-bottom: 20px;
    }

    .footer-column {
        /* Cada sección ahora ocupa el 100% del ancho */
        width: 100%;
        /* Centramos el contenido para mejor estética en móviles */
        align-items: center;
        text-align: center;
        /* Reducimos el padding entre bloques para que no sea un scroll infinito */
        padding: 30px 0px;
        /* Añadimos un borde sutil para separar las secciones del footer */
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

        /* Quitamos el borde al último elemento para que se vea limpio */
        .footer-column:last-child {
            border-bottom: none;
        }
}